App Template para Titanium

J. Rayon — Sun, 12 Aug 2012 11:40:18 +0000

Hoy voy a crear un sencillo template de Titanium que podremos usar para empezar nuestras aplicaciones de cero. Nos servirá para sustituir el template que usa Titanium Studio al crear una aplicación en blanco.

La aplicación por defecto de Titanium Studio crea un tabGroup con dos ventanas. Yo voy a crear la misma aplicación, pero usando módulos commonJS. Además, ya dejamos preparada la estructura de directorios para que nuestra app pueda crecer correctamente desde un principio.

Antes de continuar, puede que te interesen estos artículos si no los has leído aún.JavaScript para Titanium (I), JavaScript para Titanium (II), CommonJS para Titanium

Resumen

Crearemos una app con un TabGroup con 3 tabs (secciones). Cada tab abre una ventana diferente. El mismo código nos permitirá distribuir una aplicación nativa android, iPhone y mobile web.

app.js

Empezamos por el punto de arranque de la app. Recuerda que todas las apps titanium arrancan desde app.js.

	(function(){

	var Mods = require('/ModulePaths');

	var TabGroup = require(Mods.TABGROUP);

	var tabGroup = new TabGroup();

	tabGroup.open();

	})();

view raw

app.js

hosted with ❤ by GitHub

Hay varias cosas que comentar. Primero, habrás observado que todo el fichero está envuelto en una función anónima que se autoejecuta (el hecho de que la función esté envuelta en unos paréntesis con otros paréntesis a continuación hace que la función se ejecute tras ser declarada). Como recordarás de la introducción a JavaScript, las funciones limitan el ámbito de las variables. Con esta función anónima, lo que hacemos es evitar que las variables Mods, TabGroup y tabGroup salten al ámbito global y por tanto puedan ser accesibles desde otras partes de la aplicación. Esta técnica sólo es necesaria (en principio) en el fichero app.js, ya que el resto de nuestros ficheros van a ser todos módulos commonJS, que limitan de por sí el ámbito de sus variables.

Lo primero que hace app.js es cargar un módulo llamado ModulePaths. Aunque esto no es obligatorio y no lo verás en todas las apps, es una costumbre que he puesto en práctica y que me ha demostrado tener varias ventajas. De momento, basta saber que ModulePaths contiene todas las sendas y nombres de ficheros del proyecto para no tener que recordarlos.

A continuación, cargo el módulo TabGroup (explicado más adelante). La línea 9 crea una instancia del módulo y finalmente se da la orden de abrir el tabGroup. Mucho ojo a las mayúsculas y minúsculas. Es una buena costumbre cargar los módulos en variables con mayúsculas (TabGroup) y las instancias de módulos con minúsculas (tabGroup).

app/ui/TabGroup.js

Este módulo devuelve una instancia de Titanium.UI.TabGroup, ya adaptada a nuestras necesidades. El hecho de poder cargar un componente de Titanium, modificarlo y ampliarlo a nuestro gusto y devolverlo como un componente nuevo, es tremendamente útil y lo desarrollaré a fondo en próximas entregas.

En todos mis módulos siempre lo primero que hago es cargar ModulePaths, a continuación defino los módulos que voy a usar en este módulo y finalmente se implementa el módulo desde module.exports.

	var Mods = require('/ModulePaths'); //load module paths

	var Window1 = require(Mods.WINDOW1),
	Window2 = require(Mods.WINDOW2),
	Window3 = require(Mods.WINDOW3);

	module.exports = function(_args) {


	var tabGroup = Ti.UI.createTabGroup();

	var win1 = new Window1();

	var win2 = new Window2();

	var win3 = new Window3();


	var tab1 = Ti.UI.createTab({
	window: win1,
	title:'Window 1',
	icon:'KS_nav_ui.png'
	});

	var tab2 = Ti.UI.createTab({
	window: win2,
	title:'Window 2',
	icon:'KS_nav_views.png'
	});

	var tab3 = Ti.UI.createTab({
	window: win3,
	title:'Window 3',
	icon:'KS_nav_ui.png',
	});


	tabGroup.addTab(tab1);
	tabGroup.addTab(tab2);
	tabGroup.addTab(tab3);


	return tabGroup;
	};

view raw

TabGroup.js

hosted with ❤ by GitHub

