Using Appcelerator to create your mobile applications - Part 2
June 18, 2021
Table of contents
Quick Access
In the 1st part Using Appcelerator to create your mobile applications - Part 1, we briefly discussed the benefits of creating mobile applications with this technology and explained with an example how to start a project in Alloy MVC. This sample application, which will be called MiBiblioteca, works for Android and IOS thanks to Titanium SDK.
In this second part (as promised in Part 1) I will focus on the sights and styles, but also will modify some code to add more books to our mobile library.
To do this we will create an array of objects in the file Alloy.js. In Appcelerator, This file will run first, before the index.js, so it's a good place to keep our arrangement globally and thus use it in any controller.
Books define the object globally as follows:
[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] As seen, we have added a new attribute called *image* with links to the covers of the books that we will use.
The next step is to modify the model to save the new attribute, it is as simple as it seems, only you need to add a new column in the file **books.js**.
[prism:javascript] ……….. columns: { "title": "string", "author": "string", "date": "date", "image": "string" } ……….. [/prism:javascript]
Since we have the updated model and arrangement of uninitialized books, it's time to change our initial screen, add all the books to the library with the following cycle:
[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]
It is simple, a bucle *for* which will array all the objects declared in **Alloy.js** and will add them to your book collection.
Our list of books have a title and an image, so we must change the code **index.xml** as follows:
[prism:javascript] ………..
What I did was remove the attributes of *TableViewRow* and use a *Label* for the title and *ImageView* for the image.
Now, ltes give it some styles!
In the above code I used three classes (book list, title and image), these are declared in the file **styles / index.tss** and its notation is similar to as is done in **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* means that this *View* must fill all available space, in this case each line of books occupy the entire width of the device screen and have a height of 50.
Before proceeding with the details view, you must first change the event click on the books, that is, take the position of the book on the list and get the book under the object at that position:
[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]
With this, we end up in the file **index.js**. Now, we will edit the look in **bookdetails.xml** You must add an object type *ImageView* to display the image and add the respective classes to style as well:
[prism:javascript] ………..
**NOTE**: To declare global class files, **app.tss** is used.
Now I have to add the image to the argument *ImageView* object. We do this in the controller **bookdetails.js**
[prism:javascript] ……….. $.bookImage.image = args.image; ……….. [/prism:javascript]
Y el resultado para Android es...
Create lists and give Alloy styles with Appcelerator is a relatively simple task, but we must bear in mind that the more complex the application, the more complex will be the views. In this regard it is essential the use of widgets pre modules and designed by the developer community. A site that I would recommend is http://gitt.io, where you will find a whole lot of Alloy widgets and Titanium Modules.
An advantage of **Alloy MVC** is the ability to reuse code by separating functionality. Thus, we can have specific views for different devices (Android, IOS), while keeping the same driver code. **Alloy drivers** usually have a one-on-one with their views, which allows access to all components and edit them at any time.