Programación web para...

Experto Universitario en Desarrollo de Aplicaciones para Dispositivos Móviles

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

Programación web para móviles

Sesión 6: Aspectos avanzados de jQuery Mobile


© 2012-2013 Depto. Ciencia de la Computación e IAProgramación web para móviles Aspectos avanzados de jQuery Mobile - 2

Contenido

• Listados de elementos• Listados básicos con enlaces• Listados anidados• Listados numerados• Listados de solo lectura• Listados divididos y agrupados• Listados con filtros

• Formularios• Conceptos básicos• Elementos de formularios• Botones• Envío de formularios• Servicios REST



Listados de elementos

• Uno de los aspectos más importantes de las aplicaciones web para móviles

• Espacio limitado en los dispositivos móviles• Debemos aprovechar al máximo el espacio• Usos de los listados

• Mostrar datos• Sistemas de navegación• Sistemas de entrada de información



Listados básicos con enlaces

• Lista desordenada con enlaces y el atributo data-role=”listview”

• jQuery Mobile transforma el DOM• Le añade un icono con una flecha a la derecha

<ul data-role="listview" data-theme="g"> <li><a href="audi.html">Audi</a></li> <li><a href="bmw.html">BMW</a></li> <li><a href="volkswagen.html">Volkswagen</a></li></ul>



Listados anidados

• Un listado dentro de otro• Se muestran separadamente• En primer lugar la lista principal• Al hacer clic, se mostrará la secundaria



Listados anidados

<ul data-role="listview" data-theme="g"> <li> Audi <ul data-role="listview"> <li>A1</li><li>A2</li><li>A3</li> </ul> </li> <li> BMW <ul data-role="listview"> <li>Serie 1</li><li>Serie 2</li><li>Serie 3</li> </ul> </li> <li> Volkswagen <ul> <li>Golf</li><li>Passat</li><li>Touran</li> </ul> </li></ul>



Listados anidados



Listados numerados

• Útiles para:• Resultados de búsquedas• Clasificaciones

<ol data-role="listview" data-theme="g"> <li><a href="barca.html">Barcelona</a></li> <li><a href="levante.html">Levante</a></li> <li><a href="realmadrid.html">Real Madrid</a></li> <li><a href="malaga.html">Málaga</a></li> <li><a href="valencia.html">Valencia</a></li> <li><a href="sevilla.html">Sevilla</a></li> <li><a href="betis.html">Betis</a></li> <li><a href="atletico.html">Atlético</a></li> <li><a href="rsociedad.html">Real Sociedad</a></li> <li><a href="mallorca.html">Mallorca</a></li> </ol>



Listados de solo lectura

• Únicamente mostrarán información• Podemos tener listadas ordenadas y desordenadas

• Listados simples

<ul data-role="listview" data-theme="g"> <li>Alacid Magán, Emilio</li> <li>Blasco López, Sonia</li> <li>Gabaldón Santander, Nicolas</li> <li>García Sánchez, Ana María</li> <li>Guerrero Hurtado, Carlos</li> <li>Salinas Ruiz, José Manuel</li> <li>Sansano Alicante, Lorena</li></ul>



Listados de solo lectura• Listados simples con información numérica

<ul data-role="listview" data-theme="g"> <li>Alacid Magán, Emilio <span class="ui-li-count">9,5</span></li> <li>Blasco López, Sonia <span class="ui-li-count">6,5</span></li> <li>Gabaldón Santander, Nicolas <span class="ui-li-count">5</span></li> <li>García Sánchez, Ana María <span class="ui-li-count">7</span></li> <li>Guerrero Hurtado, Carlos <span class="ui-li-count">9</span></li> <li>Salinas Ruiz, José Manuel <span class="ui-li-count">4</span></li> <li>Sansano Alicante, Lorena <span class="ui-li-count">7</span></li></ul>



Listados de solo lectura• Listados formateados

<ul data-role="listview"> <li> <h3>Alacid, Emilio</h3> <p><strong>Un fenómeno en las matemáticas</strong></p> <p>Comentar el incidente de los pinceles</p> <p class="ui-li-aside"><strong>17:10</strong></p> </li> <li> <h3>Blasco, Sonia</h3> <p><strong>Atiende mucho en clase</strong></p> <p>En ocasiones viene sin los deberes hechos</p> <p class="ui-li-aside"><strong>17:35</strong></p> </li> <li> <h3>Gabaldón, Nicolas</h3> <p><strong>Le encanta el medio ambiente</strong></p> <p>Se despista con una mosca</p> <p class="ui-li-aside"><strong>18:00</strong></p> </li> </ul>



