Ejercicios

Taller de tecnologas
Docente: Alexis Espsito
Antes del Ejercicio 1
jQuery Mobile - Maquetacin
Vamos a necesitar:
Bsico de PhoneGap
Bsico de jQuery
Bsico de jQuery Mobile
Estructura de pginas
Pginas independientes y multi pginas
data-*
ListViews
Formularios
Navegacin
Docente: Alexis Espsito
PhoneGap (Apache Cordova)
Es un framework para la creacin de aplicaciones mviles a partir de
tecnologa HTML5.
Permite crear aplicaciones hbridas nativas - web.
Acceso a caractersticas propias de smartphone. (API del sistema nativo)
Posibilidad de desarrollar para mltiples plataformas.
Docente: Alexis Espsito
Android - PhoneGap
Docente: Alexis Espsito
JavaScript
Es ideal generar un archivo JS por cada pgina que lo necesite.
El evento $('document').ready de jQuery se cambia a $(document).bind('pageinit en jQuery Mobile.
Este evento es lanzado en el momento que la pgina es iniciada.
Docente: Alexis Espsito
jQuery
Docente: Alexis Espsito
Es una biblioteca JavaScript que nos permite simplificar el
trabajo de interactuar con HTML.
Manipular DOM
Eventos
Animacin
AJAX
jQuery Mobile
Docente: Alexis Espsito
Es una framework para trabajar con la interfaz de usuario.
Especialmente diseado para aplicaciones mviles.
Utiliza y aprovecha al mximo HTML5, CSS3 y JS.
jQuery Mobile
Docente: Alexis Espsito
Elementos
Soporte de elementos HTML
Pginas
Popups
Barras de herramientas
Barra de bsquedas
Vistas de Listas
Botones
Iconos
Formularios
Calendarios
RadioButtons
Checkbox
Pestaas
Barras de progreso
y ms...
jQuery Mobile
Docente: Alexis Espsito
Atributos data-*
jQuery Mobile trabaja con atributos data-* en las etiquetas HTML
para manejo de apariencia y funcionalidades.
Los atributos data-* son atributos personalizables, los siguientes
son los ms utilizados y son propios de jQuery Mobile:
data-role
page
header
content
footer
list-view
navbar
button
data-theme
data-rel
data-icon
data-ajax
data-transition
y ms...
http://jquerymobile.com/test/docs/api/data-attributes.html
jQuery Mobile
Docente: Alexis Espsito
Estructura de pginas
jQuery Mobile nos permite tener pginas (pantallas) de dos formas
diferentes.
Varias pginas dentro de un mismo HTML.
Estas pginas se precargan a la vez
Div data-rol="page"
Una pgina por HTML
Estas pginas se cargan de forma tradicional.
Para navegarlas se utiliza <a href="pagina.html"
De forma estndar cada pgina est compuesta por un header,
contenido y footer
<div data-role="header"
<div data-role="content"
<div data-role="footer"
jQuery Mobile
Docente: Alexis Espsito
ListViews
Los listados se construyen en base a elementos ul y li utilizando el
atributo data-rol="listview"
Para actualizar un listview jQuery Mobile nos brinda el metodo
$('#mylist').listview('refresh');
Formularios
Se crean de manera similar a un formulario en HTML
Barra de navegacin
<div data-role="navbar">
<ul>
<li><a href="uno.html">Uno</a></li>
<li><a href="dos.html">Dos</a></li>
</ul>
</div>
Ejercicio 1
jQuery Mobile - Maquetacin
Construir una aplicacin mobile donde el usuario pueda navegar por 2 pantallas distintas.
Pantalla 1: Listado de clientes. (Se muestra slo el Nombre)
Pantalla 2: Formulario de ingreso de clientes.
El clientes contiene id, nombre, direccin y telfono.
Para su creacin:
No utilizar multi pgina
Para la navegacin utilizar Navbar
Docente: Alexis Espsito
Antes del Ejercicio 2
jQuery Mobile - Navegacin
Vamos a necesitar:
jQuery Mobile
jQuery
Navegacin entre pgina
Pginas independientes y multi pginas
Archivos JS
Envo de parmetros
Docente: Alexis Espsito
Ejercicio 2
jQuery Mobile - Navegacin
En base al ejercicio 1, el usuario puede obtener ms informacin de un cliente presionando sobre l en la lista.
Para su creacin:
El detalle de la informacin se muestra en otra pantalla distinta.
Esta pantalla debe permitir volver para atrs.
Para llegar a la pantalla donde se muestra el detalle, es necesario enviar el parmetro Id por GET en la url.
Interesante: (funcin para obtener un parmetro por GET)
$.urlParam = function(name) {
var results = new RegExp('[\\?&amp;]' + name + '=([^&amp;#]*)').exec(window.location.href);
return results[1] || 0;
}
Docente: Alexis Espsito
jQuery Mobile - Consulta servicio web (JSON y AJAX)
Vamos a necesitar:
jQuery
AJAX
JSON
Antes del Ejercicio 3
Docente: Alexis Espsito
AJAX
Tecnologa que nos permite comunicarnos con el servidor sin necesidad de recargar la pgina.
Trabaja de manera asincrnica por lo que necesitamos tener un callback para enterarnos cuando finaliza la llamada.
Podemos hacer una llamada AJAX por POST o por GET, y como resultado podemos obtener TEXT, XML, JSON, etc.
jQuery nos brinda los mecanismo para trabajar con AJAX.
Docente: Alexis Espsito
JSON
JSON es un formato ligero de datos.
Se utiliza tanto para enviar informacin al servidor como para recibir.
Una vez que obtenemos un JSON pedido mediante AJAX al servidor, el mismo se puede manejar como si fuera un
objeto. Ejemplo: usuario.nombre;
jQuery Mobile - Consulta servicio web (JSON y AJAX)
En base al proyecto creado previamente debemos consultar un servicio web donde obtenemos un listado de
pedidos.
El listado de pedidos se debe mostrar en una nueva pantalla.
En el listado se mostrar: fecha, monto y nombre del cliente
Url del servicio: http://innvenio.com/ort/pedidos.php
Para su creacin:
Agregar la nueva pantalla como opcin al Navbar
Interesante:
$.ajax({
url : "",
data : "",
dataType : "JSON",
beforeSend : function() {},
success : function(response) {}
});
Ejercicio 3
Docente: Alexis Espsito
Antes del Ejercicio 4
jQuery Mobile - Consulta servicio web con parmetro
Vamos a necesitar:
jQuery
AJAX
JSON
Docente: Alexis Espsito
Ejercicio 4
jQuery Mobile - Consulta servicio web con parmetro
A la pantalla donde se muestra el detalle de un cliente debemos agregar un botn para consultar sus pedidos.
El listado resultantes de pedidos de un cliente se debe mostrar en la misma pantalla debajo del botn.
Url del servicio: http://innvenio.com/ort/pedidos.php
Parmetro a enviar: id_cliente
Docente: Alexis Espsito
Antes del Ejercicio 5
PhoneGap - Storage
Vamos a necesitar:
Apache Cordova
Storage
Open Database
Execute SQL
SQLTransaction
SQLResultset
DeviceReady
Docente: Alexis Espsito
Storage
Docente: Alexis Espsito
PhoneGap nos brinda mtodos para el sencillo manejo de la base
de datos y todo desde JavaScript.
Abrir base de datos
window.openDatabase("nombre", "versin", "nombre a mostrar", tamao);
Ejecutar transaccin
db.transaction(function_ejecutante, function_error, function_exito);
Funcin que ejecuta
function function_ejecutante(tx)
{
tx.executeSql('SQL'); //SOLO EJECUTAR
tx.executeSql('SELECT ..', [], funcion_ejecutado, function_error); //EJECUTAR CON RESULTADO
}
function funcion_ejecutado(tx, results) {}
Ejercicio 5
PhoneGap - Storage
Para hacer la aplicacin ms completa, vamos a permitirle al usuario agregar nuevos clientes desde la pantalla del
formulario.
A su vez vamos a cambiar la pantalla del listado de clientes para que la misma sea cargada con informacin directa
desde la base de datos.
Interesante:
document.addEventListener("deviceready", function(){}, false);
Docente: Alexis Espsito
Antes del Ejercicio 6
PhoneGap - API
Vamos a necesitar:
Apache Cordova
Storage
Open Database
Execute SQL
SQLTransaction
SQLResultset
DeviceReady
API
Docente: Alexis Espsito
API
Docente: Alexis Espsito
PhoneGap nos permite interactuar con los diferentes componentes y
servicios nativos del smartphone.
Que nos permite?
Accelerometer
Camera
Compass
Contacts
Files
Geolocalization
Notification
Storage
y ms...
Ejercicio 6
PhoneGap - API
Queremos asociar clientes a contactos internos del smartphone.
Dentro del detalle de un cliente le vamos a permitir al usuario ver el listado de contactos y seleccionar uno para
asociar.
Se deber agregar un botn en la pantalla de detalles de un cliente donde presionando se mostrar una lista de
contactos. Seleccionando uno, el usuario quedar asociado a ese contacto y en la pantalla de detalle aparecer su
nmero de telfono para llamar.
Interesante:
var campos = ["id", "phoneNumbers", "name"];
navigator.contacts.find(campos, onSuccess, onError, {filter:""});
'<a href="tel://numero">nombre</a>';
Docente: Alexis Espsito