Using Appcelerator to create your mobile application - Part 1

Today, many companies are eager to develop mobile applications to share information more accessibly and attract new customers. The industry is booming for both developers and users, fueled by app stores where developers can upload applications and earn revenue. 

However, creating apps for each platform (Android, iOS, Blackberry, Windows Phone) individually can be costly and time-consuming. To streamline this process, tools like Appcelerator and its development environment Titanium offer a solution by enabling developers to create cross-platform apps efficiently.

Introduction to Appcelerator and MVC Architecture

Appcelerator provides a platform for developers of all levels to create applications that can run on multiple smartphone platforms. One of its major advantages is the use of MVC (Model-View-Controller) architecture, allowing developers to separate user interface, business logic, and data. Using XML and CSS, this approach helps structure the application for easy maintenance and scalability.

Getting Started with Appcelerator: Creating a New Project

1. Set Up a New Project: Begin by selecting File > New > Mobile App Project in Appcelerator Studio and choose the Alloy framework. In the next window, name your project (e.g., mylibrary) and provide an ID. Select the target deployment platforms and Titanium SDK version to complete the setup.
2. Project Overview: The mylibrary app will showcase a list of books. When a book is selected, additional information like the author’s name and publication date will be displayed.
3. Directory Structure: The Alloy framework organizes the project into the app directory, containing models, views, controllers, and assets. This setup aligns with MVC principles for clear code organization.

Creating the Book Model

1. Model Setup: Right-click the project name and select New > Alloy Model. Name the model books and add fields: title (book title), author (author’s name), and date (publication date).

2. Configure the Model: To verify, check app/models/book.js, which should define the model structure as follows:

    

   config: {    columns: {        "title": "string",        "author": "string",        "date": "date"    },    adapter: {        type: "sql",        collection_name: "books"    } }

Creating the Controller and Adding Books

1. Modify the Controller: In app/controllers/index.js, define the model mybooks and add a sample book. The code should look like this:

    

   var mybooks = Alloy.Collections.books; var book = Alloy.createModel('books', {    title: 'Cien años de soledad',    author: 'Gabriel García Márquez',    date: '05/06/1967' }); mybooks.add(book); book.save(); $.index.open();
2. Creating the View: Open app/views/index.xml to define the interface that displays the book list. Set up the collection view and event handler for displaying book details.

Handling Book Selection and Displaying Details

1. Define the Details Handler: In app/controllers/index.js, add the following function to handle book selectio

    

   function detailsHandler(e) {    var selectedBook = e.source;    var args = {        title: selectedBook.title,        author: selectedBook.author,        date: selectedBook.date    };    var bookview = Alloy.createController('bookdetails', args).getView();    bookview.open(); }

2. Creating the Details Controller: Add a new controller bookdetails with bookdetails.js and bookdetails.xml files. Set up the XML view to display book details and add the following code in bookdetails.js to populate the labels:

    

    

   var args = arguments[0] || {}; $.titleLabel.text = args.title || 'Default title'; $.authorLabel.text = args.author || 'Default Author'; $.dateLabel.text = args.date || '01/01/1900';

Testing and Running the Application

Once completed, select a virtual or real device in the device selector, and press Run. For this example, a virtual device with Android 4.1.1 is used to demonstrate the functionality.

The app will display a list of books, and selecting one will show additional details about the selected book. Additional books can be added manually or via a REST API to enhance the library.

In this example, we explored how Appcelerator and the Alloy framework allow developers to build cross-platform applications efficiently. By using MVC architecture, developers can maintain clear separation between the user interface, business logic, and data. Appcelerator’s biggest advantage is the ability to create a single codebase for multiple platforms, saving time and reducing development costs. Future articles will cover how to apply styles to improve the visual appeal of the application.

We recommend you this video