Displaying Label In Crossplatform App Using Alloy With Titanium

Introduction :

Using Titanium label API with js we can easily add a label to a screen. But today we will see how could we can add a label in an application following Alloy. Alloy provides MVC architecture to make an application where we will have model view and controller. Generally view will contain the UI components and the contoller will have the associative js file in order to manipulate those views as per our requirement.

Description :

With Alloy in Titanium, we will have .xml file where we will assign our UI elements in xml format where as in traditional classical mode we used to assign elements in js file. So here we will create a window and a label to it. To do so we will have index.xml file in view folder and index.js in controller folder which will open the index.xml file to view on screen.

CODE BLOCK :

index.xml
 
<Alloy>
<Window>
<Label>Welcome to you all into the world of Alloy.</Label>
</Window>
</Alloy>

On above code block at first we have all the UI components should be contain under <Alloy> tag. Than we have defined <window> tag and than our <Label> tag to display message to the screen.

The properties of this UI elements can be assigned using class or ids or by tags as like as css in titanius style sheet called .tss file.

index.tss
 
"Window": {
backgroundColor:"white" // Define background color of every window
},
 
"Label": {// This style will be added to all the label tags
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
font : { fontSize : 100, fontWeight : 'bold'},
color: "#000"
}

Here we have mentioned the properties of window and label tag. So wherever we will use any and label these property will be automatically addede to those elements.

index.js
 
// Code to open index view
$.index.open();

So this index.js file will be under controller folder which will be automatically called and the above code snippet in index.js file will open the index view to the screen.

Summarry :

So using here we have seen how we can use the MVC pattern and show a label to the screen by following Alloy with Titanium.

Raju Mahato , Senior Developer, Mindfire Solutions.

Author : Raju Mahato

Displaying Label In Crossplatform App Using Alloy With Titanium

Leave a Reply

Subscribe With Us