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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

Instalar Sencha Touch

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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>

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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>

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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>

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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>

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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!'

});

}

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

name: 'MyApp',

useLoadMask: true,

launch: function()

{

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

fullscreen: true,

html: 'Hello World!'

});

}

});

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

name: 'MyApp',

useLoadMask: true,

launch: function()

{

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

fullscreen: true,

html: 'Hello World!'

});

}

});

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

name: 'MyApp',

useLoadMask: true,

launch: function()

{

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

fullscreen: true,

html: 'Hello World!'

});

}

});

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

name: 'MyApp',

useLoadMask: true,

launch: function()

{

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

fullscreen: true,

html: 'Hello World!'

});

}

});

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

name: 'MyApp',

useLoadMask: true,

launch: function()

{

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

fullscreen: true,

html: 'Hello World!'

});

}

});

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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 });

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

Comprobar los resultados

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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:

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

Todo en un único fichero<!DOCTYPE html>

<html>

<head>

<title>Hello World</title>

<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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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:

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

fullscreen: true,

layout: 'fit'

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

html: 'Panel Superior'

});

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

html: 'Panel Inferior'

});

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

fullscreen: true,

layout: 'vbox',

items: [

MyApp.views.panelSuperior,

MyApp.views.panelInferior

]

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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':

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

fullscreen: true,

layout: 'card',

items: [ 'idPanelSuperior' ]

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

// items: [ panelSuperior ]

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

dock: 'top',

title: 'Top Toolbar'

});

var bottomToolbar = new Ext.Toolbar({

id: 'bottomToolbar',

dock: 'bottom',

title: 'Bottom Toolbar'

});

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

fullscreen: true,

layout: 'fit',

html: 'Contenido central',

dockedItems: [

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

'bottomToolbar' // Usamos su identificador

]

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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' });

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

...

dockedItems: [ toolbar1, toolbar2 ]

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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' }

]

});

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

fullscreen: true,

layout: 'fit',

dockedItems: [ topToolbar ]

});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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:

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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;

}

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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' }

]

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

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.");

}

}

]});

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

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

¿Preguntas...?