Page 1

Uso de MVC con ExtJs 4 2013 Implementado por:

Gustavo Pérez Juárez gustavo.perez@metalsa.com Ejercicio diseñado por: Equipo de Sencha http://docs.sencha.com/ext-js/40/#!/guide/application_architecture

Una vez iniciado NetBeans nos dirigiremos a File -> New Project. Con lo cual nos desplegara la pantalla para nuevo Proyecto. Seleccionamos Java Web en la primera pantalla. En la segunda pantalla seleccionamos la opción WebApplication.

Ejercicio para implementación del modelo MVC dentro de Ext Js 4 El siguiente ejercicio esta basado en la nueva arquitectura MVC propuesta por el framework Ext JS en su versión 4; para lo cual se recomienda la lectura de la documentación en la página de Sencha. Requerimientos:  NetBeans IDE 7.1  Librerias de Ext Js 4.0.7

Damos clic en Next, con lo cual nos aparecerá la ventana para nombre de proyecto.

 Servidor Glassfish 3.1.1 u Oracle Glassfish 3.1 (build 43)

Le damos a nuestro proyecto el nombre de “ExtJsMVC” y damos clic en Next.

 Mozzila Firefox Para iniciar nuestro ejercicio debemos acceder a NetBeans.

Desarrollo de Habilidades Digitales

Page 1


Uso de MVC con ExtJs 4 2013 Seleccionamos el servidor en el cual deseamos desplegar(en este caso glassfish 3.1.1).

A continuaciรณn vamos a cargar las librerias de Ext Js a nuestro proyecto. Tomamos las librerias de Ext Js y las copiamos a la carpeta Web Pages en nuestro proyecto

Una vez seleccionado el servidor donde se desplegarรก nuestra aplicaciรณn damos clic en Finish. Una vez creado nuestro proyecto nos desplegara nuestro proyecto y el index.jsp

Una vez realizado esto nuestra primera modificaciรณn la haremos en nuestro cรณdigo del index.jsp, el cual substituiremos con el siguiente: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+reque st.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <link rel="stylesheet" type="text/css" href="<%=basePath%>Ext.4.0.7/resources/css/ext-all.css"> <script type="text/javascript" src="<%=basePath%>Ext.4.0.7/ext-all-debug.js"></script> <script type="text/javascript"> </script> <title>Ext JS MVC</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="nocache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

Desarrollo de Habilidades Digitales

Page 2


Uso de MVC con ExtJs 4 2013 <meta http-equiv="description" content="This is my page"> </head> <body> </body> </html>

Y que colocamos en nuestro index.jsp como en la siguiente imagen.

Este cรณdigo ya hace referencia a las librerias de Ext Js, con lo cual ya podemos comenzar a desarrollar el ejercicio. Para comenzar debemos de realizar una estructura de archivos que el framework utiliza para identificar cada una de las partes del modelo MVC; ademรกs de crear un archivo js, de nombre app.js.

Desarrollo de Habilidades Digitales

Definiciรณn de estructura de carpetas y archivo app.js La estructura de carpetas y colocaciรณn del archivo app.js serรก la siguiente: WebPages | app | | | controller | | | model | | | store | | | view | | | User app.js Una vez terminando de crear las carpetas y el archivo js, la estructura debe de verse como en la siguiente imagen:

Page 3


Uso de MVC con ExtJs 4 2013 Una vez terminado esto, vamos a empezar a realizar nuestra aplicación abriendo el archivo app.js Al cual agregamos el siguiente código: Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'MVCApp', appFolder: 'app', launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); } });

En el cual: name -> se refiere al nombre que le damos a nuestra aplicación y por lo cual las demás clases harán referencia a el appFolder -> hace referencia al nombre de la carpeta donde se encuentra nuestra estructura MVC definida launch -> se refiere a la aplicación a lanzar al momento de desplegar la página web. Una vez hecho esto hacemos referencia a nuestra clase app.js en nuestro index con la siguiente linea en nuestro index.jsp: <script type="text/javascript" src="<%=basePath%>app.js"></script> desplegamos el proyecto, con lo cual obtendremos el siguiente resultado

Controlador de la aplicación Una vez definida la estructura de nuestra aplicación; además de haberla desplegado exitosamente, es tiempo de definir un controlador, esto con la finalidad de insertar funcionalidad a nuestra aplicación. Para este cometido creamos un archivo dentro de la carpeta controller, con el nombre de UserController.js, y colocamos este código dentro de él. Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', init: function() { this.control({ 'viewport > panel': { render:this.onPanelRendered } }); }, onPanelRendered:function(){ console.log('The panel was rendered') } });

Una vez hecho esto definimos nuestro controlador en el archivo app.js, como se muestra en el siguiente código Ext.Loader.setConfig({ enabled: true }); Ext.application({ name: 'MVCApp', appFolder: 'app', controllers:[ 'UserController'

Desarrollo de Habilidades Digitales

Page 4


Uso de MVC con ExtJs 4 2013 ], launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'panel', title: 'Users', html : 'List of users will go here' } ] }); }