Listados de solo lectura• Listados formateados



Listados de solo lectura• Listados con imágenes

<ul data-role="listview"> <li><img src="images/ar.png" alt="Messi" class="ui-li-icon"> Messi <span class="ui-li-count">8</span> </li> <li><img src="images/pt.png" alt="Cristiano" class="ui-li-icon"> Cristiano <span class="ui-li-count">7</span> </li> <li><img src="images/es.png" alt="Soldado" class="ui-li-icon"> Soldado <span class="ui-li-count">5</span> </li> <li><img src="images/co.png" alt="Falcao" class="ui-li-icon"> Falcao <span class="ui-li-count">5</span> </li> <li><img src="images/ar.png" alt="Higuaín" class="ui-li-icon"> Higuaín <span class="ui-li-count">5</span> </li> <li><img src="images/es.png" alt="Cazorla" class="ui-li-icon"> Cazorla <span class="ui-li-count">4</span> </li></ul>



Listados de solo lectura• Listados con imágenes



Listados de solo lectura• Listados con thumbnails

<ul data-role="listview"> <li> <img src="images/album-bb.jpg" /> <h3>Broken Bells</h3> <p>Broken Bells</p></li> <li> <img src="images/album-hc.jpg" /> <h3>Warning</h3> <p>Hot Chip</p></li><li> <img src="images/album-p.jpg" /> <h3>Wolfgang Amadeus Phoenix</h3> <p>Phoenix</p></li></ul>



Listados divididos y agrupados

• Agrupados por orden alfábetico• Utilizaremos el atributo data-role=”list-divider”<ul data-role="listview"> <li data-role="list-divider">A</li> <li><a href="index.html">Adam Kinkaid</a></li> <li><a href="index.html">Alex Wickerham</a></li> <li><a href="index.html">Avery Johnson</a></li> <li data-role="list-divider">B</li> <li><a href="index.html">Bob Cabot</a></li> <li data-role="list-divider">C</li> <li><a href="index.html">Caleb Booth</a></li> <li><a href="index.html">Christopher Adams</a></li> <li><a href="index.html">Culver James</a></li></ul>



Listados con filtros

• Podemos buscar textos en los listados de nuestras aplicaciones

• Utilizaremos el atributo data-filter=”true”

<ul data-role="listview" data-filter="true" data-filter-placeholder="Filtro de búsqueda"> <li>Alacid Magán, Emilio <span class="ui-li-count">9,5</span></li> <li>Blasco López, Sonia <span class="ui-li-count">6,5</span></li> <li>Gabaldón Santander, Nicolas <span class="ui-li-count">5</span></li> <li>García Sánchez, Ana María <span class="ui-li-count">7</span></li> <li>Guerrero Hurtado, Carlos <span class="ui-li-count">9</span></li> <li>Salinas Ruiz, José Manuel <span class="ui-li-count">4</span></li> <li>Sansano Alicante, Lorena <span class="ui-li-count">7</span></li></ul>



Listados con filtros



Formularios• Uno de los aspectos más importantes de una aplicación

web, tanto de escritorio como móvil• jQuery Mobile sigue el estándar HTML• Los transforma para hacerlos más atractivos visualmente

y en cuanto a la usabilidad• Si el navegador no permite la transformación, se

mostrarán con el diseño habitual de los mismos



Conceptos básicos• Debemos utilizar la etiqueta form con los atributos action

y method• action indica quien procesará esa petición• method indica como pasamos los datos (habitualmente

GET o POST)

<form action="form.php" method="post"> ...</form>



Conceptos básicos• Todos los conceptos conocidos sobre HTML nos servirán

en jQuery Mobile.• Debemos tener en cuenta algunos aspectos

• Siempre especificar el atributo id a los elementos de formulario• Este atributo debe ser único• No repetir este identificador en la aplicación• Utilizar la etiqueta label con el atributo for

• jQuery Mobile analiza el formulario y lo transforma siempre que sea posible

• Si no queremos transformar un determinado elemento podemos utilizar el atributo data-role=”none”



Conceptos básicos• jQuery Mobile trata de posicionar los elementos de

formulario de la mejor forma posible• Vertical, los labels aparecen arriba del elemento de formulario• Horizontal, los labels aparecen a la izquierda del elemento de

formulario

• Es aconsejable utilizar elementos de tipo div o fieldset con el atributo data-role=”fieldcontain” para envolver los elementos de formulario



Elementos de formulario. Cajas de texto• Se utilizar HTML puro y duro

<div data-role="fieldcontain"> <label for="name">Nombre</label> <input type="text" name="name" id="name" value="" /></div>



Elementos de formulario. Cajas de texto• Podemos utilizar los nuevos tipos de HTML5 (password,

email, tel, number, url, etc)<div data-role="fieldcontain"> <label for="email">Correo electrónico</label> <input type="email" name="email" id="email" value="" /> <label for="password">Contraseña</label> <input type="password" name="password" id="password" value="" /> <label for="age">Edad</label> <input type="number" name="age" id="age" value="" /> <label for="url">Url</label> <input type="url" name="url" id="url" value="" /> <label for="telephone">Teléfono</label> <input type="tel" name="telephone" id="telephone" value="" /></div>



Elementos de formulario. Cajas de texto• También podemos utilizar textarea• Se ajustarán a la anchura y altura del dispositivo

• En HTML5 se ha añadido el tipo search

<div data-role="fieldcontain"> <label for="description">Descripción</label> <textarea name="description" id="description"></textarea></div>

<div data-role="fieldcontain"> <label for="search">Buscar</label> <input type="search" name="search" id="search" placeholder="texto a buscar" value="" /></div>



Elementos de formulario. Deslizadores• Nuevo tipo introducido en HTML5 llamado range• Debemos especificar los atributo min y max

<div data-role="fieldcontain"> <label for="age">Edad</label> <input type="range" name="age" id="age" value="25" min="0" max="100" /></div>



Elementos de formulario. Switchers• Elemento para elegir entre dos valores

• on/off• true/false

• Utilizaremos el elemento select con el atributo data-role=”slider”

• El primer elemento del select será tratado como on o true

<div data-role="fieldcontain"> <label for="casado">Casado</label> <select name="casado" id="casado" data-role="slider"> <option value="no">No</option> <option value="yes">Sí</option> </select></div>



Elementos de formulario. Radio• Varios elementos mostrados a elegir sólo uno• Utilizaremos el elemento input con el atributo type=”radio”

y su correspondiente label• Aconsejable que todos los elementos de tipo radio

queden envueltos en las etiquetas fieldset y legend• Además, la etiqueta fieldset debe quedar envuelta por la

etiqueta div con el atributo data-role=”controlgroup”



Elementos de formulario. Radio

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Marca de coche</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="audi" checked="checked" /> <label for="radio-choice-1">Audi</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="bmw" /> <label for="radio-choice-2">BMW</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="seat" /> <label for="radio-choice-3">Seat</label> <input type="radio" name="radio-choice-1" id="radio-choice-4" value="volkswagen" /> <label for="radio-choice-4">Volkswagen</label> </fieldset></div>



Elementos de formulario. Radio



Elementos de formulario. Radio• Podemos agrupar los elementos de forma horizontal

<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Modelo de Audi</legend> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="a1" checked="checked" /> <label for="radio-choice-1">A1</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="a2" /> <label for="radio-choice-2">A2</label> <input type="radio" name="radio-choice-1" id="radio-choice-3" value="a3" /> <label for="radio-choice-3">A3</label> </fieldset></div>



Elementos de formulario. Checkbox• Varias opciones de las que el usuario puede seleccionar

varias• Utilizaremos el elemento input con el atributo

type=”checkbox” con su correspondiente etiqueta label con el atributo for

• La etiqueta fieldset debe quedar envuelta por una etiqueta div con el atributo data-role=”controlgroup”

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>De acuerdo con los términos del contrato:</legend> <input type="checkbox" name="checkbox-1" id="checkbox-1" class="custom" /> <label for="checkbox-1">Sí, estoy de acuerdo</label> </fieldset></div>



Elementos de formulario. Checkbox



Elementos de formulario. Checkbox• Elementos agrupados de forma vertical

