Introduccin

Appcelerator Titanium es un framework Javascript para desarrollar aplicaciones de escritorio y para mviles. En su versin para mviles, se puede utilizar para desarrollar aplicaciones para iPhone, Android y Blackberry. Se distingue de otros frameworks en que genera aplicaciones nativas en lugar de aplicaciones que se ejecutan dentro de un navegador. En este tutorial nos vamos a centrar en preparar el entorno y crear una aplicacin bsica para Android.

Preparacin del entorno

Software requerido
Para poder desarrollar para Android se necesita: Titanium Developer (http://developer.android.com/sdk/index.html) o Titanium Studio (http://preview.appcelerator.com/studio/) SDK de Android (http://developer.android.com/sdk/index.html) Aunque se puede utilizar tanto Titanium Developer como Titanium Studio, Titanium Developer solo tiene las herramientas para generar el cdigo pero no lleva ningn editor. En cambio, Titanium Studio es una IDE basada en Eclipse en la que lo tenemos todo integrado.

Instalacin

Titanium Studio: ejecutar el instalador y seguir los pasos. Para ejecutar Titanium Studio, se debe registrar una cuenta de Appcelerator (gratuito). Una vez arranque, solo hay que seguir los pasos. Android SDK: descomprimir el fichero en la carpeta donde se quiera instalar

Configuracin del SDK de Android

Una vez se ha descomprimido el SDK de Android, tenemos que descargar las diferentes versiones que nos interese poder utilizar. Para ello, ejecutamos la aplicacin SDK Manager:

Si no necesitamos alguna versin especfica, pdemos dejar marcados los que nos aparecen por defecto y continuar con el botn Install. Debemos tener en cuenta que se diferencian los SDKs de Android y los SDK de Android de Google. stos ltimos

tienen los componentes de Google como Google Maps que con el SDK estndar no se pueden utilizar. Una vez descargados, es necesario reiniciar la aplicacin. Es importante tener en cuenta que cada vez que instalemos nuevos SDKs si hay algn dispositivo virtual (Virtual Device) creado, se tiene que eliminar para que todo funcione correctamente con Titanium Studio.

Creacin del primer proyecto

Una vez arrancado Titanium Studio, podemos crear el primer proyecto a travs del men: File -> New Titanium Mobile Project:

En la ventana que aparece, debemos indicar la informacin bsica del nuevo proyecto: Project name: nombre que le queremos dar App id: identificador de la aplicacin. Aunque si creamos una aplicacin para iPhone no hace falta, en el caso de aplicaciones para Android el identificador tiene que ser tipo paquete Java (ver captura). Titanium SDK Version: La versin del SDK de Titanium a utilizar. Deployment Targets: Los diferentes dispositivos a los que va destinada la aplicacin. Seleccionando "configure..." se puede configurar cada uno:

Si nos fijamos en la parte correspondiente a Android, debemos especificar el directorio donde hemos instalado el SDK anteriormente y seleccionar la versin del SDK a utilizar. Para llegar al mximo nmero posible de dispositivos, siempre se debera utilizar la versin mnima que necesitemos. Una vez creado el proyecto, pasamos a la vista general:

La parte superior izquierda de la pantalla, muestra los ficheros del proyecto La parte superior derecha, es la zona de edicin. En la captura se muestra el fichero "tiapp.xml" que es el fichero de configuracin de la aplicacin En la parte inferior izquierda se muestra la estructura del fichero abierto y se pude acceder a otra pestaa con algunos ejemplos disponibles para descargar Finalmente, la parte inferior derecha tiene las pestaas de consola, salida,... tpicas de Eclipse El asistente para crear el nuevo proyecto ya genera una serie de ficheros de inicio con lo que la aplicacin ya se puede ejecutar. Para hacerlo, se puede seleccionar el icono de play (marcado en rojo en la captura) y seleccionar la opcin Android Emulator para ejecutarlo en el emulador del sdk o Android Device para ejecutarlo en un dispositivo fsico. Si ejecutamos la aplicacin en el emulador, Titanium Studio se encarga de arrancarlo y desplegar la aplicacin:

Ficheros del proyecto

La estructura de ficheros y directorios inicial es la siguiente:

Donde: tiapp.xml: contiene configuracin bsica de la aplicacin app.js: es el fichero que se ejecuta al iniciar la aplicacin carpeta android: contiene los ficheros de recursos exclusivos para Android. Si la aplicacin se configura para ejecutarse tambin en iPhone, tendramos otra carpeta iPhone con los recursos para iPhone. En general, podemos poner ficheros con el mismo nombre en la carpeta Android y iPhone. Si lo hacemos, cuando generemos la aplicacin para un dispositivo concreto, se usar el fichero correspondiente.

app.js

Como se ha dicho, el fichero app.js es el fichero que se ejecuta inicialmente. A partir de aqu, y utilizando la funcin Titanium.include('.....') podemos incluir los ficheros que queramos y crear la estructura de directorios ms apropiada. El cdigo para la aplicacin de inicio es el siguiente:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 // this sets the background color of the master UIView (when there are no windows/tab groups on it) Titanium.UI.setBackgroundColor('#000');

// create tab group var tabGroup = Titanium.UI.createTabGroup();

// // create base UI tab and root window // 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 label1 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 1', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' });

win1.add(label1);

57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117

// // create controls tab and root window // var win2 = Titanium.UI.createWindow({ title:'Tab 2', backgroundColor:'#fff' }); var tab2 = Titanium.UI.createTab({ icon:'KS_nav_ui.png', title:'Tab 2', window:win2 });

var label2 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 2', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' });

win2.add(label2);

// // // tabGroup.addTab(tab1); tabGroup.addTab(tab2); add tabs

118 // open tab group 119 tabGroup.open();

El cdigo es muy sencillo. Todas las llamadas a las APIs de Titanium estn en el objeto Titanium por lo que empiezan con Titanium.xxx. Para abreviar, se puede utilizar Ti.xxx. En general, en una aplicacin Titanium se crea la ventana con la llamada Titanium.UI.createWindow y se le van aadiendo los diferentes controles. Para ver con detalle todas las funciones y parmetros, se puede consultar la API de Titanium (http://developer.appcelerator.com/apidoc/mobile/latest/Titanium-module). En todas las funciones de la API se les puede pasar como parmetro un objeto con los diferentes atributos que nos interesen. Un ejemplo muy interesante para ver las posibilidades de Titanium es Kitchen Sink. Se puede descargar el cdigo fuente de: https://github.com/appcelerator/KitchenSink/ ste ejemplo muestra diferentes vistas, controles, etc. para ver su aspecto en cada dispositivo. Un mismo control creado con Titanium utiliza el control nativo de cada dispositivo (es parte de la gracia) por lo que se puede mostrar diferente en Android que en iPhone. Con sta aplicacin se puede ver como queda asi como cdigo fuente de ejemplo para cada uno. Para ejecutar la aplicacin debemos tener en cuenta que uno de los controles que utiliza Kitchen Sink es el mapa, por lo que necesitaremos configurar la aplicacin para que utilice las apis de Google.