title:'All Users', initComponent:function(){ this.store = { fields:[ 'name', 'email' ], data:[ {name:'Ed', email:'ed@sencha.com'}, {name:'Tommy', email:'tommy@sencha.com'} ] };

});

this.columns=[ {header: 'Name', dataIndex:'name', flex:1}, {header: 'Email', dataIndex:'email', flex:1} ];

Una vez realizados estos cambios al desplegar nuevamente nuestra aplicación obtendremos lo siguiente:

this.callParent(arguments); } });

Una vez definido el código de la lista de usuarios, nos dirigimos a nuestro archivo UserController.js, donde modificaremos nuestro código, para que el controlador cargue esta vista; haciendo estas modificaciones el código queda de la siguiente manera:

Una vez definido el controlador en el cual nuestra aplicación centrara su funcionamiento, es tiempo de organizar un poco más nuestra aplicación así que comenzaremos a definir algunas vistas.

Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', views:[ 'User.ListUser' ], init: function() { this.control({ 'viewport > panel': { render:this.onPanelRendered } }); }, onPanelRendered:function(){ console.log('The panel was rendered') } });

Para empezar crearemos el archivo ListUser.js, dentro de la carpeta User que a su vez se encuentra dentro de la carpeta view, y después colocamos el siguiente código:

Y en nuestro archivo app.js, agregaremos el xtype de nuestra vista(definido con la propiedad alias), para que podamos visualizar la lista de usuarios, con lo cual nos queda de la siguiente manera:

Con lo cual vemos, que nuestro controlador se acciona al momento de que el panel es juntado con el viewport. Construyendo una Vista

Ext.define('MVCApp.view.User.ListUser',{ extend:'Ext.grid.Panel' , alias:'widget.userlistuser',

Desarrollo de Habilidades Digitales

Ext.Loader.setConfig({ enabled: true }); Ext.application({

Page 5


Uso de MVC con ExtJs 4 2013 name: 'MVCApp', appFolder: 'app', controllers:[ 'UserController' ], launch: function() { Ext.create('Ext.container.Viewport', { layout: 'fit', items: [ { xtype: 'userlistuser' } ] }); }

} }); }, editUser:function(grid, record){ console.log('Double clicked on ' + record.get('name')); } });

Debemos de observar que el nombre de la propiedad userlistuser es el xtype definido dentro de nuestra clase ListUser. Después de haber modificado nuestro código el resultado es el siguiente:

});

Y una vez realizado este cambio el resultado es el siguiente:

Editando la Lista

Controlando la lista Una vez definida una de nuestras vistas, ahora vamos a canalizar al controlador, para que dirija su función al momento de dar doble clic sobre uno de los registros de la lista, para esto realizaremos el siguiente cambio en nuestro código del controlador . Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', views:[ 'User.ListUser' ], init: function() { this.control({ 'userlistuser': { itemdblclick:this.editUser

Desarrollo de Habilidades Digitales

Una vez realizado esta prueba en nuestra consola ahora vamos a canalizar estos registros hacia una nueva vista, que este caso será una ventana. Para lograr este cometido creamos otro archivo con el nombre EditUser.js, dentro de la carpeta User(que se encuentra de view), y una vez realizado esto, colocamos el siguiente código: Ext.define('MVCApp.view.User.EditUser',{ extend: 'Ext.window.Window', alias : 'widget.useredituser', title : 'Edit User', layout: 'fit', autoShow: true, initComponent: function() { this.items = [ { xtype: 'form', items: [ {

Page 6


Uso de MVC con ExtJs 4 2013 xtype: 'textfield', name : 'name', fieldLabel: 'Name' }, { xtype: 'textfield', name : 'email', fieldLabel: 'Email'

});

Y una vez realizados estos cambios,el resultado al momento de dar doble clic sobre cualquier registro de la lista se presenta en la pantalla siguiente.

} ] } ]; this.buttons = [ { text: 'Save', action: 'save' }, { text: 'Cancel', scope: this, handler: this.close } ]; this.callParent(arguments); } });

Después de escribir este código, damos de alta esta nueva vista, en nuestro controlador, como lo hicimos anteriormente con la lista de usuarios. Para esto vamos a nuestro archivo UserController.js, y hacemos la siguiente modificación a nuestro código: Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', views:[ 'User.ListUser', 'User.EditUser' ], init: function() { this.control({ 'userlistuser': { itemdblclick:this.editUser } }); }, editUser:function(grid, record){ var view = Ext.widget('useredituser'); view.down('form').loadRecord(record); }

Desarrollo de Habilidades Digitales

Separando Modelos y Stores Una vez definidas las vistas que estamos manejando, debemos de realizar la separación de modelos y stores que estamos manejando en la lista de usuarios. Esto lo haremos de la siguiente manera; primero vamos a crer un archivo que se llama UserModel.js, esto dentro de la carpeta model, de nuestra carpeta de archivos y una vez definido vamos a escribir el siguiente código en el. Ext.define('MVCApp.model.UserModel',{ extend:'Ext.data.Model', fields:['name','email'] });

