Dispositivos Móviles: Desarrollo de apps con Titanium:Trabajando con datos remotos

Ahora veremos los métodos que utiliza Titanium Studio para la lectura, análisis y guardado de datos, es importante saber manipular datos remotos para poder hacer una buena optimización de nuestra aplicación.Titanium nos provee una forma sencilla de hacer llamadas simples de XML bajo HTTP, y de igual manera implementando JSON.

Para comenzar primero veremos el siguiente código:

var win = Titatnium.UI.currentWindow;
//declaramos el objeto del cliente http
var xhr = Titanium.Network.createHTTPClient();

//este metodo procesara los datos remotos
xhr.onload = function() {
 //Despliega en la consola las respuesta
 Ti.API.info(this.responseText);
};

//este metodo sera usado en caso de que haiga algun
//error accesando a los datos remotamente
xhr.onerror = function() {
 //Nos desplegara el log del error en la consola
 Ti.API.error(this.status + ' - ' + this.statusText);
};

//abre el feed de xml
xhr.open('GET', 'http://www.elnorte.com/rss/ciencia.xml')

//Ejecuta la llamada a el feed
xhr.send();

Y lo que nos despliega el código en la consola es lo siguiente:

Ahora veremos como desplegarlo en tablas:

var win = Titanium.UI.currentWindow;
//declaracion del arreglo vacio
var datos = [];
//declaramos el objeto del cliente http
var xhr = Titanium.Network.createHTTPClient();
//creacion de la tabla
var tabla = Titanium.UI.createTableView({
 height: 366,
 width: 320,
 top: 0,
 left: 0
});
//agregamos tabla
win.add(tabla);
//este metodo procesara los datos remotos
xhr.onload = function() {
 var xml = this.responseXML;
 //obtenemos el elemento del de la lista desde nuestro responseXML
 var items = xml.documentElement.getElementsByTagName("item");
 //ciclo por cada item en xml
 for (var i = 0; i < items.length; i++){
  
  //creacion de la fila de la tabla
  var fila = Titanium.UI.createTableViewRow({
   title:items.item(i).getElementsByTagName("title").item(0).text
  });
  
  //agregamos la fila al arreglo datos
  datos.push(fila);
 }//termina nuestro ciclo
 //Ahora le especificamos la propiedad de datos a nuestra tabla
 tabla.data = datos;
};

//este metodo sera usado en caso de que haiga algun
//error accesando a los datos remotamente
xhr.onerror = function() {
 //Nos desplegara el log del error en la consola
 Ti.API.error(this.status + ' - ' + this.statusText);
};

//abre el feed de xml
xhr.open('GET', 'http://www.elnorte.com/rss/ciencia.xml')

//Ejecuta la llamada a el feed
xhr.send();

Y nos despliegará esto, que es un rss que lo tomé de la página de "El Norte":

Veremos como colocarle imágenes a cada fila y hacer que cada fila nos muestre el contenido, ya que en el anterior solamente vemos el título de la noticia:

var win = Titanium.UI.currentWindow;
//declaracion del arreglo vacio
var datos = [];
//declaramos el objeto del cliente http
var xhr = Titanium.Network.createHTTPClient();
//creacion de la tabla
var tabla = Titanium.UI.createTableView({
 height: 366,
 width: 320,
 top: 0,
 left: 0,
 rowHeight:70 //Le decimos el tamaño de nuestras filas
});
//agregamos tabla
win.add(tabla);
//este metodo procesara los datos remotos
xhr.onload = function() {
 var xml = this.responseXML;
 //obtenemos el elemento del de la lista desde nuestro responseXML
 var items = xml.documentElement.getElementsByTagName("item");
 //ciclo por cada item en xml
 for (var i = 0; i < items.length; i++){
  
  //creacion de la fila de la tabla
  var fila = Titanium.UI.createTableViewRow({
   hasChild: true,//con esto decimos que tendrá una subsección la fila
   className: 'fila-rss'//propiedad de solo usar memoria necesaria, osea que solo las filas que veamos
  });
  //etiqueta de titulo
  var tituloLabel = Titanium.UI.createLabel({
   text:items.item(i).getElementsByTagName("title").item(0).text,
   //propiedades de la letra
   font:{fontSize: 14, fontWeight: 'bold'},
   left:70,
   color:'#000000',
   top:5,
   height:20,
   width: 210
  });
  fila.add(tituloLabel);
  //etiqueta de descripcion
  var descripcionLabel = Titanium.UI.createLabel({
   text:items.item(i).getElementsByTagName("description").item(0).text,
   font:{fontSize: 10, fontWeight:'normal'},
   left: 70,
   color:'#000000',
   top: 25,
   height: 40,
   width: 200
  });
  if(descripcionLabel.text == ''){
   descripcionLabel.text = 'Descripcion no disponible.';
  }
  fila.add(descripcionLabel);
  //Agregamos un icono en el lado izquierdo a cada fila
  var icono = Titanium.UI.createImageView({
   image:'paper.png',
   width: 30,
   height: 30,
   left: 10,
   top: 10
  });
  fila.add(icono);
  //agregamos la fila al arreglo datos
  datos.push(fila);
 }//termina nuestro ciclo
 //Ahora le especificamos la propiedad de datos a nuestra tabla
 tabla.data = datos;
};

