Appcelerator Titanium Tutorial part 3 – Dynamic Layout

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

On the last part of the tutorial we created Views using the Alloy markup. Now we will try to create a View using the hard way and you have to decide which way do you prefer. Using the xml or using the .js file ?

 1) Open MyFirstProject/app/controller/index.js delete all the codes. Run the app and you will see something like this:

                      *stuck in the splash screen?

Of Course because we deleted “$.index.open();” which opens the Alloy markup or the index.xml. Because of that we must create it programmatically.

2) Open index.js and write this code.

 var container = Ti.UI.createWindow({

                  backgroundColor: ‘white’

                 });

container.open();

Now if you run your app, did it display a white screen? how did that work?

we just simply convert:

 3) Let’s create the 3 Views:

var container = Ti.UI.createWindow({

          backgroundColor: ‘white’,

          layout: ‘vertical’

});

var container = Ti.UI.createWindow({

       backgroundColor: ‘white’,

       layout: ‘vertical’

});

var view_image = Ti.UI.createView({

       top: ‘10%’,

       width: ‘100%’,

       height: ‘35%’,

       backgroundColor: ‘#4B0082

‘});

var view_welcomeMessage = Ti.UI.createView({

     width: ‘100%’,

     height: ‘10%’

});

var view_buttons = Ti.UI.createView({

    layout:”vertical”,

    top: “3%”,

    height: ‘50%’

});

container.add(view_image);

container.add(view_welcomeMessage);

container.add(view_buttons);

container.open();

First we created the three views then we add it on the container and then open the container. As you notice here:

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’ ’’}); ”.

4) Let’s create an ImageView then add it to the view_image:

//creating imageview

var img_logo = Ti.UI.createImageView({

      width: ‘100%’,

      height: ‘100%’,

      image:’/image/f_logo.png’

});

//adding the imageView to the view_image

view_image.add(img_logo);

5) Let’s create a Label and add it to the view_welcomeMessage:

//label

var lbl_welcomeMessage  = Ti.UI.createLabel({

     text:’Welcome to my first cross platform app using Appcelerator Titanium’,

     textAlign: “center”,

     font:{ fontFamily:’Georgia-Italic’ }

});

//add to the view_welcomeMessage

view_welcomeMessage.add(lbl_welcomeMessage);

6) Let’s create Buttons and add it to the view_buttons:

//creating buttons

var btn_lFacebook = Ti.UI.createButton({

      height:”18%”,

      backgroundColor: “#87CEFA”,

      width: “60%”,

      title: ‘Log in with Facebook’

});

var btn_lGmail = Ti.UI.createButton({

      top: “4%”,

      height:”18%”,

      backgroundColor: “red”,

      width: “60%”,

      color: “white”,

      title: ‘Log in with Gmail’

});

var btn_createAccount = Ti.UI.createButton({

      top: “4%”,

      height:”18%”,

      backgroundColor: “#F0F8FF”,

      width: “60%”,

      title: ‘Create an account’

});

//adding it to the view_buttons

view_buttons.add(btn_lFacebook);

view_buttons.add(btn_lGmail);

view_buttons.add(btn_createAccount);

run the project and you will see something like this:

Conclusion: Creating Views using xml is a lot easier  than creating it dynamically or programmatically. But sometimes creating Views dynamically gives us an advantage especially when displaying a complex data. For example if you will retrieve a lot of data and display it on a TableView row, it is a lot easier creating it dynamically with the use of a loop,in that case your row will be created repeatedly rather than creating it using xml one by one.

Stay tuned for our next tutorial.

 



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 :) !

3 thoughts on “Appcelerator Titanium Tutorial part 3 – Dynamic Layout

  1. […] you for reading this tutorial, stay tuned for our next tutorial about laying out using […]

  2. Daniel Murphy says:

    My code did not run. Can you check my code and see why it won’t compile?

    [ERROR] Application Installer abnormal process termination. Process exit value was 1

    http://codepen.io/anon/pen/ibame

    • Phil Smithson says:

      yes you’re missing the closing quote mark on line 8, it should be width:”100%”.

      Also on line 62, you open the quotes with a double quote then end it with a single, it should be title: “Log in with Gmail” instead of title: “Log in with Gmail’ [same problem on line 70]

      Happy to help.

Leave a Reply

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


*