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

June 18, 2021

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.