The UI structure

Before we start placing UI elements on the screen, we need to have a coherent vision of how the controls will be placed on the screen. Since Titanium Studio does not provide us with a visual editor (as of writing this book), we need to determine where the controls will be placed (x and y coordinates) and how big they will be (width and height).

Our application's user interface will comprise of a single window and will be divided into three sections (views). Inside these views, we will place controls such as labels, buttons, and a scrolling list view.

The following figure is a visual representation of how the user interface elements will be stacked atop one another:

Why do we use views?

Views act as containers; they are usually used to group controls together and can be more easily moved around the screen if needed. One very simple example for this would be a toolbar; it is nothing else than a panel containing buttons when you think of it. Now, if you need to change the location of the toolbar on your screen, you can simply move the container, not every single button. A window is a top-level container that can contain other views. The major difference is that it can be opened and closed. Opening a window will load all of its containing views; closing that same window will automatically remove the views contained in it.

Tip

For developers coming from the Java or .NET world, views would be equivalent to Panels. As for developers more familiar with HTML, they can be considered as DIV tags.