PDF de programación - Sencha Touch 2.x

Tabla de contenido

Contenidos
Introducción
Instalación
Nuestra primera aplicación

Código HTML básico de una aplicación
Compilar un proyecto
Aviso durante la carga
Instanciar una aplicación
Comprobar los resultados
Fichero único vs. MVC

Uso de Componentes y Contenedores

Instanciar componentes
Configuración de componentes
Identificadores y referencias
Array de items y el atributo xtype
Añadir componentes a contenedores
Eliminar componentes de un contenedor
Mostrar y ocultar componentes
Eventos
Destruir componentes

Layouts

Layout tipo hbox
Layout tipo vbox
Layout tipo card
Layout tipo fit
Docking o acoplamiento
Pack y align

Transiciones de cambio de vista
Componentes
Toolbars

1.1
1.2
1.3
1.4
1.4.1
1.4.2
1.4.3
1.4.4
1.4.5
1.4.6
1.5
1.5.1
1.5.2
1.5.3
1.5.4
1.5.5
1.5.6
1.5.7
1.5.8
1.5.9
1.6
1.6.1
1.6.2
1.6.3
1.6.4
1.6.5
1.6.6
1.7
1.8
1.8.1

2

Botones
TabPanel
Carousel
Diálogos
Formularios
Almacenamiento
Data Model
Data Store
Proxy

Componentes asociados a datos

Plantillas
DataViews
Listados
Formularios
Más información
Ejercicios 1
Ejercicios 2
Ejercicios 3

1.8.2
1.8.3
1.8.4
1.8.5
1.8.6
1.9
1.9.1
1.9.2
1.9.3
1.10
1.10.1
1.10.2
1.10.3
1.10.4
1.11
1.12
1.13
1.14

3

Contenidos

Contenidos

Existen muchas librerías o frameworks de desarrollo que están orientados a la creación de
webs para móviles y que intentan darle el aspecto de una aplicación nativa. Una de las más
conocidas y utilizadas en la actualidad es Sencha Touch. Este tipo de librerías son de gran
ayuda ya que nos ahorran muchísimo tiempo en la programación ya que con un único
desarrollo Web lo podemos aprovechar de forma generalizada para los diferentes sistemas
de dispositivo móvil, como Android, iOS, etc.).

En este libro se tratan desde los aspectos más básicos de Sencha Touch, como la
instalación de la libreria y la creación de una primera aplicación, hasta otros más avanzados
como el almacenamiento de datos y el uso de componentes asociados a datos.

Los contenidos principales del libro son:

Introducción
Instalación
Nuestra primera aplicación

Código HTML básico de una aplicación
Compilar un proyecto
Aviso durante la carga
Instanciar una aplicación
Comprobar los resultados
Fichero único vs. MVC

Uso de Componentes y Contenedores

Instanciar componentes
Configuración de componentes
Identificadores y referencias
Array de items y el atributo xtype
Añadir componentes a contenedores
Eliminar componentes de un contenedor
Mostrar u ocultar componentes
Eventos
Destruir componentes

Layouts

Layout tipo hbox
Layout tipo vbox
Layout tipo card
Layout tipo fit

4

Contenidos

Docking o acoplamiento
Pack y align

Transiciones de cambio de vista
Transiciones con animación

Componentes
Toolbars
Botones
TabPanel
Carousel
Diálogos
Formularios
Almacenamiento
Data Model
Data Store
Proxy

Componentes asociados a datos

Plantillas
DataViews
Listados
Formularios
Más información
Ejercicios

5

Introducción

Introducción

Sencha Touch es un framework para el desarrollo de aplicaciones móviles centrado en
WebKit (base de los navegadores web Safari, Google Chrome, Epiphany, Maxthon, y Midori
entre otros). Fue el primer framework basado en HTML5 y JavaScript, además utiliza CSS3
para realizar animaciones. La apariencia de las aplicaciones desarrolladas es similar al de
las aplicaciones nativas en Android, BlackBerry e iOS. Sencha Touch está disponible tanto
en versión con licencia comercial como con licencia Open Source GPL v3.

Una de las principales ventajas de Sencha Touch es la cantidad de controles IU o
elementos de interfaz que incluye, todos ellos muy fáciles de usar y personalizar. Ha sido
diseñado específicamente para dispositivos táctiles por lo que incluye una amplia gama de
eventos táctiles o gestures, que comúnmente son usados en este tipo de dispositivos.
Además de los eventos estándares como touchstart o touchend, han añadido una extensa
lista de eventos como tap, double tap, tap and hold, swipe, rotate o drag and drop.

Interoperabilidad con PhoneGap

Sencha Touch funciona perfectamente junto a PhoneGap (ver capítulo correspondiente), por
lo que puede ser usado para distribuir nuestras aplicaciones en la App Store o en Android
Market. Se basa en el uso de un mecanismo que empotra nuestra aplicación en una shell

6

Introducción

nativa de la forma más sencilla posible. Además, gracias a PhoneGap podemos hacer uso
de la API nativa del dispositivo para acceder a la lista de contactos, la cámara y muchas
otras opciones directamente desde JavaScript.

Integración de datos

