Ext JS - Sencha Touch

2 comentarios

En este post hablaré sobre Sencha Touch, aun tengo pendiente postear sobre otros componentes de ExtJS como Form, Tabs, etc. He dejado un poco abandonado mi blog, así que era momento de este post.

Hace un par de años se creó una nueva organización llamada Sencha, dejando de lado el nombre “Ext JS” con el propósito de impulsar no solo extjs sino además otros productos como Sencha Touch, Ext GWT, Ext Designer, Sencha Animator y Ext Core.

Sencha Touch es un framework javascript construido para desarrollar aplicaciones web móviles, está totalmente basado en HTML5, CSS3 y Javascript. En teoría cualquier smarthphone que tenga instalado un navegador que soporte estos estándares podría mostrar una aplicación hecha con sencha Touch, aunque solo certifican su uso sobre iPhone, Android y BlackBerry.

Aclarando algunas cosas: 
1) Sencha Touch es un framework javascript, al igual que ExtJS, por tanto su ámbito es un browser, la diferencia es que tiene componentes más ligeros y pequeños para que se puedan visualizar en un dispositivo móvil.

2) Al ser prácticamente una aplicación web, se comporta como tal: va a existir en un servidor web el cual centraliza los fuentes, de tal manera que cualquier actualización sobre la aplicaicón se hace sobre el servidor y cada dispositivo al acceder a la página verá el cambio, a diferencia de una aplicación nativa que si requiere un proceso de actualización iniciada en el mismo dispositivo.

3) Desarrollar aplicaciones bajo este tipo de plataformas está de moda, por ejemplo Jquery Mobile sigue el mismo concepto. Ahora los smartphones son mas accesibles económicamente.

4) Si te estás preguntando: “¿Entonces estas aplicaciones solo funcionan si el servidor web está activo o si mi smarthpone tiene conexión a internet?”. Todo dependerá de cómo desarrolles tu aplicación. Puedes crear una interfaz de pedidos y todo almacenarlo en el LocalStorage del Browser y luego hacer un proceso de sincronización que cargue todos los pedidos a tu servidor central. Ahora con HTML5 hasta sentencias SQL puedes hacer. 

La instalación: 
1)
Descarga los fuentes de http://www.sencha.com/products/touch/download/

2)
Crea una carpeta llamada demo_senchatouch en su interior crea un HTML llamado index.html El cuerpo del HTML que sea algo simple como:

 
<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
</body> 
</html>
Un documento en html 5 se reconoce por el al iniciar.
Más info sobre HTML5:
http://es.wikipedia.org/wiki/HTML5 http://www.manning.com/crowther/ http://www.manning.com/crowther2/

3)
Dentro de la carpeta demo_senchatouch crea otra llamada touch, y dentro de esta carpeta copiarás el archivo sencha-touch-all.js y la carpeta resources que se encuentran en los fuentes descargados de Sencha Touch. La instalación es muy similar a la de Ext JS

4)
Dentro del elemento head añade las siguientes líneas:
 

Estos dos archivos son los necesarios para poder empezar.


5)
Dentro del head creamos el elemento y colocamos lo siguiente:
Ext.application({
    name: 'Sencha',

    launch: function() {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hola Mundo'
        });
    }
});
launch es como el Ext.onReady(…) se ejecuta una vez que el html ha sido cargado completamente.

Ejecuta el index.html, puedes ejecutarlo con google chrome que soporta HTML5, o descargarte algún emulador o entra a estos en la web:
http://www.testiphone.com/
http://tmobile.modeaondemand.com/htc/g1

El resultado:
6)
Formulario con Sencha Touch. Para hacer un formulario formulario no hace falta más que remplazar tu Hola Mundo por Un FormPanel. En Sencha Touch la creación de componentes es igual que en Ext JS, y en su mayoría los nombres de los componentes coinciden. Por Ejemplo, el siguiente código crea un formulario con una sola caja de texto y un botón "Verificar":
 Ext.application({
    name: 'Sencha',
    launch: function() {
        Ext.create('Ext.form.Panel', {
            fullscreen: true,
                    title: 'Cliente',
                    iconCls: 'customer',
                    xtype: 'formpanel',
                    url: 'ClienteServlet',
                    layout: 'vbox',

                    items: [
                        {
                            xtype: 'fieldset',
                            title: 'Datos',
                            
                            items: [
                                {
                                    xtype: 'textfield',
                                    label: 'Nombre',
                                    name: 'name'
                                }

                            ]
                        },
                        {
                            xtype: 'button',
                            text: 'Verificar',
                            ui: 'confirm',
                            handler: function() {
                                this.up('formpanel').submit({
                                 success:function(form, action){
           var jsonResponse = action.result;
           Ext.Msg.alert('Info', 'La información ha sido enviada');
                                 },
                                 failure:function(form, action){
                                  
                                 }
                                });
                            }
                        }
                    ]
        });
    }
});
El resultado del código anterior:
Observen la propiedad url: 'ClienteServlet' , está apuntando a un Servlet, con esto se comprueba que acá no hay magia, el submit va al servidor web y es gestionado por un Servlet .

Si se puede colocar un Servlet entonces se puede colocar cualquier recurso del servidor: .php, .asp, .jsp, etc.

Por último si tienes una aplicación con Spring MVC, no tienes que cambiar nada en el servidor, solo consumes tus controllers ya programados. Lo que cambia es tu interfaz, tendrás una interfaz para un movil y otra para tu aplicación web que consumen un mismo controller de spring.

El api para cualquier consulta:
http://docs.sencha.com/touch/2-0/#!/api 

Nos vemos pronto.