Code while it is hot!

With our design in hand, we can now move on to create our user interface. Our entire application will be contained in a single window, so this is the first thing we will create. We will give it a title as well as a linear background gradient that changes from purple at the top to black at the bottom of the screen. Since we will add other components to it, we will keep its reference in the win variable:

var win = Ti.UI.createWindow({
  title: 'Unified Status',
  backgroundGradient: {
    type: 'linear',
    startPoint: { x: '0%', y: '0%' },
    endPoint: { x: '0%', y: '100%' },
    colors: [ { color: '#813eba'}, { color: '#000' } ]
  }
});

The top section

We will then add a new white label at the very top of the window. It will span 90% of the window's width, have a bigger font than other labels, and will have its text aligned to the left. Since this label will never be accessed later on, we will invoke our createLabel function right into the add function of the window...