Titanium-alloy-framework-tutorial-3

APPCELERATOR TITANIUM TUTORIAL PART 3 – DYNAMIC LAYOUT

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.

- See more at: http://blog.foolprooflabs.com/2014/02/appcelerator-titanium-tutorial-part-3-dynamic-layout/#sthash.L5aJm5bK.dpuf