Alloy Framework in Titanium

Alloy framework, a new Appcelerator framework built on Node.js and integrated with Titanium Studio. It is based on the model-view-controller architecture with the goal of making Titanium development easier, faster and more scalable.

In this framework UI and App logic seperation is possibe. Alloy utilizes the model-view-controller (MVC) , which separates the application into three different components: 

• Models: The lowest level of the pattern which is responsible for maintaining data. It provide the business logic, containing the rules, data and state of the application.
• Views: This is responsible to provide the GUI components to the user.
• Controllers: Controllers contain the application logic which controls the interactions between View and Model.

Create Project

Create project using Titanium Studio

To create a new Alloy project start Titanium studio and follow these steps:

1. From the menu select File > new > Mobile Project. The New Mobile Project wizard appears.

2. Select Default Alloy Project from Available Templates box. Choose a Template and click Next button.

3. Complete all of the fields and click Finish button.

Directory Structure

When you open the project you will find the directories as displayed in the image below.

View

We declare the structure of GUI in a view. The file below define a window and a label in window. We can define here Id, Class, Platform Specific, Inline Events etc.

Index.xml

<Alloy>
	<Window class="container">
		<Label id="label" onClick="doClick" platform="android">Hello, Android User</Label>
		<Label id="label" onClick="doClick" platform="ios">Hello, iPhone User</Label>
	</Window>
</Alloy>

Style

The style file styles the components in the view file. For example the style below defines the label top to 50 and Label color is red.

Note: You can create a global style file called app.tss, which applies all styles defined inside to all views.

Index.tss

".container": {
	backgroundColor:"white"
},
"#Label": {
	top: "50dp",
        width: Ti.UI.SIZE,
	height: Ti.UI.SIZE,
	color: "red"
} 

Controller

Controllers contain the application logic which controls the interactions between View and Model. The file below define a doClick function which alerts the label value.

function doClick(e) {  
    alert($.label.text);
}

$.index.open();

Difference

The image below differentiate the classic Titanium App structure and Alloy App Structure.

With alloy developers can build apps not only faster, but a higher quality and reusabe components that can be used in every project.

Hope it Helps !

Anuj Khurana

[email protected]

http://oodlestechnologies.com/