//este metodo sera usado en caso de que haiga algun
//error accesando a los datos remotamente
xhr.onerror = function() {
 //Nos desplegara el log del error en la consola
 Ti.API.error(this.status + ' - ' + this.statusText);
};

//abre el feed de xml
xhr.open('GET', 'http://www.elnorte.com/rss/ciencia.xml')

//Ejecuta la llamada a el feed
xhr.send();

Ahora veremos lo que nos despliega el código:

Ahora usaremos JSON, para ello nosotros usaremos Yahoo! YQL para acelerar el acceso a nuestros datos remotos.Para ello entramos a esta página http://developer.yahoo. com/yql/console :

Seleccionamos 'Data Tables', luego seleccionamos 'data' para después seleccionar 'feed'.Nos aparecerá algo como arriba pero con otra url, sustituimos por la misma que tenemos en la imágen y
seleccionamos JSON y Diagnostics,Para finalizar damos click en TEST y nos dará como resultado XML en formato JSON debajo de la etiqueta THE REST QUERY, una vez teniendo la url sustituimos esto ' por esto otro \' eliminaremos esta parte &callback=cbfunc que es la última.

Ahora modificaremos nuestro código:

var win = Titanium.UI.currentWindow;
//declaracion del arreglo vacio
var datos = [];
//declaramos el objeto del cliente http
var xhr = Titanium.Network.createHTTPClient();
//creacion de la tabla
var tabla = Titanium.UI.createTableView({
 height: 366,
 width: 320,
 top: 0,
 left: 0,
 rowHeight:70 //Le decimos el tamaño de nuestras filas
});
//agregamos tabla
win.add(tabla);
//este metodo procesara los datos remotos
xhr.onload = function() {
 //Creamos un objeto json usando la funcion JSON.parse; nos sirve para parsear datos en JSON
 var jsonObject = JSON.parse(this.responseText);
 //ciclo por cada item en json
 for (var i = 0; i < jsonObject.query.results.item.length; i++){
  //creacion de la fila de la tabla
  var fila = Titanium.UI.createTableViewRow({
   hasChild: true,//con esto decimos que tendrá una subsección la fila
   className: 'fila-rss',//propiedad de solo usar memoria necesaria, osea que solo las filas que veamos
   backgroundColor: '#FFFFFF'
  });
  //etiqueta de titulo
  var tituloLabel = Titanium.UI.createLabel({
   text:jsonObject.query.results.item[i].title,
   //propiedades de la letra
   font:{fontSize: 14, fontWeight: 'bold'},
   left:70,
   color:'#000000',
   top:5,
   height:20,
   width: 210
  });
  fila.add(tituloLabel);
  //etiqueta de descripcion
  var descripcionLabel = Titanium.UI.createLabel({
   text:jsonObject.query.results.item[i].description,
   font:{fontSize: 10, fontWeight:'normal'},
   left: 70,
   color:'#000000',
   top: 25,
   height: 40,
   width: 200
  });
  if(descripcionLabel.text == ''){
   descripcionLabel.text = 'Descripcion no disponible.';
  }
  fila.add(descripcionLabel);
  //Agregamos un icono en el lado izquierdo a cada fila
  var icono = Titanium.UI.createImageView({
   image:'paper.png',
   width: 30,
   height: 30,
   left: 10,
   top: 10
  });
  fila.add(icono);
  //agregamos la fila al arreglo datos
  datos.push(fila);
 }//termina nuestro ciclo
 //Ahora le especificamos la propiedad de datos a nuestra tabla
 tabla.data = datos;
};

//este metodo sera usado en caso de que haiga algun
//error accesando a los datos remotamente
xhr.onerror = function() {
 //Nos desplegara el log del error en la consola
 Ti.API.error(this.status + ' - ' + this.statusText);
};

//abre el feed de xml
xhr.open('GET', 'http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20feed%20where%20url%3D\'www.elnorte.com%2Frss%2Fciencia.xml\'&format=json&diagnostics=true')
//Ejecuta la llamada a el feed
xhr.send();

Esto es lo que nos despliega el código corriendo:

Vieron la diferencia?, si están leyendo probablemente dirán que esta loco veo lo mismo pero si lo corren verán de que estoy hablando ;) ... me refiero a velocidad .

Fuentes:

Ayuda de desarrollador de Appcelerator
http://developer.appcelerator.com/

Consola YQL
http://developer.yahoo.com/yql/

Dispositivos Móviles

lunes, 14 de mayo de 2012

Desarrollo de apps con Titanium:Trabajando con datos remotos

2 comentarios: