Dr. Jos Martn Molina Espinosa

jQUery Mobile

jQuery Mobile

http://jquerymobile.com/

Cmo crear aplicaciones con el look-and-feel de Android a travs del uso de estilos CSS y de javascript?

Actualmente encontramos:

jQTouch, iUI, y Sencha Touch

Libreras Javascript

Jquery es una librera de funciones para Javascript que permite la manipulacin del DOM con funciones orientadas a la programacin.

Jquery tambin no slo incluye funcionalidad sino tambin widgets grficos.

Jquery Mobile, es la librera exclusiva para navegadores mviles.

Interfaz grfica

Emular el look & feel

Usar el marco

Colocar botones de accin en el marco

Crear menus deslizantes

Incluir botones de regreso

Separar las ligas

Usar el viewport

Apagar la capacidad de zoom

Elementos de diseo para dispositivos mviles

Siempre en Internet

Uso de AJAX para acceso de datos sin bloque de aplicacin

Bajo consumo

Limitado al navegador mvil

Geo-Localizacin

Posibilidad de acceso a la localizacin del dispositivo mvil desde web!!!

Entrada / salida

Uso de gestos

Obtencin de la librera jQueryMobile

Pgina web: http://jquerymobile.com

Instalacin:

Uso de los archivos contenidos en directorio de distribucin

jquery.mobile-version.css

jquery.mobile-version.js

Desarrollando con jQuery

Plataformas soportadas

http://jquerymobile.com/original-graded-browser-matrix/

Plataformas de desarrollo

PhoneGap. SDK que puede integrarse a IDEs como eclipse para el desarrollo de aplicaciones hbridas. Costo, gratuito.

Codiqa. Desarrollo de aplicaciones web a travs del navegador. Costo $19-$149 USD al mes. No permite la programacin en Javascript, pero genera HTML.

Handheld designer. Aplicacin Mac para desarrollo exclusivo para iOS, costo $600 MXP

Sencha Architect 2. Aplicacin win/Mac para desarrollo visual de aplicaciones web, costo $399-$7195 USD al ao.

Formato de una pgina

Page Title

Formato de una pgina

Page Title

Page content goes here.

Page Footer

Pginas dentro de pginas

Paso de parmetros para cambio de pgina

El paso de parmetros para cambio de pgina es mediante el uso de # en el URL de la pgina, lo que cambio el significado de uso del mismo.

As pagina.html#otraPagina significa cambiar la vista actual a otraPagina en lugar de hacer scroll de la pgina hasta el identificador otraPagina

HTML 5 etiqueta data-

En HTML 5 es posible definir datos definidos por el usuario mediante el uso de la etiqueta data-

var fruta = document.getElementById('fresa');

var contador = fruta.getAttribute('data-cuantas'); // contador = '15'

fruta.setAttribute('data-cuantas','7');

Uso de etiqueta data-

var planta = document.getElementById('rosa');

var npetalos = planta.dataset.petalos; // npetalos = 20;

var estatura = planta.dataset.altura;

planta.dataset.altura = '1.6m';

Manejo de ttulos de pginas

Cada pgina en html puede contener un ttulo que aparece en la parte superior del navegador

Cmo cambiar el ttulo de una pgina html que contiene varias pginas mediante el uso de la etiqueta data-?

Jquerymobile carga las pginas mediante el uso de AJAX usando las etiquetas data-

El atributo data-title permite cambiar el ttulo de cada pgina que es presentada como pgina principal del navegador.

Ligado de pginas

El ligado de pginas se realiza mediante AJAX.

El atributo href es parseado y usado para hacer la carga asincrnica de la pgina mediante la modificacin del DOM actual.

En caso de que la carga AJAX tenga problemas, se desplegar un error.

El uso de AJAX permite tener una animacin de transicin entre pginas.

Ligado de pginas sin AJAX

Si se desea cargar un documento html multi-pgina, se debe de desactivar el atributo AJAX mediante

rel="external" o bien data-ajax="false"

Multi-page link

La carga de pginas en este estilo NO tendrn animacin de transicin

Botn de regreso

TransicionesLa animacin que ocurre en la presentacin de un nuevo elemento, dialogo o pgina, se le llama transicin.

Lista de transiciones:

fade. Desaparece la pantalla actual y aparece del nuevo elemento.

pop. Nuevo elemento aparece desde el centro

flip. La pantalla gira 180% sobre el eje Y central.

turn. La pantalla gira 180% sobre el eje Y de la izquierda.

flow. La pantalla es minimizada y luego re-emplazada por el nuevo elemento.

slidefade. Una cortina recorre desde un extremo la pantalla y luego aparece el nuevo elemento.

slide. Una cortina recorre desde un extremo la pantalla dejando aparecer de inmediato el nuevo elemento.

slideup y slidedowm. Una cortina recorre desde el Top / Bottom de la pantalla dejando aparecer de inmediato el nuevo elemento.

none

Dialogos

Cualquier pgina puede ser presentada como un dialogo modal cuya funcionalidad es idntica a la funcin alert de Javascript.

Se utiliza el atributo data-rel="dialog"

Open dialog

Formularios

La obtencin de datos se hace a travs de formularios HTML tradicionales en donde se acomodan los elementos de interaccin con el usuario.

...

Formularios

Debido a que en un mismo archivo HTML pueden estar definas varios elementos de pginas distintas, todos los elementos deben tener identificadores distintos.

Para asociar elementos se utiliza el atributo for

Text Input:

Ejercicio guiado

Crear una calculadora de IMC usando JqueryMobile

Crear la GUI usando codiqa

http://www.codiqa.com/

Modificar el HTML generado e incluir la funcionalidad de clculo de IMC

Usando codiqa

Agregar funcin de clculo IMC

function calcular()

{

var estatura=document.getElementById("textinput1");

var peso=document.getElementById("textinput2");

var resultado=peso.value/(estatura.value*estatura.value);

document.getElementById("textinput3").value=resultado;

//alert(resultado);

}

Asociar invocacin de funcin

Componentes en jQuery

Pginas y dilogos

Barras de herramientas

Botones

Formateo de contenido

Formularios

Listas

Listas con jQuery Mobile

Acura

Audi

BMW

Laboratorio guiado

Creacin de una pgina que consume datos JSON

Crear una nueva pgina web que contenga informacin institucional o personal

Creacin del contenido

Pgina de detalle

Crear una pgina con una lista que muestre la informacin obtenida a travs de un JSON

Usar JSONP para la obtencin de datos de sitios 3ros.

Eventos

Existen un conjunto de eventos que son ejecutados en jQueryMobile

http://jquerymobile.com/demos/1.1.0/docs/api/events.html

Entrada desde la GUI

Ciclo de vida de las pginas

Carga de pginas

pagebeforeload

pageload