Ejercicios - Taller de Tecnologías

5/25/2018 Ejercicios - Taller de Tecnologas

1/25

Ejercicios

Taller de tecnologas

Docente: Alexis Espsito


2/25

Antes del Ejercicio 1

jQuery Mobile - MaquetacinVamos a necesitar:

Bsico de PhoneGapBsico de jQueryBsico de jQuery MobileEstructura de pginasPginas independientes y multi pginasdata-*ListViewsFormularios

Navegacin



3/25

PhoneGap (Apache Cordova)

Es un framework para la creacin de aplicaciones mviles a partir detecnologa HTML5.

Permite crear aplicaciones hbridas nativas - web.

Acceso a caractersticas propias de smartphone. (API del sistema nativo)

Posibilidad de desarrollar para mltiples plataformas.



4/25

Android - PhoneGap



5/25

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.



6/25

jQuery


Es una biblioteca JavaScript que nos permite simplificar eltrabajo de interactuar con HTML.

Manipular DOM

Eventos

Animacin

AJAX


7/25

jQuery Mobile


Es una framework para trabajar con la interfaz de usuario.

Especialmente diseado para aplicaciones mviles.

Utiliza y aprovecha al mximo HTML5, CSS3 y JS.


8/25

jQuery Mobile


ElementosSoporte de elementos HTML

Pginas

Popups

Barras de herramientas

Barra de bsquedasVistas de Listas

Botones

Iconos

Formularios

Calendarios

RadioButtonsCheckbox

Pestaas

Barras de progreso

y ms...


9/25

jQuery Mobile


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-viewnavbar

button

data-theme

data-rel

data-icon

data-ajax

data-transition

y ms...

http://jquerymobile.com/test/docs/api/data-attributes.html
http://jquerymobile.com/test/docs/api/data-attributes.htmlhttp://jquerymobile.com/test/docs/api/data-attributes.htmlhttp://jquerymobile.com/test/docs/api/data-attributes.html


10/25

jQuery Mobile


Estructura de pginasjQuery Mobile nos permite tener pginas (pantallas) de dos formas

diferentes.

Varias pginas dentro de un mismo HTML.

Estas pginas se precargan a la vezDiv data-rol="page"

Una pgina por HTML

Estas pginas se cargan de forma tradicional.

Para navegarlas se utiliza


11/25

jQuery Mobile


ListViewsLos 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');

FormulariosSe crean de manera similar a un formulario en HTML

Barra de navegacin

Uno

Dos


12/25

Ejercicio 1

jQuery Mobile - MaquetacinConstruir 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 pginaPara la navegacin utilizar Navbar



13/25


jQuery Mobile - NavegacinVamos a necesitar:

jQuery MobilejQueryNavegacin entre pginaPginas independientes y multi pginasArchivos JSEnvo de parmetros



14/25

Ejercicio 2

jQuery Mobile - NavegacinEn 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('[\\?&]' + name + '=([^]*)').exec(window.location.href);return results[1] || 0;

}



15/25

jQuery Mobile - Consulta servicio web (JSON y AJAX)Vamos a necesitar:

jQueryAJAXJSON




16/25

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.


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 unobjeto. Ejemplo: usuario.nombre;


17/25

jQuery Mobile - Consulta servicio web (JSON y AJAX)

En base al proyecto creado previamente debemos consultar un servicio web donde obtenemos un listado depedidos.El listado de pedidos se debe mostrar en una nueva pantalla.En el listado se mostrar: fecha, monto y nombre del clienteUrl 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

http://innvenio.com/ort/pedidos.php


18/25


jQuery Mobile - Consulta servicio web con parmetro

Vamos a necesitar:

jQueryAJAXJSON



19/25

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.phpParmetro a enviar: id_cliente

http://innvenio.com/ort/pedidos.php


20/25


PhoneGap - Storage

Vamos a necesitar:

Apache CordovaStorageOpen DatabaseExecute SQLSQLTransactionSQLResultsetDeviceReady



21/25

Storage


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) {}


22/25

Ejercicio 5

PhoneGap - Storage

Para hacer la aplicacin ms completa, vamos a permitirle al usuario agregar nuevos clientes desde la pantalla delformulario.A su vez vamos a cambiar la pantalla del listado de clientes para que la misma sea cargada con informacin directadesde la base de datos.

Interesante:

document.addEventListener("deviceready", function(){}, false);



23/25


PhoneGap - API

Vamos a necesitar:

Apache CordovaStorageOpen DatabaseExecute SQLSQLTransactionSQLResultsetDeviceReadyAPI



24/25

API


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...


25/25

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 paraasociar.Se deber agregar un botn en la pantalla de detalles de un cliente donde presionando se mostrar una lista decontactos. 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:""});

'nombre';


Documents

Ejercicios - Taller de Tecnologías