Novedades en ExtJS 5 (Public Beta)

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (17 votos, promedio: 4,70 de 5)
Cargando…

Estamos muy contentos de que la versión beta de Ext JS 5 ya este disponible al público. Ext JS 5 introduce muchas nuevas y emocionantes mejoras al Framework Sencha. Estos cambios se concentran en nuevas funcionalidades, usabilidad y estilo. Mientras se agregaban todas esas nuevas funcionalidades que esta a punto de ver, se intento minimizar los cambios que pudieran dificultar el actualizarse a Ext JS 5. Cuando se introdujo algun cambio que rompe con los esquemas anteriores, siempre que fue posible se agregaron mensajes de diagnostico, para explicar que cambio y que es lo que debería hacer para actualizar en su aplicación. Para ver detalles de estos cambios, puede consultar el artículo Ext JS 5 – Upgrade Guide.

Visite los ejemplos de la Página de ejemplos de Ext JS 5 y la Página de Documentación de Ext JS 5 para tener una visión mas a fondo.

Ahora, veamos algunas de las novedades!

Soporte para Tablet y nuevos Temas visuales

Una de las adiciones más emocionantes en el conjunto de características de Ext JS 5 es el soporte para dispositivos con pantalla táctil, incluyendo tabletas y laptops touch-screen. Esta característica le permitirá lograr que sus aplicaciones Ext JS funcionen en los dispositivos touch-screen realizando modificaciones mínimas. Usted puede pasar menos tiempo pensando en los problemas de compatibilidad y dedicarlo a implementar mas y mejores funcionalidades para su aplicación.

Ext JS 5 recibe con satisfacción la incorporación de dos nuevos temas: Neptune Touch and Crisp.

El tema de Neptuno Touch tiene el aspecto moderno y minimalista y el mismo look and feel de Neptuno tradicional, pero se lo adapto para su uso en contextos principalmente táctil. Esto se consigue aumentando el tamaño de algunos elementos para hacer tapping en ellos, logrando hacer el uso táctil del tema más fácil.

El tema Crisp toma Neptuno Touch y modifica los colores por defecto, los iconos, etc, a la vez que mantiene las mismas dimensiones para un “toque” comodo. Tanto Crisp y Neptuno Touch son un excelente punto de partida para crear sus propios temas personalizados. Cuando tenga que construir sus propios temas personalizados, podra modificar fácilmente el tamaño y espaciado, colores, fuentes, iconos, bordes, etc.

Las nuevas arquitecturas de aplicaciones – Bienvenido MVVM

Ext JS 4 introdujo la compatibilidad con el patrón de arquitectura MVC. Con Ext JS 5, estamos agregando soporte para una alternativa popular a MVC: MVVM (que significa Model-View-ViewModel). Una de las grandes atracciones a MVVM es el enlace de datos. Con el enlace de datos, usted ya no tiene que escribir todo el código “pegamento” para conectar la capa de modelo a la vista y actualizar el modelo cuando se modifica la vista.

Data Binding

Los componentes tienen una nueva configuración “bind” que les permite conectar cualquiera de sus otras configuraciones (siempre y cuando tengan un método setter) con los datos de Ext.app.ViewModel (ver abajo).
Usando bind, usted puede estar seguro de que siempre se llamara al metodo setter de la configuración del componente cada que cambie el valor enlazado. No hay mas necesidad de realizar controladores de eventos personalizados.

La configuración bind también permite un enlace de datos de dos vías, que se traduce en una sincronización e vivo de los datos entre la vista y el modelo. Cualquier cambio realizado en los datos de la vista se retroalimenta automáticamente, actualizando automáticamente los otros componentes que se pueden estar vinculados a esos mismos datos.

View Controllers

En Ext JS 4, los controladores proveian de una solución global que le permite aplicar la lógica a un nivel de aplicación. Ext JS 5 le ofrece un controlador específico para vistas que puede asociarse directamente con una instancia de vista. Desde la creación una instancia hasta su destrucción, la vista estará vinculada a un componente Ext.app.ViewController que la referenciara. Una segunda instancia de la misma clase de vista podra tener su propia instancia ViewController, separada de la primera.

Mientras que los controladores globales creados con la arquitectura MVC Ext JS 4 operan como de costumbre, la creación de ViewControllers es a menudo una mejor opción. En particular, simplifican la vinculación de eventos y referencias de componentes, por lo podra preocuparse menos por los detalles como la administración del estado y la prevención de pérdidas de memoria y podra centrarse mas en su aplicación.

References and Listeners

Una de las mayores ventajas de un ViewController es su capacidad para ayudar a las grandes aplicaciones a conectar los componentes y sus eventos, incluso cuando esos componentes pueden estar separados por varias capas de contenedores. Por ejemplo, una vista puede tener muchos elementos anidados en varios contenedores, así:

1
2
3
4
5
6
7
8
9
10
11
12
13
...
items: [{
    xtype: 'textfield',
    reference: 'someField' // this is new
}],
...
items: [{
    xtype: 'button',
    text: 'Delete,
    listeners: {
        click: 'onClickDelete' // also new (no "scope" here)
    }
}]

Con un ViewController, controlar el evento click cuando se accede al campo de texto no podría ser más sencillo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Ext.define('App.view.foo.FooController', {
    extend: 'Ext.app.ViewController',
 
    onClickDelete: function (deleteButton) {
        var someField = this.getReference('someField');
 
        Ext.Msg.confirm('Confirm Delete',
            'Are you sure you want to delete ' + someField.getValue(),
            'onConfirm', this);
    },
 
    onConfirm: function (choice) {
        // process 'yes' or 'no' answer
    }
});

