Recientemente ha sido lanzada la versión 2 Beta de Sencha Touch. Para quién no lo conozca, Sencha Touch es un framework para desarrollar aplicaciones para dispositivos móviles con Javascript, HTML y CSS. El framework esta desarrollado por Sencha, la misma compañía que desarrolla el conocido Ext JS o Ext GWT entre otros productos.
Como principales novedades, esta versión se beneficia del nuevo sistema de clases que ya usa Ext JS 4, una implementación mejorada del patrón MVC y perfiles multi-dispositivo. Pero veamos que novedades nos traen en mas profundidad...
Documentación
En Sencha han hecho un gran esfuerzo en cuando a ofrecer una completa documentación. Han añadido 20 nuevas guías cubriendo desde lo mas básico, como el típico "getting started".
Además, el centro de documentación, permite la edición de código en línea, para poder experimentar con el framework.
Nuevo ejemplo de integración con Facebook
En Sencha han creado un completo ejemplo de integración con Facebook. La aplicación se llama "Jog with friends". Esta combina el uso del SDK JavaScript de Facebook en el lado del cliente con un script para node.js y MongoDB en el lado servidor. Para ver el ejemplo, navegad a http://ju.mp/senchajwf con un navegador basado en Webkit.
Nuevo sistema de clases
Esta versión se beneficia del nuevo sistema de clases que se usa en Ext JS 4. Ahora la configuración de cualquier componente se hace con el uso de "setters" y "getters". Estos métodos siempre tienen el mismo formato y se pueden usar en cualquier momento:
var panel = Ext.create('Ext.Panel', {
html: 'Sencha Touch 2 rocks'
});
alert(panel.getHtml()); // alerts the current value of the html config
panel.setHtml('It sure does'); // changes your panel html to a new value
Como estas funciones siempre siguen el mismo fortmato, se puede aprender el framework fácilmente, ya es que es muy intuitivo. Podéis consultar la guía del nuevo sistema de clases aquí.
Soporte de historial para MVC
Esto es muy interesante. Se trata de habilitar el botón "atrás" del navegador en tu aplicación, navegando correctamente entre las pantallas de tu aplicación sin recargar la página entera. Permite incluso enviar enlaces para compartir, haciendo que se cargue la correspondiente pantalla en tu aplicación.
Para hacer esto hace uso de lo que llaman "rutas". Esto no es más que una lista de correspondencias entre "urls" y acciones del controlador:
Ext.define('MyApp.controller.Products', {
extend: 'Ext.app.Controller',
config: {
routes: {
'products/:id': 'showProduct'
}
},
showProduct: function(id) {
console.log('showing product ' + id);
}
});
Especificando las rutas, el controlador principal será notificado cuando la url tenga la forma "#products/123".
Las rutas pueden ser tan sencillas como la anterior o tan complicadas como usar expresiones regulares:
Ext.define('MyApp.controller.Products', {
extend: 'Ext.app.Controller',
config: {
routes: {
'file/:filename': {
action: 'showFile',
conditions: {
':page': "[0-9a-zA-Z\.]+"
}
}
}
},
//opens a new window to show the file
showFile: function(filename) {
window.open(filename);
}
});
Para mas información, visitad el capítulo de history support en la documentación en línea.
Perfiles multi-dispositivo
Uno de los desafíos de Sencha es que el framework funcione mas o menos igual en todos los dispositivos, tengan el tamaño de pantalla que sea o corran distintos sistemas operativos. Sencha 2 proporciona un sencillo mecanismo para solo desarrollar tu aplicación una vez y configurarlo para cada dispositivo que desees.
Esto se consigue mediante los perfiles, que normalmente divide tu aplicación en dos modos: teléfono y tablet. Veamos un ejemplo:
Ext.application({
name: 'FB',
profiles: ['Phone', 'Tablet'],
controllers: []
});
Ext.define('FB.profile.Tablet', {
config: {
controllers: ['Feed'],
views: ['DetailedFeed', 'Timeline']
},
isActive: function() {
return Ext.os.is.Tablet;
}
});
Ext.define('FB.profile.Phone', {
config: {
controllers: ['Feed'],
views: ['SimpleFeed', 'Timeline']
},
isActive: function() {
return Ext.os.is.Phone;
}
});
Hemos definido dos perfiles, uno para teléfonos y otro para tabletas. Cuando la aplicación se carga, buscará que perfil activar y usará los modelos, vistar y controladores correspondientes.
Podéis profundizar mas en esta característica en la guía de perfiles.
Nuevos componentes: Component Data View y Navigation View
Para terminar, ahora permiten añadir componentes en las vistas de datos. Se pueden añadir botones u otros componentes a cada uno de los elementos de la vista de datos. Podéis ver una demo en el vídeo adjunto.
Mas información: Sencha Touch 2 Beta—Raising The Bar Descarga: Sencha Touch 2-b1
