Appcelerator Titanium Tutorial part 2 – Laying Out Using Alloy

Interested in a hands-on tutorial in Titanium? Building Cross-Platform Apps using Titanium, Alloy, and Appcelerator Cloud Services

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:

<Alloy>

</Alloy> 

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>

           </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 😀 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.



About Alvin Tandoc

I'm a student from University of Pangasinan taking the course of Bachelor of Science in Information Technology. My dream is to become a great programmer and develop apps that can make peoples life better. I'm doing some blog post because I want to help my co-dreamers to achieve their dreams. I'm not an expert I'm just a newbie in the field of programming so feel free to correct me if you find something wrong about my posts. Cheers :) !

15 thoughts on “Appcelerator Titanium Tutorial part 2 – Laying Out Using Alloy

  1. […] now you run your app in IOS and Android at the same time without writing any line of codes. On the next tutorial I will guide you on how the code structure of appcelerator titanium works. Stay tuned good […]

  2. […] the last part of the tutorial we created Views using the Alloy markup. Now we will try to create a view using the […]

  3. amit says:

    not running… this program was very confusing u change simple 2 files number of times without checking effect.. this is not running its waste of time….

    • Phil Smithson says:

      Hi Amit, Sorry to hear you had trouble with this. What was the exact problem you encountered please? We’d like to help you resolve it.

  4. rifaideen says:

    when i following your tutorial during the first run step it throws the error Cannot call method “open” of undefined.
    here is my code in index.xml

    and index.js code was
    function doClick(e) {
    alert($.label.text);
    }

    $.index.open();

    • Talamasca says:

      Hi, i’ve the same error.
      to fix it i’ve just replace index from $.index.open() by the id of window.
      so it becomes $.container.open()
      but i don’t know if it’s the good way

      • Phil Smithson says:

        Sorry @rifaideen and @talamasca (and anyone else affected), that is a mistake in the code that I’ve just updated. I’ve removed the ‘id=”container”‘ attribute from the tag so now $.index.open() will work fine. @Talamasca, your solution is also valid as long as you keep the id=’container’ on the tag

    • Edgar says:

      hello, for me The solution was change of “id” for “class”, like that: class=”container”

  5. febinDonz says:

    very good tutorial.

    simply explained.

    Thanku very much

  6. Sydney says:

    Thanks for a simple tutorial with titanium layout. I’m starting to learn titanium now, my only problem with titanium is we cannot see the layout before we run in to the emulator or android device. That compiling takes a lot of time 😀

    • Phil Smithson says:

      Yes! We had the same problem for quite some time. It really takes a long time to compile and re-run the app, what a pain. If only there were a solution……thankfully there is 😛 install this: http://tishadow.yydigital.com and build your app with “–shadow” from the terminal then any changes you make will be pushed to the simulator/device very quickly (~2 seconds)

  7. ngita says:

    Thanks for tutorial, i have a problem when build to genymotion i get following errors :

    uncaught type error : Object #UI has no method createImageView

    • ngita says:

      My code : “index.xml”

      ==> index.tss
      “#view_image”:{
      top : ‘10%’,
      width : ‘100%’,
      height: ‘35%’,
      backgroundColor : ‘#4B0082’,
      layout: ‘vertical’
      }
      “#img_logo”:{
      width : ‘100%’,
      height: ‘100%’
      }

      ==> index.js

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

      $.index.open();

      ==> I created “images” folder inside the “app” folder, is that correct?

    • Phil Smithson says:

      Hi Ngita, thanks for your comment. The issue you reported “Object #UI has no method createImageView”….can you send the full code yo uhave there? Are you sure you’re doing “Ti.UI.createImageView” somewhere?

Leave a Reply

Your email address will not be published. Required fields are marked *


*