Using Appcelerator to create your mobile applications - Part 2

By Anonymous (not verified), 27 December, 2015
appcelerator

 

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.

 

appcelerator

 

Adding More Books to Our Mobile Library with Appcelerator Alloy

In this second part of our series (as promised in Part 1), we will focus on enhancing the application by incorporating additional books into our mobile library. We'll explore the necessary steps to modify some code, create an array of book objects, and style our application for a visually appealing experience.

1. Defining a Global Books Array

To store and manage the book collection globally, we'll define an array of objects in the Alloy.js file. This file, being the first to run in Appcelerator, is the perfect place for initializing global variables. Here's how we define the books object:

 
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/',  }, ];

 

Notice the inclusion of the image attribute, which stores links to book cover images.

2. Updating the Model

To accommodate the new image attribute, we need to modify the books.js model by adding a corresponding column:

 
columns: {  "title": "string",  "author": "string",  "date": "date",  "image": "string" }

 

3. Populating the Library

With the model and global book array ready, we can populate the library by iterating through the array and adding each book to the collection. Here's the implementation:

 
for (var i = 0, len = Alloy.Globals.books.length; i < len; i++) {  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);  book.save(); // Save the book to persist data. }

 

This for loop ensures all the books are added to the collection.

 

4. Updating the User Interface

Modifying index.xml

To display the book title and cover image, we update the XML layout as follows:

 
<TableView>  <TableViewRow class="booklist">    <ImageView class="image" />    <Label class="title" />  </TableViewRow> </TableView>

Here, we use Label for the title and ImageView for the book cover.

 

Applying Styles in index.tss

The styles for the elements are defined in styles/index.tss:

 
".booklist": {  width: Ti.UI.FILL,  height: 50, } ".title": {  left: 10,  color: "#000", } ".image": {  right: 10,  height: 40, }
  • Ti.UI.FILL ensures the rows span the full width of the device.
  • The height attribute specifies the row height.

 

5. Handling Book Selection

To enable interaction, we modify the click event to retrieve the selected book's data using its position in the array:

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

 

6. Styling the Details View

Updating bookdetails.xml

Add an ImageView element to display the book cover:

 
<Alloy>  <ImageView class="image" />  <View class="information">    <Label class="title" />    <Label class="author" />    <Label class="date" />  </View> </Alloy>
 

Adding Styles in bookdetails.tss

Define styles for the details view:

 
".image": {  left: 5,  top: 5,  height: 100,  width: 100, } ".information": {  left: 120, } ".title": {  color: "#000",  font: { fontSize: 24, fontFamily: 'Helvetica' }, } ".author, .date": {  color: "#bdbdbd",  font: { fontFamily: 'Helvetica' }, }

 

Displaying the Book Cover

In the bookdetails.js controller, pass the image URL to the ImageView:

 
$.bookImage.image = args.image;

 

Final Touches and Considerations

Using Alloy MVC in Appcelerator simplifies the creation and styling of complex views while ensuring code reusability. As your application grows, leveraging community-developed widgets and modules, such as those found on gitt.io, can greatly enhance your productivity.

 

Tip: By maintaining a separation of views and functionality, you can support platform-specific designs (e.g., Android and iOS) without duplicating controller logic.

 

We recommend you this video

Thumbnail
appcelerator

Tags

Weight
0
Featured
No
Hero
Title
Using Appcelerator to create your mobile applications - Part 2
Image
Text Color
White
Text Alignment
Left
Link Background Color
Tangerine
Size
Medium
Overlay effect
Hide overlay effect
Date
Premium
No