App Template para Titanium
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| (function(){ | |
| var Mods = require('/ModulePaths'); | |
| var TabGroup = require(Mods.TABGROUP); | |
| var tabGroup = new TabGroup(); | |
| tabGroup.open(); | |
| })(); |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }; |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| } |
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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' | |
| } |
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
Jorge says
Hola muy buenos tus articulos , espero y puedas hacer uno sobre la correcta gestion de memoria , esto debido a que recientemente hice una aplicacion y me encontre con que estaba consumiendo muchos recursos, sabes como puedo observar cuanta memoria esta en uso, porque se satura la memoria y como evitarlo?
Paco says
un pregunta sobre esta plantilla…
¿Como accedo al “tabGroup” de forma global?
Por ejemplo acceder al “tabGroup” desde “Window1″
Saludos y gracias
J. Rayon says
Tratando de evitar siempre crear variables globales, puedes pasarlo como argumento en la creación de win1
//
//
luego en Window1.js recoges los argumentos recibidos:
//
//
Sería lo mismo si quieres pasar por ejemplo tab en vez de tabGroup (para hacer tab.open(otraVentana))
Paco says
Perfecto!
Funciona perfecto! Al final entendí a estructurar la app con commonJS!
Muchas gracias por tu ayuda!
Paco says
Una consultilla mas…
Como puedo añadir un “tab” a un “tabgroup” de forma de global con commonjs?
Al principio de la app creo un tab (para el login) que luego lo tengo que elimninar (una vez loqueado), posteriomente el usuario quiere cerrar la sesión y tengo que volver a añadir el “tab” para volover a loguearse.
No se si me he explicado bien…
Javier Solís says
Excelente! muchas gracias!
JAvier Solís says
En el caso de que quisiera agregar un estilo .jss a Window1
en que directorio debería crear el archivo Window1.jss??
Gracias
J. Rayon says
Hola Javier, creo que lo correcto sería convertir ese fichero .jss a .tss que son los estilos estándar de Alloy. Si aún así quieres usar ficheros .jss, ponlo dentro de assets.