Frameworks Moviles

Tema 6

Parte III

Frameworks web para dispositivos mviles


1Introduccin

2

Frameworks web para mviles


Nos permiten desarrollar un sitio web con aspecto y funcionalidad tpica de mviles sin tener que escribir todo el HTML/CSS/Javascript desde cero

Elementos de interfaz adaptado a mviles (botones grandes, listas,...) Transiciones entre pantallas Compatibilidad entre plataformas

3


Tipos de frameworksDe marcado

Definimos los elementos de pantalla con etiquetas HTML convencionales, con clases CSS o atributos HTML propios del framework En la inicializacin, el framework les asigna un aspecto (CSS) y un comportamiento (Javascript) especiales

!!!

4

!!! Todos! Add!!! Do something! Do something else! Finish these damn demos!!Completed!! ! Write eblast!!!


Tipos de frameworks (II)

De cdigo

Ms parecidos al concepto tpico de librera. Cuando queremos definir por ejemplo un widget lo hacemos con cdigo Javascript

5

Ext.application({! name: 'Sencha',! launch: function() {! Ext.create("Ext.TabPanel", {! fullscreen: true,! items: [! {! title: 'Home',! iconCls: 'home',! html: 'Welcome'! }! ]! });! }!});!


Algunos frameworks

De marcado

jQT (antes jQTouch) http://jqtjs.com/ jQuery Mobile http://jquerymobile.com/ LungoJS http://lugo.tapquo.com

De cdigo

Sencha Touch http://www.sencha.com/products/touch/ Jo http://joapp.com/ DOJO mobile http://dojotoolkit.org/features/mobile

6


Aplicaciones web vs. sitios web

La mayora de frameworks mviles estn orientados al desarrollo de aplicaciones web mviles, no de sitios web

Sitio web mvil: conjunto de HTML enlazados entre s y adaptados a mviles Aplicacin web mvil: un nico HTML contiene todas las pantallas (o pginas) de la aplicacin. Al igual que una app. nativa contiene todo el GUI, pero en lugar de estar desarrollado con Java u Obj-C usa JS+HTML+CSS

No obstante, tambin pueden usarse para desarrollar sitios web ms convencionales

7


2JQuery Mobile: conceptos bsicos

8


jQuery Mobile

Probablemente el framework web para mviles ms conocido y difundido

http://jquerymobile.com/ Bajo el paraguas de jQuery Multiplataforma: iOS, Android, Windows Phone, ...

Proporciona

widgets optimizados para mviles personalizacin del estilo visual (temas)

9


Usar jQuery Mobile

Incluir en el proyecto

El .js de jQuery El .js, CSS e iconos de jQuery Mobile

La mayora de widgets se obtienen poniendo atributos especiales (data-*) a etiquetas HTML convencionales

10

!! Cancel!! Edit Contact!! Save!


Estructura bsica de una pgina

En un solo archivo HTML hay varias pginas (pantallas) de mvil

De este modo, se reduce el nmero de peticiones al servidor mientras navegamos por la aplicacin Cada pantalla ser una etiqueta con data-role=page Habitualmente se usa , pero se puede usar cualquier etiqueta

Cada pantalla suele tener cabecera, contenido y pie

11


El hola mundo de jQuery Mobile12

!!! !! Hola mundo!! !! !! ! !

!

!!!! !! ! Cabecera!! !! !! ! Esto es el contenido de la pgina!! !! !! ! Pie!! !!!!


Funcionamiento interno

Entre otras cosas, cuando se carga el HTML

Se disparan eventos a los que si nos interesa podemos asociar listeners (pageinit, pagebeforeshow,...) Se asocian clases CSS a los elementos con un data-role especial Se asocian manejadores de evento javascript a los widgets Se posicionan las cabeceras y pies

13


3Navegacin entre pginas

14


Navegacin entre pginas15

!! !! ! Cabecera!! !! !! Esto es el contenido de la pgina! Ir a la ! !

secundaria!! !! !! !! ! Pie!! !!! ! !


Cmo se navega entre pantallas?

jQuery Mobile secuestra el evento de click sobre los enlaces

Se dispara una transicin CSS3 con la animacin de cambio de pgina

