programación web para móviles - ua · programación web para móviles sesión 2: introducción...

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Programación webpara móvilesSesión 2: Introducción

a Sencha Touch


© 2012-2013 Depto. Ciencia de la Computación e IAProgramación web para móviles Sencha Touch - 2

Contenidos

• Introducción

• Sencha Touch vs. JQuery Mobile

• Instalar Sencha Touch

• Estructura de carpetas

• Código HTML básico

• Instanciar una aplicación

• Comprobando los resultados

• Todo en un único fichero

• Paneles y Layouts

• Identificadores

• Toolbars

• Docked items

• Botones



Introducción

• Sencha Touch es un framework para el desarrollo de aplicaciones móviles centrado en

WebKit.

• 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.

• Dispone de multitud de controles IU, 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.



Introducción• Sencha Touch funciona perfectamente junto a PhoneGap.

• Puede ser usado para distribuir nuestras aplicaciones en la App Store o en

Android Marketplace.

• Gracias a PhoneGap podemos acceder a la lista de contactos, la cámara y

muchas otras opciones directamente desde JavaScript.

• Sencha Touch implementa el patrón de diseño MVC en el lado del cliente.

• Permite 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

JQuery Mobile:

• Muy sencillo de aprender e implementar aplicaciones.

• Es necesario escribir muy poco código.

• Al estar basado en 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.

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

• Actualmente sigue en versión beta.

• Tiene una ejecución más lenta en los dispositivos móviles.



Sencha Touch vs. JQuery Mobile

Sencha Touch:

• Curva de aprendizaje mucho mayor.

• Necesidad de una mayor comprensión del lenguaje JavaScript.

• Se escribe mucho código (mayor potencia de configuración, pero por

contra conlleva más tiempo de desarrollo).

• API mucho más potente.

• Mayor número de controles IU, transición y animaciones, mucho más

personalizables.

• El comportamiento y velocidad es mucho mejor que el de otros

frameworks, a excepción del tiempo de carga inicial.



Instalar Sencha Touch

• Descargar el SDK desde su página Web:

http://www.sencha.com/products/touch/download/

• Se nos descargará un fichero comprimido con ZIP.

• Descomprimir en una carpeta de nuestro servidor Web que

renombraremos a “touch”.

• También es posible guardar el SDK de Sencha Touch en una

carpeta diferente y posteriormente crear un enlace simbólico.

http://www.sencha.com/products/touch/download/



Instalar Sencha Touch

Para comprobar la instalación accedemos a “http://localhost/touch”:

http://localhost/touch



Navegadores

• 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.

• Para probar las aplicaciones en un emulador o en dispositivo

móvil real tendremos que usar un servidor Web.



Estructura de carpetas

Para crear un nuevo proyecto: • Crear una carpeta dentro del servidor (“hello-world”).• Crear un fichero HTML vacío llamado “index.html”. • Copiar (o enlazar) el SDK de Sencha Touch en “lib/touch”:

$ mkdir hello-world // Nuevo proyecto

$ cd hello-world

$ touch index.html

$ mkdir lib

$ ln -s /home/code/SenchaSDK ./lib/touch



Estructura de carpetas

• En la imagen se han marcado

el fichero inicial del proyecto, la

hoja de estilo y la librería

JavaScript de Sencha Touch.

• Al desplegar nuestra aplicación

final no será necesario copiar

todo el código de la librería de

Sencha Touch, sino solamente

los recursos que utilicemos.



Código HTML básico de una aplicación<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Hello World</title>

<link href="lib/touch/resources/css/sencha-touch.css" rel="stylesheet"

type="text/css" />

<script src="lib/touch/sencha-touch.js" type="text/javascript"></script>

<script src="app.js" type="text/javascript"></script>

</head>

<body>

</body>

</html>

HTML 5HTML 5




<html>

<head>




type="text/css" />



</head>

<body>

</body>

</html>

