Desarrollo de apps con Titanium:Agregando filtro a un TableView

Ahora lo que haremos es agregarle un filtro a nuestra tabla, esto nos sirve mucho para cuando manejamos muchos datos y queremos encontrar de una manera más comoda algo.Para esto tomaré como base la app que vimos en esta entrada:

http://dispositivosmoviles-saulg.blogspot.mx/2012/05/desarrollo-de-apps-con.html

Ahora veremos como implementar un filtro en una tabla, para ello debemos agregar el siguiente código antes de definir una tabla:

//definimos la barra del buscador de la tabla
var buscador = Titanium.UI.createSearchBar({
 showCancel:true,//muestra opcion de cancelar
 height:43,
 top:0
});

//muestra en la consola el valor que busca
buscador.addEventListener('change',function(e){
 Ti.API.info('Busco : '+ e.value);
});
//cuando borra en el campo de texto quita el enfoque al buscador
buscador.addEventListener('return',function(e){
 buscador.blur();
});
//cuando cancela el usuario quita el enfoque a el
buscador.addEventListener('cancel',function(e){
 buscador.blur();
});

Ya definido el buscador vamos a agregar las siguientes propiedades a nuestra tabla para que pueda funcionar nuestro filtro:


Nosotros colocamos a la tabla la propiedad de search y ahi va el nombre de nuestro filtro que lo llamamos buscador, también nosotros agregamos la propiedad filterAttribute aquí es donde va ir la variable que utilizaremos para guardar nuestro filtro.

var win = Titanium.UI.currentWindow;
//declaracion del arreglo vacio
var datos = [];
//declaramos el objeto del cliente http
var xhr = Titanium.Network.createHTTPClient();

//definimos la barra del buscador de la tabla
var buscador = Titanium.UI.createSearchBar({
 showCancel:true,//muestra opcion de cancelar
 height:43,
 barColor: '#385292',
 top:0
});

//muestra en la consola el valor que busca
buscador.addEventListener('change',function(e){
 Ti.API.info('Busco : '+ e.value);
});
//cuando borra en el campo de texto quita el enfoque al buscador
buscador.addEventListener('return',function(e){
 buscador.blur();
});
//cuando cancela el usuario quita el enfoque a el
buscador.addEventListener('cancel',function(e){
 buscador.blur();
});
//creacion de la tabla
var tabla = Ti.UI.createTableView({
 height: 366,
 width: 320,
 top: 0,
 left: 0,
 hideSearchOnSelection: true,
 rowHeight:70, //Le decimos el tamaño de nuestras filas
 search: buscador,
 fitlerAttribute:'filter' //filtrado sera lo que aparecera en 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
   filter: items.item(i).getElementsByTagName("title").item(0).text//esta variable nos ayuda a saber que filas son las que buscamos con el buscador
  });
  //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://feeds.cristalab.com/clab')
 
//Ejecuta la llamada a el feed
xhr.send();

Y esto será lo que obtendremos: