Tag Archives: android

Siete días con Titanium – día 7 – orientación y acelerómetro

La mayoría de los dispositivos de hoy en día vienen con un acelerómetro que detecta la orientación del dispositivo o los movimientos que hace el usuario.

Titanium expone esta funcionalidad a través de sus APIs así que tomemos ventajas de eso 🙂

La orientación

El dispositivo puede reportar 7 estados de orientación, los cuales son definidos en Titanium a continuación:

  • Ti.UI.UNKNOWN – la app no puede detectar la posición
  • Ti.UI.PORTRAIT
  • Ti.UI.UPSIDE_PORTRAIT
  • Ti.UI.LANDSCAPE_LEFT
  • Ti.UI.LANDSCAPE_RIGHT
  • Ti.UI.FACE_DOWN – como reposando en una mesa con la pantalla hacia abajo
  • Ti.UI.FACE_UP – como reposando en una mesa con la pantalla hacia arriba

Aunque tenemos todas estas constantes definidas, hay situaciones en las que quizás no se encuentren disponibles: en iOs cuando el usuario bloquea la orientación, el dispositivo reportará dicha orientación sin importar cómo sea sostenido el dispositivo. En Android, muchos dispositivos pueden detectar sólo las orientaciones PORTRAIT y LANDSCAPE_LEFT.

Desde la versión 1.7.2 del SDK el API de orientación cambió y es establecido por ventana (o actividad). Puedes hacerlo utilimzando la propiedad orientationModes que acepta un arreglo con la orientación permitida para esa ventana. Mira este post en el Blog de Appcelerator.

win.orientationModes = [Ti.UI.PORTRAIT, Ti.UI.LANDSCAPE_RIGHT];

Existe también un evento que dispara los cambios de orientación permitiéndote hacer los cambios que puedas necesitar (adaptar la interfaz de usuario a la nueva orientación por ejemplo.)

Ti.Gesture.addEventListener('orientationchange',function(e) {
    alert(e.orientation);
});

La alerta mostrará un número entre 1 y 7 debido a que las constantes definidas arriba en este artículo son de tipo INT. Una buena práctica es comparar la orientación reportada por el evento con la constante y no directamente con el número. En caso de que algo cambie en el futuro, esto te asegurará que el código seguirá funcionando.

Puedes encontrar más acerca de esto en las páginas de documentación para Titanium.Gesture

El acelerómetro

El acelerómetro es una pieza de hardware que te dará la posición actual del dispositivo en coordenadas 3D (vector x, y, z). Esto te permite por ejemplo controlar los movimientos de un elemento en la pantalla.

Para obtener este vector, todo lo que tienes que hacer es capturar la actualización del evento Titanium.Accelerometer API. Esto retornará el vector del cual estamos hablando.

Ti.Accelerometer.addEventListener('update', function(e) {
    lbl.text = 'x: ' + e.x + 'y:' + e.y + 'z:' + e.z;
});

Nuevamente, es una buena práctica eliminar el evento cuando no lo necesitemos para ahorrar algunos ciclos de CPU.

Eso es todo para el día 7. Code strong y nos vemos en Mobile con Galicia el 9 de Diciembre.

Crear un temporizador regresivo con Titanium Appcelerator

En este post trataremos de mostrarle cómo hacer un temporizador regresivo usando Titanium Appcelerator para su aplicación en Iphone o Android.

Primero crearemos un objeto OOP countDown que puede ser usado independientemente en segundo plano en la aplicación, el cual, conectaremos con algunos elementos de interface.

El Objeto countDown

Para tener funcional el temporizador regresivo, necesitaremos declarar algunas propiedades y algunos métodos.

Como propiedades colocaremos :

time:{ m : minutes, s : seconds },
total_seconds : m*60+s

Creo que es bastante claro, “time” es un objeto con minutos y segundos y segundos_totales (total_seconds) contiene el número de segundos hasta que alcancemos 00:00

Necesitaremos colocar métodos que nos permitan:

  • Ajustar un tiempo en forma de contador.
  • Parar el temporizador.
  • Iniciarlo.

Además necesitamos colocar algunas funciones de llamadas que serán ejecutadas en cada tick del temporizador – fn_tick – y una que se ejecutará cuando el temporizador alcance 00:00 denominada fn_end.

No haremos una llamada para el inicio porque sabemos cuando ocurre esto y podemos lanzarlo por nosotros mismos.

El temporizador countDown se verá como esto:

var my_timer = new countDown( minutes, seconds, fn_tick, fn_complete);

Y seremos capaces de aplicar:

my_timer.set( minutes, seconds );
my_timer.start();
my_tmer.stop();

Debajo se encuentra el código que define el countDown (bastante simple).

var countDown =  function( m , s, fn_tick, fn_end  ) {
	return {
		total_sec:m*60+s,
		timer:this.timer,
		set: function(m,s) {
			this.total_sec = parseInt(m)*60+parseInt(s);
			this.time = {m:m,s:s};
			return this;
		},
		start: function() {
			var self = this;
			this.timer = setInterval( function() {
				if (self.total_sec) {
					self.total_sec--;
					self.time = { m : parseInt(self.total_sec/60), s: (self.total_sec%60) };
					fn_tick();
				}
				else {
					self.stop();
					fn_end();
				}
				}, 1000 );
			return this;
		},
		stop: function() {
			clearInterval(this.timer)
			this.time = {m:0,s:0};
			this.total_sec = 0;
			return this;
		}
	}
}

Y ahora, para usarlo en nuestro código, haremos algo como esto:

var my_timer = new countDown(1 , 5 ,
	function()	{
		//something here...
	},
	function() {
		// something here...
	}
);
 
my_timer.start();

