Hello! Welcome to the second part of our tutorial about Apccelerator Titanium.
In our
previous tutorial we tackled the importance and installation of Appcelerator Titanium now we will tackle how to layout in Appcelerator Titanium.
The most popular Titanium framework is Alloy which follows the MVC architecture pattern. What is MVC? MVC stands for “Model-View-Controller”. This pattern divides the application to three interconnected parts and those are:
Model (*consists of application data)
View (*outputs representation of information)
Controller (*glue between model and view)
But for now let’s focus more on Views, which are important because they are the graphical representation of your application. There are two ways of creating a view. One is by creating using XML and the other one is by manually coding it. Let’s go first using XML:
Window (*an empty drawing space or a container)
View (*an empty drawing space or a container, commonly used for grouping widgets)
Commonly used widgets:
<Button></Button>
<Label></Label>
<TextField></TextField>
<ImageView></ImageView>
We will create something like this:
Now enough talk let’s begin.
***Delete all the codes inside index.xml that can be found on MyFirstProject/app/views
1) All XML Alloy markup must be inside the <Alloy></Alloy> tag:
2) Create an empty container by using <Window></Window> assign a reference id equal to “container” so that we can access it later by calling its id:
<Alloy>
<Window id=”container”>
</Window>
</Alloy>
3) Open index.tss that can be found inside MyFirstProject/app/styles and let’s customize the window we just created, replace it all by this:
“#container”:{
backgroundColor: ‘white’,
layout: ‘vertical’
}
It’s like customizing using CSS. First we put the reference id and then put it inside the “ #yourId ”.
Second we add “:{ }” and put all the attributes inside the curly braces and separate the attributes by comma.
4) Run the app and you will see something like this:
*an empty container with white background
5) Let’s add a view by adding <View></View> tag and assign reference id equal to “view_image”:
<Alloy>
<Window id=”container”>
<View id=”view_image”>
</View>
</Window>
</Alloy>
6) Go to index.tss and customize the view:
“#view_image”:{
top: ’10%’,
width: ’100%’,
height: ’35%’,
backgroundColor: ‘#4B0082′,
layout: ‘vertical’
}
*All child tags will follow the attributes of the parent tag:
We set the margin top 10% below the top of the parent tag and that is the “#container”. We specify the width and give the 100% width value of the “#container”, specify the height and give a 30% height value of the “#container” and finally we set the background color of the view to ‘#4B0082’ hexa value of indigo.
7) Lets add an image file inside the MyFirstProject/app/assets/images and show that image inside the “#view_image” by adding <ImageView/> and assign a reference id equal to “img_logo”:
<Alloy>
<Window id=”container”>
<View id=”view_image”>
<ImageView id=”img_logo”/>
</View>
</Window>
</Alloy>
8) Go to index.tss and customize the ImageView:
“#img_logo”:{
width: ’100%’,
height: ’100%’,
image:’/image/f_logo.png’
}
We specify the width and give the 100% width value of the “#view_image”, specify the height and give a 30% height value of the “#view_image” and finally we set the image path of it “/images/f_logo.png’ ”. You can see something like this:
9) Let’s add another view and assign an reference id = “view_welcomeMessage”:
<Alloy>
<Window id=”container”>
<View id=”view_image”>
<ImageView id=”img_logo”/>
</View>
<View id=”view_welcomeMessage”>
</View>
</Window>
</Alloy>
8) Go to index.tss and customize the View:
”#view_welcomeMessage”:{
width: ’100%’,
height: ’10%’,
backgroundColor: ‘#4B0082’
}
The added view will be positioned below the “#view_image” because the layout style that we chose for the “#container” is vertical so all the children will be vertically aligned.We changed the background color so that we can see the size of our view. You can see something like this:
9) Insert <Label></Label> tag inside the “#view_welcomeMessage”:
<Alloy>
<Window id=”container”>
<View id=”view_image”>
<ImageView id=”img_logo”/>
</View>
<View id=”view_welcomeMessage”>
<Label id=”lbl_welcomeMessage”>Welcome to my first cross platform app using Appcelerator Titanium
</Label>
</View>
</Window>
</Alloy>
10) Go to index.tss and customize the Label:
“#lbl_welcomeMessage”:{
textAlign: “center”,
font:{ fontFamily:’Georgia-Italic’ }
}
11) Let’s add another view for buttons and add three buttons there by adding <Button></Button> tag:
<Alloy>
<Window id=”container”>
<View id=”view_image”>
<ImageView id=”img_logo”/>
</View>
<View id=”view_welcomeMessage”>
<Label id=”lbl_welcomeMessage”>Welcome to my first cross platform app using Appcelerator Titanium
</Label>
</View>
<View id=”view_buttons”>
<Button id=”btn_lFacebook”>Log in with Facebook</Button>
<Button id=”btn_lGmail”>Log in with Gmail</Button>
<Button id=”btn_createAccount”>Create an account</Button>
</View>
</Window>
</Alloy>
11) Go to index.tss and customize the View and the Buttons:
//view
“#view_buttons”:{
layout:”vertical”,
top: “3%”,
height: ’50%’
}
//buttons
“#btn_lFacebook”:{
height:”18%”,
backgroundColor: “#87CEFA”,
width: “60%”
}
“#btn_lGmail”:{
top: “4%”,
height:”18%”,
backgroundColor: “red”,
width: “60%”, color: “white”
}
“#btn_createAccount”:{
top: “4%”,
height:”18%”,
backgroundColor: “#F0F8FF”,
width: “60%”
}
I believe you already knew it so no need for me to explain. I know you’re a genius :D remove the backgroundColor of “#view_welcomeMessage” and run your app you will see something like this:
Thank you for reading this tutorial, stay tuned for our
next tutorial about laying out using JS.
3) Let’s create the 3 Views:
It’s almost the same, It’s just that we are not using index.tss to customize our Views, we just insert the properties inside the parameter or “ myView({ property:’value’ ’’}); ”.
Choose Default Alloy Project and click next. 
Fill up the necessary fields and click finish. 
4) Run your App.
*If you’re not using a Mac you cannot download Xcode and in that case you can’t run your project in iOS simulator. The remedy is to copy your project and find a Mac and compile your project there. Cheers now you run your app in IOS and Android at the same time without writing any line of codes. On the