Cargamos la hoja de estilo y la librería JavaScript de Sencha Touch




<html>

<head>




type="text/css" />



</head>

<body>

</body>

</html>

Creamos el fichero “app.js”. El cual contendrá el código de nuestra aplicación.




<html>

<head>




type="text/css" />



</head>

<body>

</body>

</html>

La sección <body> del documento quedará vacía, todo el código de la aplicación irá en “app.js”.



Mostrar aviso durante la carga

• El contenido de la sección <body> se visualizará únicamente

durante la carga.

• Posteriormente será ocultado por el contenido de la aplicación.

<body>

<div style="margin:auto; font-size:16pt;">

Cargando aplicación...

</div>

</body>



Instanciar una aplicación• Vamos a hacer una aplicación que muestre el texto “Hola Mundo”.

• En “app.js” añadimos el siguiente código:

var App = new Ext.Application({

name: 'MyApp',

useLoadMask: true,

launch: function()

{

MyApp.views.viewport = new Ext.Panel({

fullscreen: true,

html: 'Hello World!'

});

}

});



Instanciar una aplicaciónvar App = new Ext.Application({

name: 'MyApp',

useLoadMask: true,

launch: function()

{


fullscreen: true,


});

}

});

Con “new Ext.Application({ ... });” creamos una nueva aplicación de Sencha Touch. Entre las llaves “{}” le pasamos la lista de opciones de configuración.




name: 'MyApp',

useLoadMask: true,

launch: function()

{


fullscreen: true,


});

}

});

Crea una variable global llamada MyApp junto con los siguientes namespaces: MyApp.views MyApp.controllers MyApp.models MyApp.stores




name: 'MyApp',

useLoadMask: true,

launch: function()

{


fullscreen: true,


});

}

});

La función “launch” solo se ejecuta una vez al cargar la aplicación.Aquí deberemos de colocar el código necesario para definir nuestra interfaz de usuario.




name: 'MyApp',

useLoadMask: true,

launch: function()

{


fullscreen: true,


});

}

});

Con “new Ext.Panel({ ....” instanciamos un panel para el contenido y se lo asignamos al “viewport” de la aplicación. El “viewport” es la vista principal, dentro de la cual iremos añadiendo el resto del contenido.




name: 'MyApp',

useLoadMask: true,

launch: function()

{


fullscreen: true,


});

}

});

Indicamos que el panel ocupará toda la pantalla.Y el código HTML que tiene que contener el panel.



Separar funciones

Si queremos podemos definir la función launch como una función independiente:

function crearViewPort() {

...

}

var App = new Ext.Application({

name: 'MyApp',

useLoadMask: true,

launch: crearViewPort });



Comprobar los resultados

Para comprobar las aplicaciones tenemos que usar un navegador compatible con WebKit, como Chrome o Safari:



Comprobar los resultados

Si nuestro código está en un servidor también podemos comprobar el resultado utilizando un emulador o un dispositivo móvil real:



Todo en un único fichero<!DOCTYPE html>

<html>

<head>


<link href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-

touch.css" rel="stylesheet" type="text/css" />

<script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"

type="text/javascript"></script>

<script type="text/javascript">

// Nuestro código JavaScript

</script>

</head>

<body></body>

</html>

Enlazamos las librerías de Sencha Touch directamente desde su SDK online



Paneles

• En Sencha Touch el contenido se distribuye en paneles.

• Los cuales actúan de contenedores de otros elementos y nos

ayudan a distribuir el contenido.

• En primer lugar deberemos definir el panel asignado para el

“viewport”, dentro del cual iremos añadiendo el resto de contenido y

paneles:


fullscreen: true,

layout: 'fit'

});



Paneles y Layouts

• Con “new Ext.Panel({ .... })” creamos una instancia para un panel.

• Dentro de este constructor se incluirán los atributos necesarios

para describir su contenido.

• “layout: 'valor'” indica el tipo de disposición de un panel.

