Siete días con Titanium – Día 1 – Ventanas, vistas, navegación y pestañas

Hoy va a ser el primer día del tutorial de Titanium para principiantes y un post bastante largo. Antes de comenzar, aquí tienen una recapitulación de lo que hemos escrito hasta ahora (y actualizado lo que vendrá): Siete días con Titanium – Día 0 – Introducción

Como se especificó en el post de la Introducción, intentaré en esta lección decir algunas cosas acerca de la navegación, ventanas, vistas y pestañas – lo básico de las interfaces.

Intentaré primero enumerar cada uno de estos elementos para luego explicar lo que hacen y cómo usarlos. Además, cada elemento de la interfaz tiene un enlace a su documentación en el sitio de Appcelerator.

Todo lo que esté relacionado con la interfaz lo encontrarás e el módulo Titanium.UI. Hay además algunos módulos específicos para la plataforma que cubren los elementos de la interfaz presentes sólo en una plataforma específica: Titanium.UI.Android,Titanium.UI.iPhone,Titanium.UI.iPad pero por ahora no hablaremos de ellos.

El Elemento Ventana (Window)

El elemento básico en una aplicación Titanium es una Window. No hay nada complicado aquí, es un “contenedor” para todos los demás elementos que quieras. Una aplicación puede tener una o mas ventanas pero siempre debe por lo menos tener una ventana. Una ventana es uno de los pocos elementos que pueden existir por si mismos sin la necesidad de ser hijo de algo.

El Elemento Vista (View)

Otro Elemento básico es la View.La vista puede ser análoga de una etiqueta DIV en HTML así que básicamente es sólo un rectángulo que mantiene otros elementos para un control mas fácil y conveniente de las capas de la aplicación. Una vista no puede existir por sí misma, tendrá que ser una hija de una Ventana u otro elemento que acepte Vistas como hijos. (un TableRowView u otra Vistapor ejemplo).

El TabGroup y las Pestañas (Tabs).

El principal elemento de navegación (y común a todas las plataformas) es el TabGroup y los Tabs. Exactamente lo que dice su nombre – análogo con algún explorador con capacidades de pestañas, un TabGroup contiene más pestañas. Cada pestaña controla (abre) una ventana. Si decides que tu aplicación tendrá un TabGroup, este será la “raíz” de la aplicación.

Que significa esto?

Que cualquier ventana abierta por las pestañas de un TabGroup será controlada por esta y el TabGroup tiene una sola instancia y no puede ser cerrada o removida, sólo puede ser oculta.

Hay además un elemento de navegación específico para el iPhone, llamado NavigationGroup que permite navegar a través de ventanas sin la necesidad de crear las barras y botones de navegación por nosotros mismos.

Ejemplo

Así es cómo una aplicación con un TabGroup, 2 Ventanas, 2 Pestañas y una Vista se ve en las plataformas Android y iPhone.

Ejemplo TabGroup en IphoneEjemplo TabGroup en Android

Más detalles acerca de cada elemento

Antes de que continuemos, Sería grandioso dar una mirada a la página de documentación de cada elemento porque hay mucha información valiosa ahí. Como puedes ver, cada elemento de la interfaz tiene algunas propiedades que se establecen o se leen (como top, backgroundColor, etc), algunos métodos (add(), open()) y eventos – usualmente eventos de interacción con el usuario (touchstart, doubletap, etc) o eventos específicos (open, close). Muy similar a los elementos web.

Quiero especificar algunas cosas:
el tamaño se expresa en píxeles pero SIN la usual notación “px”, o en porcentaje – pero requiere ser escrita como string:

...
top:25,
width:"50%"
...

los colores son rgb hexadecimales, la forma corta o la larga, no uses nombres:

...
backgroundColor:"#f00",
borderColor:"#ff0055"
...

Tratemos de explicar un poco más.

El elemento Window otra vez

El elemento Window es creado usando la función Titanium.UI.createWindow.

var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});

Qué significa el código de arriba?. Que pasamos a la función createWindow un objeto como argumento con todas las propiedades que queremos establecer.

Esto puede ser escrito así:

var win1 = Titanium.UI.createWindow();
 
win1.title='Tab 1'
win1.backgroundColor='#fff';

Pienso que está bastante claro así que no voy a profundizar más el código, view, tabs. Es similar a este, sólo que tienes que usar Titanium.UI.createView, etc.

Cómo se relacionan los TabGroups, Tabs y los Windows

La lógica detrás de los elementos de la Interfaz de Usuario (IU) es como sigue:

El TabGroup es la raíz de la aplicación, es “maestro”, no puede ser incluido en ningún otro elemento de la IU. Este contiene a los tabs (por lo menos a uno) y cuando se hace clic a un tab, abre el window que tenga asociado.

Aquí hay un código de ejemplo:

 
// create tab group
var tabGroup = Titanium.UI.createTabGroup();
 
// create base UI tabs and  windows
 
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});
 
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',
    backgroundColor:'#fff'
});
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',
    title:'Tab 2',
    window:win2
});
 
//  add tab
 
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  
// open tab group
tabGroup.open();

El código de arriba generará una interfaz similar a las capturas de pantalla mostradas sin las etiquetas “I am window1”, etc y la vista en rojo. Este será un buen ejercicio para ti. 🙂

Importante!

Como puedes ver, hemos establecido los mismos títulos a tab1 – win1 y a tab2 – win2. Esto no es obligatorio desde el punto de vista de código. La ventana asociada a cada pestaña se especifica usando la propiedad window que apunta a la ventana previamente declarada. ¿Por qué está así entonces?, es por usabilidad. El usuario necesita tener los mismos valores cuando el / ella asocien dos elementos visuales o se confundirán. Además a Apple no podría gustarle esto cuando les envíes tu app.

Recursos

El código anterior se encuentra en el archivo defaultapp.js que obtienes cuando creas un nuevo proyecto. Yo solo expliqué un poco cómo son las cosas.

Un muy muy buen recurso es el proyecto KitchenSink del equipo Appcelerator.

Para los programadores avanzados este es otro tutorial sobre cómo crear un tooltip con Titanium que básicamente es sólo una vista con una imagen de fondo.

Creo que es suficiente para el día 1, el post es muy largo y sólo añadiré que estaré esperando sus preguntas, sugerencias y críticas si he cometido algún error 🙂 Con sus preguntas/sugerencias actualizaré el post o crearé uno nuevo vinculado al “día 1”.

2 thoughts on “Siete días con Titanium – Día 1 – Ventanas, vistas, navegación y pestañas”

  1. Justo lo que necesito. Estoy mirando los frameworks que existen actualmente en el mercado y Titanium es el que aparentemente es más completo. Con este tutorial puedo iniciarme más rápidamente.

    Espero que lo ampliéis pronto. Gracias!!

Comments are closed.