03 Building cross-platform mobile applications with jQuery Mobile / Desarrollo de Aplicaciones...

Desarrollo de Aplicaciones Cross-Platform para Dispositivos Moviles

Building Cross-Platform Mobile Applications

M.S.C. Raquel Vásquez Ramírez M.S.C. Cristian A. Rodríguez Enríquez

Contenido

•  Listas –  Básica –  Con Botones –  Con Divisiones

•  Controles en jQuery Mobile •  Formularios •  Arquitectura Cliente -‐ Servidor •  Desarrollo de un formulario •  Ac@vidades

Building Cross-Plaftform Mobile Applications – jQuery Mobile Slide 02 of 22

Lista Básica


Lista desordenada <ul data-role="listview"> <li>Item 1</li> <li>Item 2</li> </ul> Lista ordenada <ol data-role="listview"> <li>Item 4</li> <li>Item 5</li> </ol>

Lista con Botones


Lista desordenada <ul data-role="listview"> <li><a href="#">Item 1</a></li> <li><a href="#">Item 2</a></li> </ul> Lista ordenada <ol data-role="listview"> <li><a href="#">Item 4</a></li> <li><a href="#">Item 5</a></li> </ol>

Lista con Divisiones [1 de 2]


Lista desordenada <ul data-role="listview"> <li data-role="divider">Desayunos</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> <li data-role="divider">Comidas</li> <li><a href="#">Item</a></li> <li><a href="#">Item</a></li> </ul>


Lista con Divisiones [2 de 2] <ul data-role="listview"> <li>Restaurantes <ul> <li>Frances <ul>

<li><a href="lecentral.html">Le Central</a> <a href="reservations.php?

restaurant=903">Make Reservations</a> </li>

</ul> </li> <li>Cajun and Creole <ul> <li>Bayou Bob's</li> </ul>


Input Text

<label for="input-‐1">Nombre:</label> <input type="text" name="input-‐1" id="input-‐1"/>


Textarea

<label for="textarea-‐1" >Datos:</label> <textarea name="textarea-‐1" id="textarea-‐1">

Ejemplo text area </textarea>


Search

<label for="search-‐1">Buscar:</label> <input type="search" name="search-‐1" id="search-‐1" />


Checkbox

<fieldset data-‐role="controlgroup"> <legend>Intereses:</legend> <input type="checkbox" name="checkbox-‐1" id="checkbox-‐1" class="custom" /> <label for="checkbox-‐1">Musica</label> … </fieldset>


Checkbox Horizontal

<fieldset data-‐role="controlgroup“ data-‐type="horizontal"> <legend>Intereses:</legend> <input type="checkbox" name="checkbox-‐1" id="checkbox-‐1" class="custom" /> <label for="checkbox-‐1">Musica</label> … </fieldset>


Radio Button

<fieldset data-‐role="controlgroup"> <legend>radio buSons:</legend> <input type="radio" name="radio-‐choice-‐1" id="radio-‐full-‐1" value="choice-‐1" /> <label for="radio-‐full-‐1">Credit</label>

</fieldset>


Slider

<div data-‐role="fieldcontain"> <input type="range" id="slider-‐1"

name="slider-‐1" min="0" max="100"> </div>


Flip Switch/Flip Toggle

<label for="slider-‐music">Ambient Music</label> <select name="slider-‐music" id="slider-‐music" data-‐role="slider">

<op@on value="on">On</op@on> <op@on value="off">Off</op@on>

</select>


Select Menu

<label for="select-‐restaurants">Select Your Restaurants:</label> <select id="select-‐restaurants" name="select-‐restaurants"> <op@on value="le central">Le central</op@on> … </select>


Send/Submit Button

<buSon type="submit" data-‐theme="a" data-‐mini="true">Enviar</buSon>


Formularios [1 de 3]

•  Son artefactos u@lizados para enviar información al servidor.

•  jQuery mejora los elementos de un formulario permi@endo que cada componente se adapte fácilmente al @po de interfaz del disposi@vo móvil.



Procesamiento: •  Client Side (JavaScript) •  Server Side (PHP, Java, MS.NET…)

Almacenamiento •  Client Side (HTML 5 - Browser) •  Server Side (MySQL, Oracle, SQL Server, Posgresql…)



Definición de un Formulario: <form id="miFormulario" ac>on="resultado.php” method="post" data-‐ajax="false”>

… </form>


Arquitectura Cliente - Servidor

HTTP Request

Cualquier tecnologia con soporte HTTP y HTML


Desarrollo de un Formulario

Desarrollar un formulario con los siguientes campos: •  Usuario •  Password •  Nombre •  Apellido Paterno •  Edad •  Sexo •  Email •  Si desea suscribirse al boletín de noticias

Ac@vidades

•  Realizar el procesamiento del formulario con .NET •  Utilizar SQL Server para almacenar los datos

procesados •  Obtener Feedback de la aplicación servidor y

mostrarlo en una lista (Listar Usuarios Registrados)


03 Building cross-platform mobile applications with jQuery Mobile / Desarrollo de Aplicaciones...

Technology

Transcript of 03 Building cross-platform mobile applications with jQuery Mobile / Desarrollo de Aplicaciones...