Tag Archives: Appcelerator

Transparencias de la presentación de Titanium Appcelerator en The Event 2011

Os pongo aquí los slides de la ponencia de @dan_tamas en The Event 2011 Cáceres. Espero poder ponerlos tambien en formato HTML e incluir el video de la presentación lo antes posible.

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.

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.