En este caso, declaro las tres ventanas que voy a necesitar en el proyecto (líneas 3-5) y defino el módulo en sí mismo con module.exports. Cada ventana Window1, Window2 y Window3 tiene un fichero .js donde se implementa su código. Más abajo muestro su contenido.

Línea 10, creo el tabGroup de titanium. Líneas 12-16 creo una instancia de cada una de las ventanas, líneas 19-40, creo los tabs del tabGroup, asigno las ventanas, títulos e iconos y finalmente devuelvo el tabGroup con todo listo para ser abierto.

app/ui/Window1.js

Las tres ventanas son prácticamente iguales, así que sólo explico la primera.

	module.exports = function(){

	var win = Ti.UI.createWindow({
	backgroundColor:'#fff',
	title: 'win 1'
	});


	var lbl = Ti.UI.createLabel({
	text:'This is Window 1',
	color:'#333'
	});

	win.add(lbl);

	return win;

	}

view raw

Window1.js

hosted with ❤ by GitHub

Es una ventana muy sencilla con una etiqueta. Como este módulo no tiene dependencias externas, no necesito llamar a ModulePaths ni ningún otro módulo. Simplemente crea una ventana de Titanium, le añade una etiqueta y devuelve la ventana.

Una de las ventajas de programar de esta manera, es que este módulo no se preocupa de cómo va a ser usado o por quién. En este caso, Window1 es instanciado por TabGroup en su línea 12, pero perfectamente nos la podríamos llevar a otro proyecto y reutilizarla sin a penas cambios.

ModulePaths.js

Como decía antes, el uso de un fichero índice de todos los ficheros del proyecto no es obligatorio. Perfectamente podríamos haber llamado cada ventana por su senda en TabGroup de este modo

1	var Window1 = require('/app/ui/Window1')

Sin embargo el uso de ModulePaths tiene varias ventajas.

Primero, que a medida que nuestro proyecto crezca, no necesitaremos recordar todas las sendas y nombres de archivo, sólo un identificador que asignaremos a cada módulo.

Segundo, que en proyectos complejos, podremos cambiar una versión de un fichero por otra, simplemente cambiando el nombre en ModulePaths. Por ejemplo, si tenemos un componente llamado VideoPlayer y queremos hacer pruebas con un fichero distinto sin modificar todo el proyecto, cambiaremos la senda en ModulePaths a un fichero nuevo (por ejemplo, VideoPlayerTest.js) y todo el proyecto cogerá esta referencia.

Tercero, más de una vez ocurre que hay que cambiar la estructura de carpetas de un proyecto. Si esto ocurriera, podemos mover los ficheros tranquilamente y después tan sólo tenemos que actualizar este fichero, y no cada módulo del proyecto.

Una última ventaja, si piensas desarrollar para mobile web, es que las sendas en esta plataforma no pueden empezar con la barra /, cosa que sí ocurre en el resto de plataformas. Trabajando con ModulePaths, podemos gestionar fácilmente estas diferencias.

	//avoid initial slash in paths under mobileweb platform

	var firstSeparator = (Ti.Platform.name === 'mobileweb') ? '' : '/';

	var ui = firstSeparator + 'app/ui/';

	module.exports = {
	TABGROUP: ui + 'TabGroup',
	WINDOW1: ui + 'Window1',
	WINDOW2: ui + 'Window2',
	WINDOW3: ui + 'Window3',

	STYLES: ui + 'Styles'

	}

view raw

ModulePaths.js

hosted with ❤ by GitHub

Como ves, el fichero únicamente asigna una senda a una clave que después es la que llamamos desde los módulos (por ejemplo Mods.WINDOW1 o Mods.TABGROUP).

Y para terminar…

Te recomiendo que vuelvas al código de app.js y vuelvas a leerlo desde el principio, ahora que ya sabes lo que contiene cada módulo te resultará más fácil entenderlo. El objetivo es dividir el código en partes funcionales lo más pequeñas posibles, lo que te permitirá crear código que reutilizarás con más facilidad en tus proyectos y mejorarán cuanto más los uses.

Y esto es todo! Puedes descargar el proyecto completo desde mi github en https://github.com/jaraen/TabGroupTemplate

App funcionando en el simulador de android

App funcionando en el simulador de iPhone

App funcionando en el navegador