En comparación con el estilo de consultas de componentes de los listeners y los refs de Ext JS 4, el estilo de la nueva Ext.app.ViewController hace que las conexiones sean más evidentes.
También los hace más seguros debido a que estos vínculos se encapsulan en el ViewController. Es decir, al anidar una vista dentro de otra vista, los listeners y referencias en las dos vistas están aislados unos de otros y sólo se conectan a sus respectivos ViewControllers.

ViewModels

Ext.app.ViewModel es una clase que maneja un objeto de datos y permite a los interesados ​​en sus datos para vincularse a él y ser notificado cada vez que estos cambian. El modelo de la vista, como con el caso de los ViewController, es propiedad de la vista de que hace referencia a el. Debido a que los ViewModels se asocian con una vista, también son capaces de vincularse a un ViewModel padre parte de un componente superior en la jerarquía de componentes. Esto permite a las vistas hijas heredar los datos de su ViewModel padre.

Al ser una clase, ViewModel suele extenderse. Debido a que la función primordial de la ViewModel es proporcionar datos para su vista, hay dos características que se proporcionan en una ViewModel derivada que puede simplificar esta tarea: las “fórmulas” y “tiendas”. Las clases derivadas también pueden añadir otros métodos útiles para encapsular las operaciones en sus datos, pero las fórmulas y las tiendas son exclusivos de ViewModels.

Formulas

Además de contar con datos y proporcionar la vinculación, Ext.app.ViewModel también ofrecen una manera conveniente para calcular los datos desde otros datos llamada “fórmulas”. Ext.app.ViewModel-cfg-formulas permiten encapsular dependencias de datos en el modelo de vista y mantener sus vistas libres para enfocarse en declarar su estructura. Esto es similar a cómo funciona la configuración de conversión para los campos de un modelo de datos tradicional.

Stores

Un ViewModel puede también definir los stores que luego se presentaran a su vista como un objeto con nombre al que pueden vincularse. Al igual que con las fórmulas, esto permite vistas a mantenerse libres para declarar su estructura sin llenarse de definiciones de stores complejos y al mismo tiempo asegurarse de que tienen sus propias instancias del store.

Ejemplo

Una vista puede tener esto:

1
2
3
4
5
xtype: 'grid',
bind: {
    title: 'Summary for {fullName}',
    store: '{summary}'
}

Un ViewModel sencillo detrás de esta vista podría tener este aspecto:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
Ext.define('App.view.summary.SummaryModel', {
    extend: 'Ext.app.ViewModel',
 
    formulas: {
        fullName: function (data) {
            return data.firstName + ' ' + data.lastName;
        }
    },
 
    stores: {
        summary: {
            source: 'allSummaries', // chains to a global store
            filters: [{
                property: 'fullName',
                value: '{fullName}'
            }]
        }
    }
});

El ejemplo anterior también muestra cómo los stores pueden estar “encadenados” a otros stores y aplicar sus propios filtros (también ordenamientos). Siga leyendo para conocer más detalles sobre stores en cadena, como usted puede ver que hay más en todo esto. Esto es debido a que el ViewModel va un paso más alla y procesa las configuraciones del store como vinculos lo cual significa que tambien reaccionan a valores dinámicos como el filtro anterior.

Repasemos lo aprendido

Con Ext JS 5, se puede mejorar una arquitectura MVC existente utilizando ViewControllers para simplificar la conexión con sus vistas.

También puede utilizar ViewModels para automatizar la conexión entre sus vistas y sus datos, así como proporcionar los métodos para manipular los datos (a veces llamados “comandos” en MVVM).

Finalmente, debido a Ext JS 5 soporta ambos paradigmas, puede utilizarlos juntos.

Esto puede ser muy útil para mantener una clara separación de las responsabilidades, especialmente en los casos donde los eventos desencadenan la creación de nuevas vistas, que se produzcan acciones de enrutamiento u otra actividad que haga, ya sea que la vista o el ViewModel se ocupen de cosas que preferirían ignorar.

Routing

También se ha implementado enrutamiento para Ext JS 5, lo que le permite implementar “deep linking” dentro de la aplicación. Esto se logra mediante la traducción de la dirección URL de la aplicación en las acciones y los métodos de controlador.

Para aquellos no familiarizados con el enrutamiento en Sencha Touch, el mismo permite enlazar a un estado particular de su aplicación. Las aplicaciones de Ext JS, sin embargo, pueden ser más complejas, por lo que el router Ext JS soporta múltiples rutas en un solo URI. El manejo de cada ruta esta aislado de las demás, lo que permite el control de aplicaciones mucho más flexible.

Ejecución de rutas se puede controlar mediante una función de “before”. Esta función se activará antes de que el enrutamiento se realiza efectivamente, por lo que una validación apropiada puede ocurrir antes de una acción. Esto le permite detener la ruta actual, otras rutas en cola, o continuar la ejecución de ruta después de realizar alguna acción, como una petición Ajax.

Para obtener más información acerca de enrutamiento, por favor consulte nuestra Guía de enrutamiento.

Nota: Estos son los principales cambios arquitectonicos, pero hay muchos mas que seran detallados en proximos artículos.

Fuentes: Documentación oficial de Sencha Inc., Versión en español por Mario Pérez.

This entry was posted in Blog and tagged . Bookmark the permalink.

2 Responses to "Novedades en ExtJS 5 (Public Beta)"