Tag Archives: titanium

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.

Siete días con Titanium – Día 0 – Introducción

De que se trata todo?

Intento que esto sea un conjunto de siete tutoriales para ayudar a los principiantes a entender cómo trabajar con el framework móvil Titanium.

Los chicos de Appcelerator hicieron un excelente trabajo con el framework permitiéndonos, los desarrolladores web, tener acceso a las aplicaciones nativas de los dispositivos móviles (Apple iDevices, Android y pronto BlackBerry).

El framework alcanzó la versión 1.4.2 y cada día más desarrolladores parecen estar interesados en usarlo – especialmente porque es gratis. La comunidad es grande y encontrarás respuestas a casi todos los los problemas que podrías tener. Pero para los principiantes es aún un poco difícil de comenzar. De aquí surgió la idea de este conjunto de tutoriales con los cuales intentaré cubrir lo básico de los procesos de desarrollo para iPhone y Android.

Algunas cosas para comenzar

Cada post contendrá un encabezado con los tutoriales previamente escritos para un fácil seguimiento. Tendrá también una parte al pié donde algunos enlaces de interés serán publicados.

No serán posts diarios. Escribiré cuando tenga tiempo suficiente para probar y escribir los ejemplos. Prefiero un post bien escrito que uno apurado. Y cada post podría estar actualizado para añadir cosas que se hayan olvidado (o para acomodar problemas) así que no olvides marcarla en tus favoritos.

El código proveído estará bajo licencia MIT así que podrás usarlo como desees.

Qué debería conocer y/o que necesito?

Básicamente sólo necesitas conocimiento Javascript. Algo de codificación rutinaria Orientada a Objetos sería grandioso pero no es obligatorio (aprenderemos en el vuelo) 🙂

    Para desarrollar para Android necesitarás Android SDK (Linux/OSX/Windows)
  • Para desarrollar para iPhone necesitarás una Mac (Reglas de Apple, no mías)

No te mostraré cómo instalar ninguno de los framework, SDK, etc. Hay buenos tutoriales y Guías de Cómo hacerlo que te enseñan, así que no quiero repetir lo que ya hay por ahí afuera.

Actualización:

El equipo de Appcelerator recién publicó tres documentos PDF sobre cómo instalar Titanium en cada plataforma soportada (Linux/OsX/Windows). Puedes descargarlos desde su blog

Que necesito olvidar?

Podría parecer extraño, pero realmente tienes que olvidarte de algunas cosas: DOM. ¿Por qué?. Porque no hay DOM aquí. Ya no estamos en el mundo HTML. Así que nada del HTML aplica aquí. Hay cosas similares (eventos por ejemplo), pero todo es sólo una analogía para hacerlo más fácil de usar).

Olvídate también de usar alguna librería (sí, sin MooTools, jQuery, etc…), o al menos al principio. Nuevamente: Por qué?, porque todas estas librerías están orientadas al DOM y están hechas para luchar con múltiples exploradores, para complacer a cada una de ellas y esto añade bloatware a tu código – código que no será usado de todos modos.

Por qué “al menos al principio”?. Bueno, mas tarde podrías extrañar algunas funciones y métodos que tienen estas librerías (digamos los métodos de arreglos como filter, each, unique, etc) pero podrás implementarlos de tu propia manera y evitar una librería de 150K.

Lo que NO aprenderás en estos tutoriales::

No aprenderás Javascript (necesitas saberlo antes). No aprenderás ObjC y/o Java (al final ese es el propósito de Titanium). Intentaré proveer el código para cosa que se aprenda así como de las capturas de pantallas y quizás vídeos.

y por último

Lo que aprenderás:

Día 1:

Algunos aspectos sobre la navegación, ventanas, vistas y pestañas – Lo básico de las interfaces. Intentaré explicar brevemente lo que hace cada uno de estos elementos y cómo usarlos.

Día 2:

Tablas y Selectores (O selectores de opción, el equivalente a la etiqueta ‘select’).

Día 3:

Ajax (de hecho XHR) – sobre cómo usar el HttpClient para páginas web, XML, JSON y YQL; el webview – cómo incrustar código html en tus apps.

Día 4:

Media – imágenes, películas y sonidos.

Día 5:

GPS y mapas.

Día 6:

Algunas mejoras visuales con animaciones y transformaciones.

Día 7:

Acerca de orientación y el acelerómetro.

Día 8:

Este será un día post-tutoriales donde realizaré un sumario de las lecciones, añadiré algunos enlaces y más.

Sé que dije siete días y que al final son 9, pero ni este ni el último cuentan como “días de aprendizaje”. Hay muchas cosas por fuera como scrollviews, sliders y algunos módulos – Facebook? – técnicas más avanzadas – como eventos app – pero espero que estos sean temas de otrhttp://nosoloweb.es/wp-admin/edit-comments.phpos tutoriales.

Díganme lo que piensan, si tienen ideas sobre lo que debería escribir – recuerden que es una guía para principiantes – o si tienen alguna pregunta.

Los veo en el día 1.

Actualización:

Documentos PDF sobre cómo instalar Titanium en cada una de las plataformas soportadas (Linux / OSX / Windows). Puedes descargarlas desde el blog de Appcelerator.

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.

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.