T i - S L

Para crear el primer programa con Titanium Studio basta con ir al menú:
File>New>Titanium Mobile Project


 img 1

1.-Ponemos el nombre de nuestro proyecto
2.-seleccionamos nuestro App id
3.-Url de tu portal personal o de la compañía.
4.-Selección de los sistemas para los que se generara la app.

Ya configurados basta presionar Finish para tener listo nuestro proyecto.
Automáticamente Titanium estudio nos genera los siguientes directorios y archivos:


 img 2

El archivo donde se encuentra el código fuente es app.js automáticamente nos genera un código el cual eliminaremos y sustituiremos por el siguiente código:


// 
// app.js 
// HolaMundo 
// 
// Created by @furthurr on 2011-12-14. 
// Copyright 2011 furthurr. All rights reserved. 
// 
var tabGroup = Titanium.UI.createTabGroup(); 
var tab = Titanium.UI.createTab({ 
    icon:'KS_nav_views.png', 
    title:'Tab' }); 
var win = Titanium.UI.createWindow({ 
    title:'ventana', 
    backgroundColor:'#fff' }); 
var label = Titanium.UI.createLabel({ 
    text:'hola mundo' }); 
win.add(label); 
tab.window=win; 
tabGroup.addTab(tab); 
tabGroup.open(); 

Para compilar nos situamos sobre el botón de RUN y seleccionamos el emulador con el que queremos probar nuestro primer programa.

 img 3


Si todo salió como debería tendremos como resultado las siguientes pantallas:


 img 4


Bien podremos identificar 4 elementos diferentes que hemos utilizado en el código: TabGrup, Tab, Window y un Label. 

Expliquemos un poco el código:

var tabGroup = Titanium.UI.createTabGroup(); 

Solo se ha creado el TabGroup sin atributos especiales. 

var tab = Titanium.UI.createTab({ 
 icon:'KS_nav_views.png', 
 title:'Tab' }); 

Se crea un Tap y se especifican un par de sus propiedades: icon y title, en icon se especifica el icono que se mostrara en la app, si se observa la fig 2 podemos ver que aparece la imagen que estamos utilizando como icono, y utilizamos el atributo title para ponerle un titulo al Tab.


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

Se crea ahora el elemento Window modificando sus propiedades: title para el titulo y el atributo backgroundColor para el color de fondo.

var label = Titanium.UI.createLabel({ text:'hola mundo' });

Por ultimo se crea el elemento label con la propiedad text la cual será el texto que mostraremos en pantalla.

win.add(label);
tab.window=win; 
tabGroup.addTab(tab); 
tabGroup.open(); 

Posteriormente agregamos el label a la ventana win.add(label); 
Asignamos la ventana al tab tab.window=win; 
Agregamos el tap al tabGroup tabGroup.addTab(tab); 
Por ultimo abrimos el tabGrup tabGroup.open(); 

TAREA??? xD
Ejercicio propuestos: Crear un programa con 3 tab cada uno con los siguientes textos:” soy ventana 1”, “soy ventana 2” y “soy ventana 3” .