Ya hemos hablado anteriormente sobre Sencha Touch y sus capacidades. Algunas de ellas es la integración de datos, la implementación del patrón de diseño MVC en el lado cliente y la posibilidad de utilizar un modelo de datos en la parte cliente con Data Package.
Hoy vamos a ver como usando el modelo de datos en Sencha Touch podemos habilitar persistencia a través de la construcción de objetos para Modelos, Proxys y Almacenes. En la mayoría de los casos, querremos que nuestras aplicaciones utilicen una o más de estas clases.
La raíz del paquete de datos es la clase Ext.data.Model. Un modelo es una representación abstracta de un tipo de datos en nuestras aplicaciones, exactamente igual que lo es en un aplicación programada en Ruby, Python, C++, .NET o Java por ejemplo.
Creando modelos en el lado del cliente
Crear un nuevo modelo en Sencha Touch es una tarea sencilla, el framework pone a nuestra disposición el método Ext.regModel que es un alias para el método Ext.ModelMgr.registerType que nos permite crear nuevas clases para modelos a partir de un objeto que pasamos como único parámetro al método.
Ext.regModel('Editor', {
fields: [
{name: 'nombre', type: 'string'},
{name: 'avatar', type: 'string'},
{name: 'num_posts', type: 'float'},
{name: 'activo', type: 'boolean'}
]
});Cargando y mostrando los datos
Ahora que hemos creado el modelo podemos hacer referencia a él por su nombre y configurar componentes de forma sencilla para que carguen los datos. Ahora que tenemos definido el modelo vamos a crear la vista donde mostrar los datos a través de un componente DataView.
var editoresList = new Ext.DataView({
store: new Ext.data.Store({
model: 'Editor',
proxy: {
type: 'ajax',
url: '/editores.json',
reader: {
type: 'json',
root: 'editores'
}
}
}),
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div>',
'<img src="" />',
'<div class="button">Ver</div>',
'</div>'.
'</tpl>'
),
fullscreen: true
});Stores. En ExtJS4 usamos Ext.define en lugar de Ext.regModel que esta obsoleto pero el funcionamiento es exactamente el mismo.
Hemos definido que el modelo que debe cargar nuestro almacen (store) es del tipo Editor y que para cargar los datos debe hacerlo a través de un proxy que trae los datos a través de una consulta ajax que además se realiza a la URL /editores.json.
También hemos provisto a nuestro almacén de un lector (reader) que indica al proxy como debe decodificar la respuesta que obtiene del servidor a través de la consulta AJAX. Esperamos que se devuelva un objeto JSON que contiene un array de objetos bajo la clave ‘editores‘.
También hemos definido un elemento del tipo plantilla extendida (Ext.XTemplate) que nos servirá para dibujar el contenedor de cada uno de los editores cargados. El uso de las plantillas extendidas en ExtJS y Sencha Touch va más allá del cometido de este artículo, si quieres saber más puedes seguir éste enlace.
El contenido del objeto JSON podría ser parecido al siguiente:
{
"editores": [
{"name": "Txema Rodríguez", "avatar": "http://url_del_avatar.com", "num_posts": 62, "active": true},
{"name": "Jorge Rubira", "avatar": "http://url_del_avatar.com", "num_posts": 54, "active": true},
{"name": "Nacho Rodríguez", "avatar": "http://url_del_avatar.com", "num_posts": 41, "active": true},
{"name": "Fernando Siles", "avatar": "http://url_del_avatar.com", "num_posts": 53, "active": true},
{"name": "Mangrar", "avatar": "http://url_del_avatar.com", "num_posts": 13, "active": true},
{"name": "Oscar Campos", "avatar": "http://url_del_avatar.com", "num_posts": 45, "active": true},
{"name": "Juan Quijano", "avatar": "http://url_del_avatar.com", "num_posts": 13, "active": true},
{"name": "Carlos Paramio", "avatar": "http://url_del_avatar.com", "num_posts": 34, "active": false}
]
}La vista
DataView es un componente que sabe como usar un Store y dibujar las instancias de los objetos que cargue en HTML usando una plantilla. Cuando el Store cargue los datos, el DataView dibujará cada uno de los registros de forma automática usando la plantilla que hemos definido anteriormente lo cual nos dará una lista con todos los editores.
El proxy guarda todos los datos del modelo en un objeto sessionStorage de HTML5 así que está disponible en memoria entre refrescos de páginas (si es que refrescamos) y estará compartido por todos los scripts del mismo dominio. Sabiendo esto, podemos hacer cosas antes jamás pensadas con una facilidad asombrosa.
Por ejemplo podemos registrar un evento en nuestra vista para que cada vez que se haga tap (click con el dedo) sobre uno de los registros, incluya al editor en nuestra lista de expertos y podremos hacerlo en cualquier parte del código. Obviamente se pueden hacer cosas mucho más interesantes que esa, solo hay que echarle imaginación pero para el propósito de nuestro post es adecuado. Primero crearemos un nuevo Store para almacenar a nuestros editores expertos:
var Expertos = new Ext.data.Store({
model: 'Editor',
proxy: {
type: 'sessionstorage',
id: 'expertosEditores'
}
});editoresList.on('itemtap', function(dataview, index, el, e) {
if (e.getTarget('div.button')) {
var editor = dataview.store.getAt(index);
Expertos.add(editor);
Expertos.sync();
}
});Conclusión
Hoy hemos aprendido algo más acerca de Sencha Touch y de su funcionamiento, entre otras cosas a usar la abstracción sobre sessionStorage lo cual me recuerda que debo escribir algún post sobre eso en la serie de introducción a HTML5 que la tengo un poco abandonada. Hasta la próxima.
Más en Genbeta Dev | Desarrollo de Aplicaciones Móviles, Sencha Touch