Siete días con Titanium – día 2 – tablas y selectores

Bienvenido al día 2 con Titanium – Tablas y Selectores. Un pequeño recordatorio de lo que hemos hecho hasta ahora:

• Introducción
• Día 1, Ventanas, vistas, navegación y pestañas.

Lo creas o no, la tabla es el elemento de la interfaz de usuario más usado en el SDK del iPhone. Si juegas un poco con las aplicaciones que vienen con tu “iDevice” (iDispositivo) verás que casi todas las aplicaciones nativas tienen tablas. Alguna veces están tan bien diseñadas y de apariencia tan cambiada que ni siquiera piensas en ellas como tablas. Pero en su tiempo, cuando aprendas más, podrás verlas y muchas ideas vendrán a tu mente - Además pienso que los selectores son de algún tipo de “tablas encubiertas” y es por ello que las presentaré juntas en este tutorial.

El elemento Table

El elemento Table es creado usando la función Titanium.UI.createTableView. Esta función acepta un objeto como argumento tal como estamos acostumbrados – con las diferentes configuraciones que podríamos darle a la tabla. Aparte de las propiedades usuales (como top, left, etc) tenemos una muy importante llamada data.

La propiedad Data

La propiedad data mantiene las filas de la tabla en forma de un arreglo. El código siguiente te mostrará de lo que estoy hablando:

 
var win1 = Titanium.UI.createWindow({
	backgroundColor:"#fff"
});
 
var table1 =  Titanium.UI.createTableView({
	data:[
		{title:"Row 1 - simple row"},
		{title:"Row 2 -  with child", hasChild:true},
		{title:"Row 3 -  with detail", hasDetail:true},
		{title:"Row 4 -  with check", hasCheck:true},
		{title:"Row 5 -  red background", backgroundColor:"#f00"}
	]	
});
 
win1.add(table1);
win1.open();

Qué estamos haciendo aquí?

Creamos una ventana. Como dijimos el día 1, la aplicación necesita tener por lo menos una ventana. Dentro de esta, añadimos table1 con las filas que se especifican arriba.

Esta es la manera más simple de hacerlo, con las propiedades de las filas establecidas como se especifica en las páginas de documentación de Titanium.UI.TableViewRows.

Si desarrollas multiplataformas, debes tomar en cuenta que cada plataforma te mostrará los datos a su manera (y algunos aspectos específicos se perderán). Debajo se encuentran 3 capturas de pantalla sobre cómo el código se ve en una aplicación iPhone y Android.

Una cosa muy importante que saber acerca de las tablas

Las filas en las tablas se renderizan “en demanda”, así que digamos que tienes 20 filas – es claro que sólo unas pocas estarán visibles (10 en una altura estándar). Para ahorrar memoria y acelerar la aplicación las otras filas serán renderizadas cuando el usuario deslice la tabla. Para hacerlo más rápido en el Sistema Operativo, el dispositivo crea algún tipo de plantilla cada cada capa de las filas y la reutiliza cambiándolas sólo en lo que difieren. Para tomar ventaja de esto, DEBES establecer un atributo className a las filas que compartan la misma capa (No lo hice arriba para simplificar el código).

Es importante principalmente porque para unas cuantas filas el uso de la memoria no es tan alto, pero para muchas filas, dependiendo de cuántas y de lo que se encuentre dentro de la fila – la aplicación podría estar lenta e incluso dejar de funcionar. El className puede ser cualquier cadena de caracteres que quieras:

{title:"Row 1 - simple row", className:"layout_one"}

Más acerca de las tablas

Cada tabla tiene por lo menos una sección y cada tabla puede ser plana (como la de arriba) o agrupada. Vamos a crear una tabla agrupada:

 
var table1 =  Titanium.UI.createTableView({
	style:Titanium.UI.iPhone.TableViewStyle.GROUPED
});
 
