PPCELERATOR TITANIUM TUTORIAL PART 2 – LAYING OUT USING ALLOY
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>
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:
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:
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”:
6) Go to index.tss and customize the view:
*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”:
8) Go to index.tss and customize the ImageView: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”:
8) Go to index.tss and customize the View:
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”:
10) Go to index.tss and customize the Label:11) Let’s add another view for buttons and add three buttons there by adding <Button></Button> tag:
11) Go to index.tss and customize the View and the Buttons:
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.