Ok, el ejemplo de arriba es inútil, necesitaremos mostrar el tiempo actual en cada tick del contador (osea, en cada segundo) y al final, tendremos una alerta al usuario cuando se alcance 00:00

Adicionalmente, necesitaremos algunos elementos de interface para acceder a los métodos del contador para mostrar el tiempo actual.

Para esto, crearemos una etiqueta llamada display_lbl, que mostrará el tiempo y además 3 botones: set_btn, start_btn y stop_btn.

Crear el código es bastante simple, así que no les pondré el código aquí, pero puede echarle un vistazo cuando bajen el proyecto del temporizador regresivo.

Lo que es mas importante es conectar la interface con el contador del temporizador.

Así que creamos el temporizador y le colocamos las funciones fn_tick y fn_end

var my_timer = new countDown(5,30, 
		function() {
			display_lbl.text = my_timer.time.m+" : "+my_timer.time.s;
		},
		function() {
			alert("The time is up!");
		}
	);

Y asi es como conectaremos los botones con my_timer

 
set_btn.addEventListener('click',function(){
	display_lbl.text = "5 : 30";
	my_timer.set(5,30);
});
 
stop_btn.addEventListener('click',function(){
	my_timer.stop();
});
 
start_btn.addEventListener('click',function(){
	my_timer.start();
});

Como puede ver, también le colocamos a la etiqueta un valor inicial cuando iniciamos el temporizador porque de otra manera, perderemos el primer segundo. Hacemos esto aquí para mantener el objeto del temporizador libre de interacción externa y de esta manera podremos usarlo incluso sin interface.

Así es como se verá el proyecto final:

Countdown timer with Appcelerator

Por favor, tenga en mente que este es solo un ejemplo simple y no tenemos mecanismos de control para detectar cuando el usuario para el temporizador o cuando alcance 00:00 por sí mismo – pero se lo pueden añadir como ejercicio.

Pueden bajar el directorio de Recursos desde aquí.

Todo lo demás tiene licencia MIT y puede usarlo en cualquier aplicación que quiera, no obstante, si difunde la palabra sería agradable.

Como crear filas personalizadas para TableViews usando Titanium Móvil

En este post trataré de explicar wholesale NFL jerseys cómo Supply//Demand crear de filas personalizadas para TableViews usando Titanium Appcelerator.

Si usted no sabe acerca de wholesale NFL jerseys Titanium mire aquí.  Yo supongo que ya sabe cómo configurar e iniciar un proyecto en Titanium, así que sólo le mostraré como crear una fila personalizada.

De manera predeterminada, un TableView le permitirá crear una fila que puede tener: una imagen a la izquierda, un titulo y el conjunto decorador del tipo de la fila.  El siguiente código es un ejemplo de los datos estándar que necesitan ser pasados al TableView.

var RegData = [
{ leftImage:'es.png', title:"Spain", hasChild:true },
{ leftImage:'gb.png', title:"United Kingdom", hasChild:true },
{ leftImage:'us.png', title:"United States", hasChild:true },
{ leftImage:'fr.png', title:"France", hasChild:true }
];

var TheTable = Titanium.UI.createTableView({
data:RegData
});

Y el resultado en Iphone es éste:

wholesale Cleveland Browns jerseys

Bien, nos gustaría añadir mas datos a una fila, quizás algo como esto:

Esto requerirá construir la fila “a mano”. Así que necesitamos añadir 2 imageViews, la bandera y la tendencia, y labelViews para el país y el porcentaje. Además necesitamos cambiar el arreglo Miami Dolphins Jerseys de datos desde luego.

var CustomData = [
{ flag:'es.png', country:"Spain", trend:'up.png', percent:'28%' ,hasChild:true },
{ flag:'gb.png', country:"United Kingdom", trend:'down.png', percent:'-3%', hasChild:true },
{ flag:'us.png', country:"United States", trend:'up.png', percent:'8%', hasChild:true },
{ flag:'fr.png', country:"France", trend:'down.png', percent:'-40%', hasChild:true }
];

Creamos una variable “data” como un arreglo que mantendrá los objetos de la fila generada.

var data=[];

entonces recorremos el arreglo “CustomData”, creamos una nueva fila, las vistas de imagen (imageViews) y etiquetas y las añadimos a la fila.

for (var i = CustomData.length - 1; i >= 0;    i--) {
var row = Titanium.UI.createTableViewRow();

var flag =  Titanium.UI.createImageView({
url:CustomData[i].flag,
width:32,
height:32,
left:4,
top:2
});

var country = Titanium.UI.createLabel({
text:CustomData[i].country,
font:{fontSize:16,fontWeight:'bold'},
width:'auto',
textAlign:'left',
top:2,
left:40,
height:16
});

var percent =  Titanium.UI.createLabel({
text:CustomData[i].percent,
font:{fontSize:12,fontWeight:'bold'},
width:'auto',
textAlign:'left',
bottom:0,
left:60,
height:12
});

var trend =  Titanium.UI.createImageView({
url:CustomData[i].trend,
width:16,
height:16,
right:10
});

row.add(flag);
row.add(country);
row.add(percent);
row.add(trend);
row.hasChild=CustomData[i].hasChild; 

row.className = 'coutry_row'; 
data.push(row);
};

Como puede ver, first además, añadimos un nombre de clase (className) a la fila para mejorar el rendimiento del renderizado, ya que el iPhone reusará la plantilla de la fila con cada nuevo dato cuando renderice la tabla.

El resultado obtenido es:

Puede bajar el proyecto Titanium desde aquí. Tendrá que cheap jerseys crear un nuevo proyecto en Titanium y reemplazar la carpeta de recursos con el que se encuentra en el fichero.

Déjeme saber que piensas.