Coding the application

Now that we have a better idea of how our application will look, and most importantly, how it will be structured, we will go ahead and translate that into code.

Let's do some scaffolding

We can start creating our window and views, and add controls to them. While these controls won't have any interaction (yet), it will be much easier down the road to implement interactions once everything is in place. As we did before, we will open the app.js file and clear all its content in order to have a clean slate.

Since every single application needs at least one window, ours is no exception to the rule. So, we will create one using the Ti.UI.createWindow function and set its title to Sili. We also need to add additional views and controls later on in the code, hence we store its reference in the win variable:

var win = Ti.UI.createWindow({
  backgroundColor: '#ffffff',
  title: 'Sili',
  layout: 'vertical'
});

Our top view will serve as a header containing the application's title...