Blog

  • Alloy Framework in Titanium

    Posted by Anuj Khurana | Last Updated: 04-Sep-14

    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.

    New Mobile Project

    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.

    New Project Details

     

    Directory Structure

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

    Directory Structure Image

    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.

    Titanium App Vs Alloy App

    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

    anuj.khurana@oodlestechnologies.com

    http://oodlestechnologies.com/

Tags: titanium , nodejs

View All PostsLeave a Comment
comments powered by Disqus

Mobile Applications

Video Content

Bigdata & NoSQL

SaaS Applications

Miscellaneous

Archives


Alexa Certified Site Stats for www.oodlestechnologies.com