Al igual que con ExtJS (biblioteca de JavaScript para el desarrollo de aplicaciones web
interactivas), Sencha Touch implementa el patrón de diseño MVC en el lado del cliente y
nos ofrece una API rica y poderosa para manejar flujos de datos desde una increíble
variedad de fuentes. Podemos leer datos directamente a través de AJAX, JSON, YQL o la
nueva capacidad local storage de HTML5. Podemos enlazar esos datos a elementos
específicos de nuestras vistas, y utilizar los datos sin conexión gracias a los almacenes
locales.

Sencha Touch vs. JQuery Mobile
A continuación se enumeran las principales diferencias entre Sencha Touch y JQuery
Mobile:

Sencha Touch:

Tiene una curva de aprendizaje mucho mayor y necesita una mayor comprensión del
lenguaje de programación JavaScript, pero gracias a esto proporciona una API mucho
más potente.

Dispone de un mayor número de controles para la interfaz de usuario, así como efectos
de transición y animaciones entre páginas mucho más personalizables.

Más rápido en mayor número de dispositivos móviles (en Android a partir de la versión
2.1). El comportamiento y velocidad de Sencha Touch es mucho mejor que el de otros
frameworks, a excepción del tiempo de carga inicial, pues JQuery Mobile pesa menos.

Al estar basado en ExtJS (usan el mismo núcleo), es muy robusto y potente, además
de ser un framework ampliamente probado y usado (también debido a que fue uno de
los primeros en aparecer).

Al igual que en ExtJS, y en comparación con JQuery Mobile, se escribe mucho código.
Esto podría ser tomado como un pro o como un contra. Es bueno porque indica una
mayor potencia de configuración y personalización, pero por contra conlleva más
tiempo de desarrollo y de aprendizaje.

JQuery Mobile:

Muy sencillo de aprender y de implementar aplicaciones.

7

Introducción

Es necesario escribir muy poco código (y casi no se usa JavaScript) para lograr
aplicaciones móviles muy interesantes. En lugar de orientarse a la programación
JavaScript, JQuery Mobile se centra en usar etiquetas HTML con atributos definidos
por el framework.

No dispone de muchos controles para el diseño de la interfaz.

Tiene una ejecución algo más lenta que Sencha Touch.

Al estar basado en un framework muy desarrollado, como es JQuery, funciona
correctamente en un mayor número de dispositivos móviles y de navegadores, como
Symbian, Android, iOS, Blackberry, Window Phone 7 o WebOS.

Ambos frameworks son buenas opciones para el desarrollo de aplicaciones móviles. Los
dos utilizan HTML5, JavaScript e integran la tecnología AJAX. La decisión dependerá de las
necesidades de la aplicación a desarrollar. En principio, Sencha Touch es más apropiado
para aplicaciones grandes, que necesiten de mayor personalización o configuración y que
vayan a hacer un mayor uso del lenguaje de programación JavaScript. JQuery Mobile se
suele utilizar para aplicaciones en las que se necesite una interfaz de usuario que conecte
directamente con un servidor y que haga un menor uso de JavaScript.

8

Instalación

Instalar Sencha Touch

En primer lugar descargamos el SDK de Sencha Touch desde su página Web
"http://www.sencha.com/products/touch/download/". Se nos descargará un fichero
comprimido con ZIP (llamado algo como "sencha-touch-VERSION.zip"), que
descomprimiremos en una carpeta.

A continuación tenemos que instalar el Cmd de Sencha, el cual descargamos desde
http://www.sencha.com/products/sencha-cmd/download/, lo descomprimimos e instalamos
mediante el wizard que incorpora. Una vez instalado ya tendremos disponible desde la
consola el ejecutable sencha para crear aplicaciones y gestionarlas.

Nota: si el comando sencha fallara por cuestiones de permisos en Linux tendremos
que reinstalar como un usuario normal en vez de como root.

9

Nuestra primera aplicación

Crear nuestra primera aplicación

Una vez instalado Sencha Touch y Sencha Cmd ya podemos crear nuestra primera
aplicación. Para ello crearemos una nueva carpeta para la aplicación y entraremos en ella:

mkdir myapp
cd myapp

Y a continuación ejecutaremos el comando:

sencha -sdk /path/to/touch generate app MyApp .

Esto generará el esqueleto de una nueva aplicación de Sencha Touch en el directorio
actual, con todas los ficheros que vamos a necesitar incluyendo un documento index.html
inicial, una copia del SDK de Sencha Touch, las hojas de estilo, imágenes y ficheros de
configuración.

Una vez creada la aplicación podemos comprobar que funcione correctamente de varias
formas:

Abriendo directamente el fichero index.html , la mayoría de aplicaciones básicas las
podremos probar de esta forma.
Copiando nuestro proyecto a un servidor web y accediendo al proyecto a través de la
dirección: http://localhost/MyApp
Usando el servidor Web que proporciona el Cmd de Sencha. Para activarlo tenemos
que ir a la carpeta de nuestra aplicación y en un terminal ejecutar sencha web start & .
Para acceder en este caso tendremos que usar la ruta: http://localhost:1841/

10

Nuestra primera aplicación

Sencha Touch solo funciona con navegadores basados en WebKit, como son: Safari,
Google Chrome, Epiphany, Maxthon o Midori. Si lo probamos en un navegador que no lo
soporte, como Firefox o Internet Explorer, solamente veremos una página en blanco o un
resultado erróneo. Por lo tanto para probar nuestros proyectos Web tendremos que instalar
uno de los navegadores soportados, como Google Chrome (http://www.google.es/chrome) o
Apple Safari (http://www.apple.com/es/safari/