JQUery Mobile Dr. José Martín Molina Espinosa

jQUery Mobile

Dr. Jo sé M artín Mol in a Es pi no sa

jQuery Mobile

http://jquerymobile.com/

¿Cómo crear aplicaciones con el look-and-feel de
Android a través del uso de estilos CSS y de
javascript?

Actualmente encontramos:

 jQTouch, iUI, y Sencha Touch

Librerías Javascript

Jquery es una librería de funciones para
Javascript que permite la manipulación del DOM
con funciones orientadas a la programación.

Jquery también no sólo incluye funcionalidad
sino también widgets gráficos.

Jquery Mobile, es la librería exclusiva para
navegadores móviles.

Interfaz gráfica
Emular el look & feel

Usar el marco

Colocar botones de acción en
el marco
Crear menus deslizantes

Incluir botones de regreso

Separar las ligas
Usar el viewport

Apagar la capacidad de zoom

Elementos de diseño para
    dispositivos móviles
Siempre en Internet

  Uso de AJAX para acceso de datos sin bloque de aplicación

Bajo consumo
  Limitado al navegador móvil

Geo-Localización

  Posibilidad de acceso a la localización del dispositivo móvil
  desde web!!!
Entrada / salida

  Uso de gestos

Obtención de la librería
       jQueryMobile
Página web: http://jquerymobile.com

Instalación:

 Uso de los archivos contenidos en directorio de
 distribución

   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 híbridas. Costo,
gratuito.

Codiqa. Desarrollo de aplicaciones web a través del
navegador. Costo $19-$149 USD al mes. No permite la
programación en Javascript, pero genera HTML.

Handheld designer. Aplicación Mac para desarrollo
exclusivo para iOS, costo $600 MXP

Sencha Architect 2. Aplicación win/Mac para desarrollo
visual de aplicaciones web, costo $399-$7195 USD al año.

Formato de una página

         Page Title

Formato de una página

  Page Title

  Page content goes here.

  Page Footer

Páginas dentro de páginas

Paso de parámetros para
     cambio de página

El paso de parámetros para cambio de página es
mediante el uso de # en el URL de la página, 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 página 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 títulos de páginas
Cada página en html puede contener un título que aparece
en la parte superior del navegador
¿Cómo cambiar el título de una página html que contiene
varias páginas mediante el uso de la etiqueta data-?
Jquerymobile carga las páginas mediante el uso de AJAX
usando las etiquetas data-
El atributo data-title permite cambiar el título de cada
página que es presentada como página principal del
navegador.

Ligado de páginas
El ligado de páginas se realiza mediante AJAX.

El atributo href es parseado y usado para hacer la
carga asincrónica de la página mediante la
modificación del DOM actual.

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

El uso de AJAX permite tener una animación de
transición entre páginas.

Ligado de páginas sin AJAX
Si se desea cargar un documento html multi-
página, se debe de desactivar el atributo AJAX
mediante

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

Multi-
page link

La carga de páginas en este estilo NO tendrán
animación de transición

Botón de regreso

Transiciones
La animación que ocurre en la presentación de un nuevo elemento, dialogo o página, se le llama
transición.

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 página puede ser presentada como un
dialogo modal cuya funcionalidad es idéntica a la
función alert de Javascript.

Se utiliza el atributo data-rel="dialog"

Open
dialog

Formularios

La obtención de datos se hace a través de
formularios HTML tradicionales en donde se
acomodan los elementos de interacción con el
usuario.

 ...

Formularios
Debido a que en un mismo archivo HTML
pueden estar definas varios elementos de páginas
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 cálculo de IMC

Usando codiqa

Agregar función de cálculo
          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 invocación de
          función

Componentes en jQuery

Páginas y diálogos

Barras de herramientas

Botones

Formateo de contenido

Formularios

Listas

Listas con jQuery Mobile

   Acura

   Audi

   BMW

Laboratorio guiado

Creación de una página que consume datos
JSON

Crear una nueva página web que contenga
información institucional o personal

Creación del contenido

Página de detalle

Crear una página con una lista que muestre la
información obtenida a través de un JSON

Usar JSONP para la obtención 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 páginas

  Carga de páginas

    pagebeforeload
    pageload