• Con “items: [ valores ]” podemos añadir elementos al panel.

• La forma de referenciar estos elementos es:

• Espacio de nombres: “NombreAplicación.view.NombrePanel”• Nombre variable.• Identificador.



Layouts

El layout especifica el tipo de distribución del contenido:

• fit: los elementos se distribuyen consecutivamente ocupando todo el espacio disponible.

• card: los elementos se colocan de forma superpuesta, uno encima de otro. Este elemento se utiliza para colocar paneles intercambiables, solo se visualizará uno a la vez.

• vbox: los elementos se distribuyen de forma vertical.

• hbox: los elementos se distribuyen de forma horizontal.



Paneles y Layouts - EjemploMyApp.views.panelSuperior = new Ext.Panel({

html: 'Panel Superior'

});

MyApp.views.panelInferior = new Ext.Panel({

html: 'Panel Inferior'

});


fullscreen: true,

layout: 'vbox',

items: [

MyApp.views.panelSuperior,

MyApp.views.panelInferior

]

});



Items

La propiedad “items” permite añadir elementos de diferentes formas:

• Especificar un elemento o una lista de elementos utilizando su nombre:

items: [ elemento ]

items: [ elemento1, elemento2 ]

• Crear un elemento o una lista de elementos en línea:

items: {}

items: [ {...}, {...} ]

Al crear un elemento en línea, además de especificar el resto de sus propiedades, también tendremos que definir su tipo (xtype), de la forma:

items: { xtype: 'toolbar', dock: 'top' }

En todos los casos deberemos especificar un layout apropiado.



Identificadores• En todos los componentes de Sencha Touch podemos definir un identificador (id)

mediante el cual posteriormente podremos hacer referencia a ese elemento:

var panelSuperior = new Ext.Panel({

id: 'idPanelSuperior',

html: 'Panel Superior'

});

• Desde otro elemento podremos referirnos a este panel como 'panelSuperior':


fullscreen: true,

layout: 'card',

items: [ 'idPanelSuperior' ]

// También podríamos haber usado su nombre de variable:

// items: [ panelSuperior ]

});



Identificadores

• Se pueden usar con todos los elementos: botones, barras, etc.

• Es una buena práctica definirlos para todos los elementos que

vayamos a referenciar posteriormente.

• Cuando aparezca una referencia a otro elemento por su

nombre de variable, también sería posible hacerlo por su

identificador.

• En algunos casos solo será posible hacerlo por su nombre de

identificador.



Toolbars

• Usamos el constructor “new Ext.Toolbar({ ... })” para crear una barra de

herramientas.

• Usamos “dock: 'top'” o “dock: 'bottom'” para indicar que se coloque en la

parte superior o en la parte inferior.

• Con “title: 'texto'” indicamos el título de la barra.

• Para añadir barras a un panel utilizamos “dockedItems: [ ... ]”, referenciando

cada barra a través:

• Espacio de nombres (“NombreAplicación.view.NombreBarra”)

• Variable

• Identificador.



ToolbarsMyApp.views.topToolbar = new Ext.Toolbar({

dock: 'top',

title: 'Top Toolbar'

});

var bottomToolbar = new Ext.Toolbar({

id: 'bottomToolbar',

dock: 'bottom',

title: 'Bottom Toolbar'

});


fullscreen: true,

layout: 'fit',

html: 'Contenido central',

dockedItems: [

MyApp.views.topToolbar, // Usamos el espacio de nombres

'bottomToolbar' // Usamos su identificador

]

});



Docked items• dockedItems se utiliza para especificar los elementos que serán anclados a un panel.

• Las posiciones que podemos usar son: top, bottom, left, right.

• Los elementos se pueden añadir o definir en línea (usando xtype):

dockedItems: [

{

xtype: 'toolbar',

dock: 'top',

title: 'barra superior'

}, {

xtype: 'toolbar',

dock: 'bottom',

title: 'barra inferior'

}

];

