Programando con Titanium Appcelerator

Desde hace 3 meses he empezado a programar en Titanium Appcelerator, desde entonces he aprendido bastante en desarrollo para Android e iOS. A partir de ahora empezare a subir código a Github y escribiré de algunos trucos que he aprendido durante este tiempo.

Ultimamente he trabajado con JSON por lo cual mi primer tema sera como trabajar con este formato. Para este ejemplo parsearemos este ejemplo de JSON

[
    {
        "nombre": "Antonio"
    },
    {
        "nombre": "Luis"
    },
    {
        "nombre": "Andres"
    }
]


Ahora se debe de crear un archivo con un nombre como “json.js” donde pondremos el siguiente código.

exports.FuncionJson = function() {

	//Se crea el objeto HTTPClient
	var conexion = Ti.Network.createHTTPClient();

	//Se especifica el tipo de metodo, y la url a la que se conectara
	conexion.open("GET", "https://raw.github.com/gist/2014130/6dfe971313f21dd0061c28b3d11f67d70ae0c76b/nombres.json");

	//Esta funcion es llamada cuando se obtienen los datos de la respuesta
	conexion.onload = function() {
		try {
			//En nombre se guardara la informacion del json
			nombres = new Array;

			//Se pasa a formato JSON la respuesta obtenida
			json = JSON.parse(this.responseText);

			//Se agrega a nombre cada dato parseado
			//en este caso "nombre"
			for( i = 0; i < json.length; i++) {
				nombres.push({
					'title' : json[i].nombre
				});
			}

			//Se pasan a la ventana que se encuentra en el archivo apps.js
			//el array nombre
			Ti.App.fireEvent('nombres', {
				nombres : nombres
			});

		} catch(E) {
			Ti.API.info(E);

		}

	};
	// Se envia la peticion
	conexion.send();

}

Con esta función se obtiene el JSON y se parsea desde la misma. Lo mas interesante es que se no se esta utilizando un return, en vez de esto utilizo un firevente el cual se encarga de activar un evento que se encuentra en otro contexto con el nombre, “nombres” y le manda el array “nombres”.

Appcelerator siempre empieza apartir del archivo apps.js. Borra todo lo que tengas en este archivo y sustituyelo por el siguiente codigo:

//Con modulo podremos acceder a las funciones que se encuentran en json.js
var modulo = require('/json');
//Se crea una ventana
var ventana = Ti.UI.createWindow({
	backgroundColor : '#fff',
	navBarHidden : true
});
//En la tabla se agregaran los valores que se obtendran del JSON
var tabla = Ti.UI.createTableView({
	top:'10dp',
	left:'10dp',
	width: '300dp',
	height:'200dp',
});

//Con este evento al iniciar la aplicacion se ejecura la funcion FuncionJson
//la cual se encunetra en  json.js
ventana.addEventListener('focus', function(e){
	modulo.FuncionJson();
});
//Se activa este evento desde FuncionJson, cuando los datos se han parseado
//y se agregan a la tabla los datos parseados
Ti.App.addEventListener('nombres', function(e) {
	tabla.data =e.nombres;
});

ventana.add(tabla);
ventana.open();

En general este código crea una ventana, al iniciarse la ventana se llama a FuncionJson. Ademas se agrega una tabla, la cual tendra datos cuando se active el evento ‘nombres’ y se le agregara a la tabla los datos que se le pasen en el evento.

El codigo se encuentra en mi git

Y al final obtendremos algo como esto:

Emulador y Simulador

Anuncios
4 comentarios
  1. carlos dijo:

    que onda Jorge que bueno que estas compartiendo el conocimiento que tienes, con estas tecnologías, ya solo es cuestión de detallar el blog

  2. Hernan dijo:

    amigo que buena ayuda… estas brindando al menos el camino a seguiir con la programacion usando AppAcelerator..

    oye sino es mucho abuso Continua Subiendo Codigos que estoy interesado en aprender y tambien compartir todos
    esos trucos que uno va aprendiendo 😀

  3. Guido Correa dijo:

    Buen aporte amigo a que nos invites a programar para aplicaciones moviles, me gustaria sigas asi poder seguir aprendiendo….:D…

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: