Dispositivos Móviles: Introducción a Titanium

Existen varias maneras de crear aplicaciones móviles ya sea por eclipse para Android o ya sea para Xcode para iOS, esto algunas veces sea vuelto complicado ya que esto conlleva tiempo tener que entender y aprender los dos ambientes de desarrollo.Afortunadamente existen algunas plataformas como Titanium que nos permiten hacer una aplicación de manera nativa en Android e iOS con un lenguaje de programación muy conocido y práctico, para ello les mencionare una introducción para que se enteren de que trata muy bien Titanium.

Titanium es una herramienta open source lo que significa que es gratis, es fácil de usar ya que tiene una IDE similar a la de eclipse.

Este puede ser descargado por medio del link que está debajo.

http://www.appcelerator.com/products/download/

El único requisito es registrarse ya que con ello, podrás descargar algunos modulos que podrás implementarlos en el desarrollo de app y dichos modulos serán enviados a tu cuenta.

Por el momento pasaremos por alto la instalación ya que esto no es complicado y tambien la instalación de el simulador de Android ya que estamos suponiendo que has programado una app de Android en eclipse alguna vez.

Unos de los componentes que mas son usados en una aplicación son los botones con eventos, secciones que son llamados tabs, ventanas, alertas entre otros aquí les explicaré algunos ejemplos sencillos sobre como usar algunos componentes para ello les pondré dos capturas de un Android y de un iOS para que puedan ver los resultados.

Para comenzar crearemos un nuevo proyecto File/New/Titanium mobile project después le daremos nombre a nuestro proyecto como Ejemplo1 luego observaran en App Id esto com.gsgv.Ejemplo1, donde com significa company que es compañía en ingles y después de eso verán gsgv que esas son mis iniciales comúnmente ahi va el nombre de la compañía luego de eso, veremos que dice Ejemplo1 que es el nombre del proyecto.Si les quedó alguna duda dejaré una captura de pantalla de esto.

Ahora nos centraremos dentro de la carpeta Resources en el archivo app.js en el copiaremos y pegaremos el siguiente código, en el cual se hicieron dos secciones diferentes donde cada sección está compuesto de una ventana que contiene una etiqueta y un botón, dicho botón tiene un evento que al momento de dar click en el envia un mensaje de alerta.Todo está comentado para que esto sea entendible.

// Creamos el grupo de tabs
var tabGroup = Titanium.UI.createTabGroup();


//
// Creamos una ventana en la que agregaremos un label y un boton.Y la misma ventana será agregada a un tab que es una sección de la app.
//

//Creamos ventana
var win1 = Titanium.UI.createWindow({  
    title:'Tab 1',                        //Titulo de la ventana
    backgroundColor:'#fff'               //Color de fondo blanco
});
//Creamos el tab donde sera agregada la ventana
var tab1 = Titanium.UI.createTab({  
    icon:'KS_nav_views.png',             //Imagen que sera puesta en el tab
    title:'Soy Tab 1',                   //Titulo del Tab
    window:win1                          //Ventana que sera agregada
});

//Creamos una etiqueta
var label1 = Titanium.UI.createLabel({
 color:'#999',                        //Color del label
 text:'Yo soy la ventana 1',          //Texto dentro de la ventana
 font:{fontSize:20,fontFamily:'Helvetica Neue'},//Tamanio de letra y tipo de letra 
 textAlign:'center',                  //Texto alineado en el centro
 width:'auto'                         //Esta en auto lo ancho, esto significa que tomara el tamanio necesario nadamas
});
//Creamos un boton
var boton1 = Titanium.UI.createButton({
 title:'Boton 1',                     //Texto dentro del boton
 top:200,        //Posicion del boton
 width:300,        //Ancho del boton
 height:100        //Altura del boton
});
//Creamos un evento del boton
boton1.addEventListener('click', function(e){ //click significa que en caso de dar click una vez hacer lo siguiente
 alert('Hola desde el botón 1');           //Aparecera una alerta con el mensaje que tiene dentro
});
//Agregamos los componentes a la ventana
win1.add(label1);
win1.add(boton1);
//
// Creamos una ventana en la que agregaremos un label y un boton.Y la misma ventana será agregada a un tab que es una sección de la app.
//

//Creamos ventana
var win2 = Titanium.UI.createWindow({  
    title:'Tab 2',                       //Titulo de la ventana
    backgroundColor:'#fff'               //Color de fondo blanco
});
//Creamos el tab donde sera agregada la ventana
var tab2 = Titanium.UI.createTab({  
    icon:'KS_nav_ui.png',
    title:'Soy Tab 2',
    window:win2
});
//Creamos una etiqueta
var label2 = Titanium.UI.createLabel({
 color:'#999',
 text:'Yo soy la ventana 2',
 font:{fontSize:20,fontFamily:'Helvetica Neue'},
 textAlign:'center',
 width:'auto'
});
//Creamos boton
var boton2 = Titanium.UI.createButton({
 title:'Boton 2',
 top:200,
 width:300,
 height:100
});
//Creamos el evento del boton
boton2.addEventListener('click', function(e){
 alert('Hola desde el botón 2');
});
//Agregamos elementos a la ventana
win2.add(label2);
win2.add(boton2);



//
//  Agregamos los tabs que usaremos al tab group
//
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  


// Abre el tabGroup esto significa que abrira todas las tabs que han sido agregadas
tabGroup.open();

Y como prometí colocare dos capturas de pantalla la primera con Android y la segunda con iOS.

Android