E inmediatamente después de realizar este cambio, vamos a crear otro archivo nuevo con el nombre de UserStore.js, esto dentro de la carpeta store, y escribimos el siguiente código. Ext.define('MVCApp.store.UserStore',{ extend: 'Ext.data.Store', data: [ {name: 'Ed', email: 'ed@sencha.com'}, {name: 'Tommy', email: 'tommy@sencha.com'} ], model:'MVCApp.model.UserModel' });

Page 7


Uso de MVC con ExtJs 4 2013 Debemos de notar que en lugar de definir la propiedad fields, estamos declarando la propiedad model, y en el cual colocamos el nombre de clase completo de nuestro modelo definido anteriormente. Estamos por terminar.

} }); }, editUser:function(grid, record){ var view = Ext.widget('useredituser'); view.down('form').loadRecord(record);

Como siguientes pasos, vamos a modificar nuestra clase ListUser.js; esto con la finalidad de retirar el store, definido anteriormente, y colocarlo a través de la propiedad store, del grid. Para esta finalidad el código de la lista queda de la siguiente manera. Ext.define('MVCApp.view.User.ListUser',{ extend:'Ext.grid.Panel' , alias:'widget.userlistuser', title:'All Users', store:'UserStore', initComponent:function(){ this.columns=[ {header: 'Name', dataIndex:'name', flex:1}, {header: 'Email', dataIndex:'email', flex:1} ];

} });

Lo que hicimos en esta sección fue acomodar el código de nuestra aplicación hacia sus carpetas correspondientes (model y store), con lo cual nuestra vista no debio de haber sufrido ningun error en la forma de manejo de datos. En la imagen siguiente se muestra como a pesar del reacomodo del código, la vista hacia el usuario no ha sufrido cambio alguno.

this.callParent(arguments); } });

Una vez hecho esto, recordemos que el encargado de saber que se carga es nuestro controlador, por lo tanto es momento de declarar nuestro modelo y nuestro store en UserController.js, para lograr esto el código de nuestro controlador debe de quedar de la siguiente manera. Guardando datos con el modelo Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', views:[ 'User.ListUser', 'User.EditUser' ], models:[ 'UserModel' ], stores:[ 'UserStore' ], init: function() { this.control({ 'userlistuser': { itemdblclick:this.editUser

Desarrollo de Habilidades Digitales

Una vez realizados estos cambios, vamos a agregar una nueva funcionalidad a nuestra aplicación. Para este cometido vamos a definir una nueva función dentro de nuestro archivo UserController.js y la cual se muestra en el código siguiente. Ext.define('MVCApp.controller.UserController',{ extend:'Ext.app.Controller', views:[ 'User.ListUser', 'User.EditUser' ], models:[

Page 8


Uso de MVC con ExtJs 4 2013 'UserModel' ], stores:[ 'UserStore' ], init: function() { this.control({ 'userlistuser': { itemdblclick:this.editUser }, 'useredituser button[action=save]': { click: this.updateUser } }); }, editUser:function(grid, record){ var view = Ext.widget('useredituser'); view.down('form').loadRecord(record); }, updateUser: function(button) { var win = button.up('window'), form = win.down('form'), record = form.getRecord(), values = form.getValues(); record.set(values); win.close(); } });

Recordemos que en nuestra vista de EditUser.js declaramos nuestro botón junto con una propiedad llamada action, con el valor 'save', pues esa función se manda a traer para poder interactuar con el botón que se encuentra en la ventana de editar.

Una vez que cambiamos el registro, damos clic en el boton 'Save', y vemos como cambia el registro en nuestra lista.

Simulando datos del servidor Por último y dar el toque final a nuestra aplicación vamos a quitar los datos estáticos que se encuentran en nuestro store, y vamos a mandar a traerlos desde un archivo que se llame datos.json. Para este cometido vamos a crear una carpeta al con el nombre de data, un nivel abajo de la carpeta WebPages, e inmediatamente dentro de nuestra nueva carpeta creamos el archivo antes descrito. En el escribimos los siguientes datos. { "success": true, "users": [ {"id": 1, "name": "Ed", "email": "ed@sencha.com"}, {"id": 2, "name": "Tommy", "email": "tommy@sencha.com"} ]

Ya que hemos realizado estos cambios de código, veamos el resultado. }

y ahora haremos un cambio a nuestro store para que reciba los datos desde una url. Para esta tarea el código debe de quedar de la siguiente manera. Ext.define('MVCApp.store.UserStore',{ extend: 'Ext.data.Store', autoLoad: true, proxy: { type: 'ajax', url: 'data/datos.json', reader: {

Desarrollo de Habilidades Digitales

Page 9


Uso de MVC con ExtJs 4 2013 type: 'json', root: 'users', successProperty: 'success'

A continuaci贸n se muestra la organizaci贸n final del proyecto.

} }, model:'MVCApp.model.UserModel' });

Y una vez realizado esto, vamos a ver la carga que se hace desde el servidor, como se muestra en la siguiente imagen.

Con esto finaliza este ejercicio de implementaci贸n del modelo MVC en Ext Js 4

Desarrollo de Habilidades Digitales

Page 10

MVC con Ext Js 4  

Guia de implementación para uso de MVC con Ext Js 4

Read more
Read more
Similar to
Popular now
Just for you