Por defecto es slideright, pero tambin hay slideleft, slideup, slidedown, flip,... Dinmicamente se cambian las clases CSS de la pgina actual para ocultarla y de la anterior para mostrarla

Disparando adems una serie de eventos: pagebeforeshow, pagebeforehide, pageshow, pagehide

Se actualiza con javascript el historial de navegacin (para que si pulsamos el back del navegador todo funcione correctamente)

16


Enlaces externos

Si el href no lleva el #, estamos enlazando a otro HTML

Por defecto no se cambia de pgina

Automticamente se hace una peticin AJAX para obtener el nuevo HTML Se examina el nuevo HTML en busca de la primera etiqueta con data-role=page Se inserta dinmicamente esta etiqueta en el DOM del HTML actual, ignorando el resto Se hace la transicin a la nueva pgina

Podemos hacer una navegacin convencional (cambiando totalmente de HTML)

Ponerle al enlace un rel="external" o un data-ajax="false"

17


Dilogos

Pginas convencionales a las que se llega con un enlace con data-rel="dialog"

No se incluyen en el historial de navegacin para que si hacemos atrs no volvamos a ellas

18

Abrir dilogo


4Elementos de interfaz de usuario

19


Formularios

Por defecto los action usan AJAX

En lugar de saltar a la pgina devuelta por el servidor, esta se inserta dinmicamente en el HTML actual Por tanto, el servidor no debe devolver un HTML completo, sino solo una pgina de jQuery Mobile

Para usar el comportamiento habitual (no AJAX), poner el atributo data-ajax=false en el

20


Campos de formulario

Se usan etiquetas HTML convencionales

jQuery Mobile les da look de mvil y en algunos casos, funcionalidad tctil adicional

21

! Usuario:! ! Guardar datos:!! !! ! No!! ! S!! !


Listas

En mviles es muy tpico tener listas que ocupan toda la pantalla

Lista de tareas, contactos, eventos cercanos ... En jQuery Mobile, con data-role=listview

Tambin es muy tpico que al pulsar en un elemento de la lista vayamos a otra pantalla para ver los detalles

En jQuery Mobile, se pone simplemente un enlace dentro de cada a la pgina adecuada

22


Listas (II)

La variedad y sofisticacin de las listas en jQuery Mobile es considerable. Algunas posibilidades:

Thumbnails ( dentro de cada , jQuery automticamente ajustar el tamao) Separadores (etiquetas con data-role=list-divider) Badges (tpica burbuja que indica cuntos elementos hay): class=ui-li-count Filtrar automticamente elementos: lista con data-filter="true"

23


5Eventos

24


Eventos importantes

Usar el $(document).ready para inicializar aspectos globales de la aplicacin

Usar el evento pageinit de cada pgina para inicializar lo propio de ella

Por ejemplo vincular un listener a un botn

Usar el pagebeforeshow para inicializar lo que puede cambiar cada vez que se muestra

Por ejemplo, si es una lista generada dinmicamente, insertar los

25


Ejemplo26

//Esto se ejecuta una sola vez para el documento entero!$(document).ready(function() {! //personalizar el texto del botn para ir a la pgina anterior! $.mobile.toolbar.prototype.options.backBtnText = "Atrs"!})!!//Esto se ejecuta una sola vez para cada pgina, una vez inicializada!//por jQuery (aadidas las clases CSS, ...)!$('#pagBusqueda').on('pageinit', function() {! $('#botonBuscar').click(buscar) !})!!//Aqu rellenaramos la pgina detalles con los datos pertinentes,!//justo antes de mostrarla!$('#pagDetalles').on('pagebeforeshow', function() {! ...!})


Referencias

Aqu hemos visto solo unos cuantos conceptos, porque la cantidad de atributos data-* es considerable

La documentacin de jQuery Mobile no es tan exhaustiva como la de jQuery, pero tiene muchas demos integradas

http://demos.jquerymobile.com/1.4.2/

27


Referencias: libros

http://proquestcombo.safaribooksonline.com/ (solo desde la UA)

!jQuery Mobile Up and Running,OReilly 2012 !!jQuery Mobile Web Development Essentials 2nd ed., Raymond Camden; Andy Matthews. Packt Publishing, 2013

28

Frameworks Moviles

Documents

Transcript of Frameworks Moviles