var section1 = Titanium.UI.createTableViewSection();
section1.headerTitle = "Hello";
var row1 = Titanium.UI.createTableViewRow({title:"Hello 1"});
var row2 = Titanium.UI.createTableViewRow({title:"Hello 2"});
section1.add(row1);
section1.add(row2);
 
var section2 = Titanium.UI.createTableViewSection();
section2.headerTitle = "Hello2";
var row3 = Titanium.UI.createTableViewRow({title:"Hello 3"});
var row4 = Titanium.UI.createTableViewRow({title:"Hello 4"});
section2.add(row3);
section2.add(row4);
 
table1.setData([section1,section2]);

Y el resultado

Como se puede ver, usé el método setData() para establecer el contenido de las tablas luego de que es creada.

Este método acepta un arreglo de secciones creadas con Titanium.UI.createTableViewSection, filas creadas con Titanium.UI.createTableViewRow u objetos que describen las filas como en el primer ejemplo.

Tablas personalizadas

Todos los ejemplos de arriba muestran cómo crear tablas simples. Si quieres crear una distribución más complicada necesitarás crear filas personalizadas para estas y Como crear filas personalizadas para TableViews usando Titanium Móvil explica cómo hacerlo…

Los Pickers o PickerViews

Los pickers (selectores) son el equivalente a la etiqueta select en HTML. La única diferencia es que puedes crear un selector multicolor (lo cual no es posible en HTML sin hacer uso de algunos trucos). La función que crea un selector es Titanium.UI.createPicker

Un selector simple es creado con el siguiente código:

var picker = Titanium.UI.createPicker();
var data = [];
data.push(Titanium.UI.createPickerRow({title:'Bananas'}));
data.push(Titanium.UI.createPickerRow({title:'Strawberries'}));
data.push(Titanium.UI.createPickerRow({title:'Mangos'}));
data.push(Titanium.UI.createPickerRow({title:'Grapes'}));
picker.add(data);

Tristemente se encuentra implementado sólo en la plataforma Apple:

La propiedad type del selector te permite escoger los próximos tipos predefinidos pero siempre puedes crear tu propio selector multicolor.

Titanium.UI.PICKER_TYPE_PLAIN (predeterminado),
Titanium.UI.PICKER_TYPE_DATE_AND_TIME,
Titanium.UI.PICKER_TYPE_DATE,
Titanium.UI.PICKER_TYPE_TIME o
Titanium.UI.PICKER_TYPE_COUNT_DOWN_TIMER.

var picker = Titanium.UI.createPicker({
type:Titanium.UI.PICKER_TYPE_DATE_AND_TIME
});

Debido a que las tablas y filas son similares, podrás crear tus propias filas personalizadas de la misma manera que la tablas usando por supuesto las funciones específicas para el selector (vinculados al final del tutorial).

No iré más lejos porque ya el post es bastante grande, pero intentaré en el futuro crear un grupo de posts que sean específicos a un elemento de la interfaz de usuario y donde trataré de “seccionarlo” tanto como sea posible.

Más recursos

Aquí hay algunos enlaces que seguir para mayor información:

• Como crear filas personalizadas para TableViews usando Titanium Móvil
• Un tutorial más avanzado Haciendo una lista de opciones desplegables en Titanium Appcelerator – Código y Vídeo en iPhone
• La documentación de Titanium para pickers, picker columns, picker rows y tables, table sections, table rows.

Como siempre, gracias por leer esto y estoy esperando por sus preguntas y sugerencias. Si tienes tus propios tutoriales o enlaces, estaré encantado de añadirlos para mejorar la calidad de los posts.

Nos vemos en el día 3.

Te recomendamos

1. Siete días con Titanium – día 6 – animaciones y transformaciones
2. Siete días con Titanium – día 7 – orientación y acelerómetro
3. The Evnt 2011 – 2 días de charlas sobre nuevas tecnologías
4. Módulo Generador QR para Titanium Appcelerator
5. Transparencias de la presentación de Titanium Appcelerator en The Event 2011