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.

2 thoughts on “Crear un temporizador regresivo con Titanium Appcelerator”

  1. Hola, veo que dominas algo de Titanium. Yo estoy que me rompo la cabeza con el Appcelerator. Estoy intentando hacer functionar un simple setInterval y no hay manera. Mi código es algo así:

    function gps(){
    Titanium.API.info(“hola”);
    }

    setInterval(function(){
    gps();
    }, 1000);

    Como ves, algo sumamente básico. Quiero darle una oportunidad al Appcelerator pero no acaba de convencerme. No me funcionan las cosas.

    Gracias!

Comments are closed.