Time for action – adding a view to a window

In the app.js file add the following code that will add a view to the second tab:

var view = Ti.UI.createView({
    top:20,
    bottom:'50%',
    left:20,
    right:'50%',
    backgroundColor:'red'
});

win2.add(view);

What just happened?

A red box has been added to the top left of the second tab as shown in the following screenshot:

The beauty of views is that they act as containers for anything you add to them. So, if you add a button to a view and give the button details of where you want it positioned, for example, 10 pixels from the top and 10 pixels from the left, it will be positioned 10 pixels from the top of the view. Thus a view becomes a small drawing area independent of the window. If you add something to a view, its position is not relative to the window, but relative to the view. So if we add a button with a specific position to our view, the button will be positioned within the view not relative to the window, as we shall now see...