Crear una ingeniosa herramienta de notificación en Titanium

En este post, les mostraré como crear una herramienta de notificación para aquellos que están usando Titanium para desarrollar sus aplicaciones para iPhone.

Algunas veces, cuando colocamos un botón con un icono – digamos en una barra de navegación – un simple icono no es suficiente para hacer que el usuario entienda lo que se supone que debe hacer el botón.

Por ejemplo en este:

Que haría el botón de la derecha (rightNavButton)? La aplicación es un lector de libros electrónicos – si es que esto ayuda, pero estoy seguro de que no lo hará…

Que hay acerca de esto:

Ahora usted sabe que al presionar el botón podrá continuar su lectura – en caso de que algo lo haya sacado del capítulo, como cambiar la configuración, o contestar el teléfono o lo que sea…

Asi que comencemos.

La herramienta es una vista simple con la imagen colocada como fondo.

var lasttipView =  Titanium.UI.createView({
width:205,
height:57,
backgroundImage:"img/bubble.png",
top:0,
right:3
});

El “Continuar leyendo” es una simple etiqueta añadida a la vista.

var lasttipLabel =  Titanium.UI.createLabel({
text:'Continue reading',
color:'#fff',
width:205,
height:34,
top:16,
font:{
fontFamily:'Helvetica Neue',
fontSize:13,
fontWeight:'bold'
},
textAlign:'center'
});
 
lasttipView.add(lasttipLabel);

y la ventana de índice contiene la vista de la herramienta de notificación.

index_win.add(lasttipView);

Yo supongo que ya tenemos la ventana de inicio (index_win) creada

Ahora cuando abrimos la ventana de inicio, el cuadro de diálogo estará ahí y el usuario sabrá lo que hace el rightNavButton. Pero si el cuadro de diálogo permanece ahí se convierte en un fastidio, así que necesitamos conseguir la manera de ocultarlo. Elijo ocultarlo cuando el usuario presione el botón usando un suave desvanecimiento.

El siguiente código crea una animación y lo añade al evento “click”.

var anim_out = Titanium.UI.createAnimation();
anim_out.opacity=0;
anim_out.duration = 250;
});
 
last_read =  Titanium.UI.createButton({
image:"img/tag1.png"
});
 
last_read.addEventListener('click', function() {
lasttipView.animate(anim_out);
});

Ok, aquí se encuentra el código del botón también pero por simplicidad he removido algunas partes que muestran el capítulo e inician otras funciones.

Esto es todo, bastante simple no?

PS. Ustedes pueden usar una imagen de burbuja en sus aplicaciones si lo desean, sólo háganmelo saber – y si sienten curiosidad por la aplicación, aquí está:

Youth, by Isaac Asimov iPhone ebook.