Using Appcelerator to create your mobile application - Part 1
June 18, 2021
Share
Table of contents
Quick Access
Today there are many companies who are planning to develop mobile applications, either as a way of showing their information in a more accessible way or to attract new customers. It is a blooming industry for developers and users of this technology, because of the app stores, where any developer can upload an applications and make money with it.
This involves creating apps for the different available platforms (**Android, IOS Blackberry, Windows Phone**), but programming for each platform is more expensive and takes a lot more time than programming using a tool such as **Appcelerator** and its development environment **Titanium**.
Appcelerator is a tool that enables developers of all levels, program applications that can be installed on various platforms for smartphones.
I will show a basic tutorial to create a simple application using Appcelerator Studio.
One advantage of Appcelerator is that we can program our applications following the **MVC** architecture (Model-View-Controller) where, using **XML** and **CSS** we can separate the user interface, the business logic and data.
To create our new application we will select the framework Alloy in *File->New->Mobile App Project*
In the next window, we will give a name and an ID to our project. The name of the project will be *mylibrary*.
Additionally we can choose our deployment platform app.
Remember that we should have the necessary SDK.
Finally, select the version of **Titanium SDK** to use and this will finish the wizard setup.
Before continuing let's explain briefly the *mylib* application.
It is a simple application that uses a list and several labels to display a list of books of interest. Selecting one of them will show information about the book, such as the author's name and the publishing date.
The structure of a project in Alloy Appcelerator it is as shown in the picture
The app directory contains the models, views, controllers and application assets.
To continue, we create a new model. Right click on the project name and select *new->Alloy Model*
The setup wizard will help us create the model, for it, we will write as the model name *"books"* and will add the fields. In our case, it will only be *"title"* for the title of the book, *"author"* for the name of the author and *"date"* for the publishing date of the book.
We click "OK" and our model has been created.
To verify the configuration of the model we can go to *app/models/book.js* and it will show the code with the model configuration:
[prism:javascript]
………..
config: {
columns: {
"title": "string",
"author": "string",
"date": "date"
},
adapter: {
type: "sql",
collection_name: "books"
}
},
………..
[/prism:javascript]
The next step is to modify the driver *app/controllers/index.js*
The code should look as follows:
[prism:javascript]
/**
* We define the model mybooks
*/
var mybooks = Alloy.Collections.books;
/**
* We add a book
*/
var book = Alloy.createModel('books',{
title : 'Cien años de soledad',
author : 'Gabriel García Márquez',
date: '05/06/1967'
});
mybooks.add(book);
//Guardamos el libro
book.save();
$.index.open();
[/prism:javascript]
The previous code creates a new model called *mybooks* and the information is saved for the first book created
We continue to modify the index view in *app/views/index.xml* to list our books created in the controller.
[prism:javascript]
[/prism:javascript]
In this code, we create a new Collection *"books"* and define the view of the table that will display the title and author of the book. Additionally we initialize the *onclick* event, for when pressing the element it will display the screen with additional information of the book.
We must create the method *"detailsHandler"* in our *index.js* controller to define its operation
We return to the file *app/controllers/index.js* and add the following:
[prism:javascript]
/*
* @param {Object} e
* Origin Object
*/
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();
}
[/prism:javascript]
As we can see, we need to create a new controller that will be called *"bookdetails"*.
For it, we shall go in the directory *"controllers"* and add a new *"Alloy Controller"*. This will create *bookdetails.js* and *bookdetails.xml.*
Open Bookdetails.xml and create the new view, copy the following code:
[prism:javascript]
[/prism:javascript]
We have created a new screen with three labels about book's information.
We now open the *bookdetails.js* file and copy the following:
[prism:javascript]
var args = arguments[0] || {};
$.titleLabel.text = args.title || 'Default title';
$.authorLabel.text = args.author || 'Default Author';
$.dateLabel.text = args.date || ‘01/01/1900’;
[/prism:javascript]
That is all for now. To test our application, we selected a virtual or real device in the device selector and press **Run**.
In my case I will use a virtual device with **Android 4.1.1**.
When finished compiling our application, it will look like this:
We can add more books from a REST or manually, to enrich our library.
In a future blog we will explain how to apply styles to the screens and *Labels* to make our application look much better.
As we just saw in this example, **Appcelerator** is a tool that lets you create applications in a very simple and professional manner. Thanks to the **Alloy** framework our applications has the MVC architecture, which allows us to separate the user interface, business logic and data.
The biggest asset of this tool is that you can create a cross-platform application, by writing the code in a single programming language, saving time and money.
In the next window, we will give a name and an ID to our project. The name of the project will be *mylibrary*.
Additionally we can choose our deployment platform app.
Remember that we should have the necessary SDK.
Finally, select the version of **Titanium SDK** to use and this will finish the wizard setup.
Before continuing let's explain briefly the *mylib* application.
It is a simple application that uses a list and several labels to display a list of books of interest. Selecting one of them will show information about the book, such as the author's name and the publishing date.
The structure of a project in Alloy Appcelerator it is as shown in the picture
The app directory contains the models, views, controllers and application assets.
To continue, we create a new model. Right click on the project name and select *new->Alloy Model*
The setup wizard will help us create the model, for it, we will write as the model name *"books"* and will add the fields. In our case, it will only be *"title"* for the title of the book, *"author"* for the name of the author and *"date"* for the publishing date of the book.
We click "OK" and our model has been created.
To verify the configuration of the model we can go to *app/models/book.js* and it will show the code with the model configuration:
[prism:javascript]
………..
config: {
columns: {
"title": "string",
"author": "string",
"date": "date"
},
adapter: {
type: "sql",
collection_name: "books"
}
},
………..
[/prism:javascript]
The next step is to modify the driver *app/controllers/index.js*
The code should look as follows:
[prism:javascript]
/**
* We define the model mybooks
*/
var mybooks = Alloy.Collections.books;
/**
* We add a book
*/
var book = Alloy.createModel('books',{
title : 'Cien años de soledad',
author : 'Gabriel García Márquez',
date: '05/06/1967'
});
mybooks.add(book);
//Guardamos el libro
book.save();
$.index.open();
[/prism:javascript]
The previous code creates a new model called *mybooks* and the information is saved for the first book created
We continue to modify the index view in *app/views/index.xml* to list our books created in the controller.
[prism:javascript]
When finished compiling our application, it will look like this:
We can add more books from a REST or manually, to enrich our library.
In a future blog we will explain how to apply styles to the screens and *Labels* to make our application look much better.
As we just saw in this example, **Appcelerator** is a tool that lets you create applications in a very simple and professional manner. Thanks to the **Alloy** framework our applications has the MVC architecture, which allows us to separate the user interface, business logic and data.
The biggest asset of this tool is that you can create a cross-platform application, by writing the code in a single programming language, saving time and money.