Definición en Línea



Docked items

Por cuestiones de claridad será mejor crear una definición separada:

var toolbar1 = new Ext.Toolbar({

dock: 'top', title: 't1' });

var toolbar2 = new Ext.Toolbar({ dock: 'top', title: 't2' });


...

dockedItems: [ toolbar1, toolbar2 ]

});



Botones• Los botones se añaden a las barras de herramientas mediante su propiedad “items”.

• Simplemente tendremos que definir el tipo de botón (ui) y el texto a mostrar (text).

var topToolbar = new Ext.Toolbar({

dock: 'top',

title: 'mi barra',

items: [

{ ui: 'action', text: 'Nuevo' }

]

});


fullscreen: true,

layout: 'fit',

dockedItems: [ topToolbar ]

});



Botones• Podemos usar siete tipos predefinidos de botones, estos son:

ui: 'back' ui: 'action'

ui: 'forward' ui: 'confirm'

ui: 'normal' ui: 'decline'

ui: 'round'

• Si no seleccionamos un tipo (ui), por defecto nos aparecerá el botón tipo “normal”.

• Con los modificadores “-small” y “-round” sobre los tipos “action”, “confirm” y “decline” obtenemos botones más pequeños o redondeados (ex: “action-round”):

• Si queremos variar el ancho de un botón podemos utilizar la propiedad:

• “width: '200px'” en píxeles

• “width: '95%'” en porcentaje.



Botones - Iconos

var button = new Ext.Button({

iconCls: 'action', // nombre del icono

iconMask: true // Para que se visualice correctamente

});

action add arrow_down

arrow_left arrow_right arrow_up

compose delete organize

refresh reply search

settings star trash

maps locate home



Botones - Iconos• Si además usamos la propiedad “text: 'texto'” al definir el botón, el

texto aparecerá a la derecha del icono:

• También podemos aplicar colores a estos iconos, usando los tipos (ui) de 'action', 'decline' o 'confirm':

• Podemos añadir una insignia distintiva a cualquier botón usando la propiedad “badgeText: '2'”, que daría como resultado:



Botones – Imágenes externas• Si queremos usar una imagen externa tenemos que aplicar al botón un estilo CSS.

• Usaremos la propiedad “cls” para indicar el nombre del estilo:

items: [ { ui: 'normal', cls: 'btnAyuda' } ]

• El estilo lo tendremos que definir indicando la imagen junto con el ancho y el alto del botón.

• El tamaño deberá de coincidir con el tamaño aplicado al botón.

• El tamaño habitual es de 45x35 píxeles.

• Es muy importante añadir la propiedad !important al cargar la imagen de fondo.

.btnAyuda {

background: url(imgs/ayuda.png) !important;

width: 45px;

height: 35px;

}



Botones - Alineaciones• Por defecto los botones salen alineados a la izquierda. • Para crear otras alineaciones utilizaremos un espaciador “{ xtype: 'spacer' }”.

// Alineación derecha

items: [

{ xtype: 'spacer' },

{ ui: 'normal', text: 'Botón' }

]

// Alineación centrada

items: [

{ xtype: 'spacer' },

{ ui: 'normal', text: 'Botón' },

{ xtype: 'spacer' }

]



Botones - AccionesPara añadir acciones a los botones tenemos que definir su propiedad “handler”:

function botonPresionado(btn, evt) {

alert("Botón '" + btn.text + "' presionado.");

}

var topToolbar = new Ext.Toolbar({

items: [

{ ui: 'normal',

text: 'Botón 1',

handler: botonPresionado

},

{ ui: 'action',

text: 'Botón 2',

handler: function(btn, evt) { // Definición en línea

alert("Botón '" + btn.text + "' presionado.");

}

}

]});



¿Preguntas...?

programación web para móviles - ua · programación web para móviles sesión 2: introducción...

Documents