<div data-role="fieldcontain"> <fieldset data-role="controlgroup"> <legend>Indíquenos sus hobbies</legend> <input type="checkbox" name="musica" id="musica"/> <label for="musica">Música</label> <input type="checkbox" name="deporte" id="deporte"/> <label for="deporte">Deportes</label> <input type="checkbox" name="television" id="television"/> <label for="television">Televisión</label> <input type="checkbox" name="cine" id="cine"/> <label for="cine">Cine</label> </fieldset></div>



Elementos de formulario. Checkbox• Para mostrarlo de forma vertical utiliza el atributo data-

type=”horizontal”

<div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>Estilo:</legend> <input type="checkbox" name="bold" id="bold"/> <label for="bold">b</label> <input type="checkbox" name="cursive" id="cursive"/> <label for="cursive"><em>i</em></label> <input type="checkbox" name="underline" id="underline"/> <label for="underline">u</label> </fieldset></div>



Elementos de formulario. Select• Seleccionar un único elemento de una lista• Sintaxis típica de HTML• Utilizaremos la etiqueta select con unos elementos de tipo

option• Utilizaremos también la etiqueta label• Agrupar estos elementos dentro de un elemento de tipo

div con el atributo data-role=”fieldcontain”



Elementos de formulario. Select

<div data-role="fieldcontain"> <label for="tiposuscripcion">Tipo de suscripción:</label> <select name="tiposuscripcion" id="tiposuscripcion"> <option value="diaria">Diaría</option> <option value="semanal">Semanal</option> <option value="mensual">Mensual</option> <option value="anual">Anual</option> </select></div>



Elementos de formulario. Select• Por defecto se mostrarán de forma nativa• Para modificar este comportamiento, podemos utilizar el

atributo data-native-menu=”false” en el elemento select



Elementos de formulario. Select• Para poder seleccionar varios elementos, utilizaremos el

atributo multiple=”multiple”

<div data-role="fieldcontain"> <label for="tiposuscripcion">Tipo de suscripción:</label> <select name="tiposuscripcion" id="tiposuscripcion" multiple="multiple" data-native-menu="false"> <option>Selecciona opciones</option> <option value="diaria">Diaría</option> <option value="semanal">Semanal</option> <option value="mensual">Mensual</option> <option value="anual">Anual</option> </select></div>



Botones• Los botones se pueden especificar como si fuera HTML

puro y duro• Pero se pueden especificar de otra forma con un enlace y

el atributo data-role=”button”

<a href="index.html" data-role="button">Botón con enlace</a>



Botones• Tenemos las siguientes representaciones de los botones

<button>Elemento button</button><input type="button" value="input" type="button" /><input type="submit" value="input" type="submit" /><input type="reset" value="input" type="reset" /><input type="image" value="input" type="image" />



Botones• Por defecto se muestran a nivel de bloque ocupando todo

el ancho posible• Podemos especificar que las muestre en línea con el

atributo data-inline=”true”

<a href="index.html" data-role="button" data-inline="true">Cancelar</a><a href="index.html" data-role="button" data-inline="true" data-theme="b">Guardar</a>



Botones• Podemos agrupar los botones tanto de forma horizontal

<div data-role="controlgroup"><a href="index.html" data-role="button">Sí</a><a href="index.html" data-role="button">No</a><a href="index.html" data-role="button">Quizás</a></div>



Botones• Podemos agrupar los botones tanto de forma horizontal

<div data-role="controlgroup" data-type="horizontal"><a href="index.html" data-role="button">Sí</a><a href="index.html" data-role="button">No</a><a href="index.html" data-role="button">Quizás</a></div>



Envío de formularios• jQuery Mobile procesa los formularios vía AJAX creando

incluso transiciones• Debemos especificar los atributos action y method (por

defecto la página actual y GET)• Podemos especificar la transición con el atributo data-

transition y data-direction• Podemos indicar que no queremos que el formulario se

procese vía AJAX con los atributo data-ajax=”false” o target=”_blank”



Consumir servicios REST• Es un conjunto de principios en el que se definen una

serie de estándares web y como deben utilizarse éstos• Básicamente tenemos dos formas de consumir:

• XML• JSON

• Nosotros utilizaremos JSON{"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}



Consumir servicios REST• jQuery proporciona la llamada $.getJSON() con los

siguientes parámetros• URI del servicio REST• Función que tratará la petición

• Ver ejemplo de código en los apuntes



¿Preguntas...?

Programación web para...

Documents

Transcript of Programación web para...