Utilizando Appcelerator para crear tus aplicaciones móviles - Parte 2

En la parte 1 de Utilizando Appcelerator para crear tus aplicaciones móviles, vimos brevemente las bondades de crear aplicaciones móviles con esta tecnología y explicamos con un ejemplo la forma de iniciar un proyecto MVC en Alloy. Esta aplicación de ejemplo, la cual llamamos *MiBiblioteca*, funciona para **Android** y **IOS** gracias a **Titanium SDK**.

 

En esta segunda parte (como había prometido en la parte 1) me enfocaré en las vistas y los estilos, pero también modificaré un poco el código para agregar más libros a nuestra Biblioteca móvil.

 

Para ello vamos a crear un array de objetos en el archivo **Alloy.js**. En **Appcelerator**, este archivo se ejecutará primero, antes que el **index.js**, así que es un buen lugar para guardar nuestro arreglo globalmente y así utilizarlo en cualquier controlador. Definimos el objeto *books* de forma global de la siguiente forma:

 

[prism:javascript] ……….. Alloy.Globals.books = [ { title : 'Cien años de soledad', author : 'Gabriel García Márquez', date: '05/06/1967', image: 'http://t3.gstatic.com/images?q=tbn:ANd9GcTTuwGK1J7Ond0fO9HkLUU84mkkb89rqYSNPbX4XGfFkcm3pm3u', }, { title : 'La Vorágine', author : 'José Eustasio Rivera', date: '25/11/1924', image: 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTk6iz9uSItZNCHylTyo35T7pF36aqdu7VdJi-p-sfvDNtf4eIkZbzrmQ', }, { title : 'La Metamorfosis', author : 'Franz Kafka', date: '1915', image: 'http://covers.feedbooks.net/book/3221.jpg?size=large&t=1445873615', }, { title : 'Noche sin fortuna', author : 'Andrés Caicedo', date: '1976', image: 'http://static1.squarespace.com/static/52b91981e4b05c06a6ce93a0/t/52dc8a18e4b0cb24e899f039/1390184984772/', } ]; ……….. [/prism:javascript]

 

Como vemos he agregado un nuevo atributo llamado *imagen* con links a las portadas de los libros que vamos a utilizar.

 

El siguiente paso es modificar el modelo, para guardar el nuevo atributo, es tan sencillo como parece, sólo se necesita agregar una nueva columna en el archivo **books.js**.

 

[prism:javascript] ……….. columns: { "title": "string", "author": "string", "date": "date", "image": "string" } ……….. [/prism:javascript]

 

Ya que tenemos el modelo actualizado y el arreglo de libros inicializado, es hora de modificar nuestra pantalla inicial, agregamos todos los libros a la biblioteca con el siguiente ciclo:

 

[prism:javascript] ……….. for (var i = 0, len = Alloy.Globals.books.length; i < len; i++) { /** * Add the books from array. */ var book = Alloy.createModel('books',{ title : Alloy.Globals.books[i].title, author : Alloy.Globals.books[i].author, date: Alloy.Globals.books[i].date, image: Alloy.Globals.books[i].image, }); mybooks.add(book); // Save the books. book.save(); } ……….. [/prism:javascript]

 

Es sencillo, un bucle *for* que itera sobre todos los objetos del array declarado en **Alloy.js** y los agrega a la colección de libros.

 

Nuestra lista de libros tendrá un título y una imagen, por lo que debemos cambiar el código de **index.xml** de la siguiente manera:

 

[prism:javascript] ……….. ……….. [/prism:javascript]

 

Lo que hice fue quitar los atributos de *TableViewRow* y utilizar un *Label* para el título y una *ImageView* para la imagen.

 

¡Ahora sí, démosle estilos!

 

En el anterior código utilicé tres clases (booklist, title e image), estas están declaradas en el archivo **styles/index.tss** y su notación es similar a como se hace en **CSS**

 

[prism:javascript] ……….. ".booklist": { width: Ti.UI.FILL, height: 50, } ".title": { left: 10, color: "#000", } ".image": { right: 10, height: 40, } ……….. [/prism:javascript]

 

*Ti.UI.FILL* significa que este *View* debe llenar todo el espacio disponible, para este caso la cada línea de libros ocupará todo el ancho de la pantalla del dispositivo y tendrá una altura de 50.

 

Antes de seguir con la vista de detalles, primero hay que modificar el evento de click sobre los libros, esto es, tomar la posición del libro en la lista y obtener del arreglo de libros el objeto en esa posición:

 

[prism:javascript] ……….. var selectedBook = Alloy.Globals.books[e.index]; var args = { title : selectedBook.title, author : selectedBook.author, date : selectedBook.date, image: selectedBook.image, }; ……….. [/prism:javascript]

 

Con esto, acabamos en el archivo **index.js**. Ahora sí, editemos la vista en **bookdetails.xml** Se debe agregar un objeto tipo *ImageView* para mostrar la imagen y agregar las clases respectivas para darle estilo, así:

 

[prism:javascript] ……….. ……….. [/prism:javascript]

 

Estas clases las definimos en **styles/bookdetails.tss** de la siguiente manera:

 

[prism:javascript] ……….. ".image": { left: 5, top: 5, height: 100, width: 100, } ".information": { left: 120, } ".title": { left: 0, color: "#000", font: { fontSize: 24, fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'Helvetica' } } ".author": { left: 0, color: "#bdbdbd", font: { fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'Helvetica', } } ".date": { left: 0, color: "#bdbdbd", font: { fontStyle: 'normal', fontWeight: 'normal', fontFamily: 'Helvetica' } } ……….. [/prism:javascript]

 

**NOTA**: Para declarar clases globales se utiliza el archivo **app.tss**

 

Ahora sólo falta agregar la imagen en el argumento al objeto *ImageView*. Esto lo hacemos en el controlador **bookdetails.js**

 

[prism:javascript] ……….. $.bookImage.image = args.image; ……….. [/prism:javascript]

 

Y el resultado para Android es...

 

 

 

 

 

 

Crear listas y darle estilos en Alloy con Appcelerator es una tarea relativamente sencilla, pero debemos tener en cuenta que mientras más compleja es la aplicación, más complejas serán las vistas. En este sentido se hace indispensable el uso de módulos y widgets pre diseñados por la comunidad de desarrolladores. Una página que recomiendo es http://gitt.io, donde hay disponibles una gran cantidad de widgets para Alloy y módulos de Titanium.

 

Una ventaja de **Alloy MVC** es la capacidad de reutilizar el código mediante la separación de la funcionalidad. Así, podemos tener vistas específicas para diferentes dispositivos (Android, IOS), mientras mantenemos relativaente el mismo código del controlador. Los controladores en **Alloy** generalmente tienen una relación uno-a-uno con sus vistas, lo cual permite tener acceso a todos los componentes de ellas y editarlas en cualquier momento.