Introducción
Appcelerator Titanium es un framework Javascript para desarrollar aplicaciones de escritorio y para móviles.
En su versión para móviles, 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 aplicación básica para Android.
Preparación 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 código pero no lleva ningún editor. En cambio, Titanium Studio es una IDE basada en Eclipse en la que lo tenemos todo integrado.
Instalación
- 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
Configuración 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 aplicación “SDK Manager”:
Si no necesitamos alguna versión específica, pdemos dejar marcados los que nos aparecen por defecto y continuar con el botón “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 estándar no se pueden utilizar.
Una vez descargados, es necesario reiniciar la aplicación. Es importante tener en cuenta que cada vez que instalemos nuevos SDKs si hay algún dispositivo virtual (Virtual Device) creado, se tiene que eliminar para que todo funcione correctamente con Titanium Studio.
Creación del primer proyecto
Una vez arrancado Titanium Studio, podemos crear el primer proyecto a través del menú: “File” -> “New Titanium Mobile Project”:
En la ventana que aparece, debemos indicar la información básica del nuevo proyecto:
- Project name: nombre que le queremos dar
- App id: identificador de la aplicación. Aunque si creamos una aplicación 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 versión del SDK de Titanium a utilizar.
- Deployment Targets: Los diferentes dispositivos a los que va destinada la aplicación. 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 versión del SDK a utilizar. Para llegar al máximo número posible de dispositivos, siempre se debería utilizar la versión mínima 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 edición. En la captura se muestra el fichero "tiapp.xml" que es el fichero de configuración de la aplicación
- En la parte inferior izquierda se muestra la estructura del fichero abierto y se pude acceder a otra pestaña con algunos ejemplos disponibles para descargar
- Finalmente, la parte inferior derecha tiene las pestañas de consola, salida,... típicas de Eclipse
El asistente para crear el nuevo proyecto ya genera una serie de ficheros de inicio con lo que la aplicación ya se puede ejecutar. Para hacerlo, se puede seleccionar el icono de “play” (marcado en rojo en la captura) y seleccionar la opción “Android Emulator” para ejecutarlo en el emulador del sdk o “Android Device” para ejecutarlo en un dispositivo físico. Si ejecutamos la aplicación en el emulador, Titanium Studio se encarga de arrancarlo y desplegar la aplicación:
Ficheros del proyecto
La estructura de ficheros y directorios inicial es la siguiente:
Donde:
- tiapp.xml: contiene configuración básica de la aplicación
- app.js: es el fichero que se ejecuta al iniciar la aplicación
- carpeta android: contiene los ficheros de recursos exclusivos para Android. Si la aplicación se configura para ejecutarse también en iPhone, tendríamos 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 aplicación 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 función Titanium.include('.....') podemos incluir los ficheros que queramos y crear la estructura de directorios más apropiada.
El código para la aplicación 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
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
118
119
// 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);
//
// 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);
//
// add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);
// open tab group
tabGroup.open();
El código es muy sencillo. Todas las llamadas a las APIs de Titanium están en el objeto Titanium por lo que empiezan con Titanium.xxx. Para abreviar, se puede utilizar Ti.xxx.
En general, en una aplicación Titanium se crea la ventana con la llamada Titanium.UI.createWindow y se le van añadiendo los diferentes controles. Para ver con detalle todas las funciones y parámetros, 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 parámetro 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 código 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 aplicación se puede ver como queda asi como código fuente de ejemplo para cada uno.
Para ejecutar la aplicación debemos tener en cuenta que uno de los controles que utiliza Kitchen Sink es el mapa, por lo que necesitaremos configurar la aplicación para que utilice las apis de Google.
