Building views and windows

Now that we've created a base Alloy project, we're going to take a look at some of the differences between classic mobile development and using Alloy. Typically, in a classic project, you might put the following code into the app.js file:

var win = Ti.UI.createWindow({backgroundColor:"white"});

var view1 = Ti.UI.createView({width: 100, height: 100, backgroundColor:"red"});

var view2 = Ti.UI.createView({width: 50, height: 50, backgroundColor:"blue"});

view1.add(view2);

win.add(view1);

win.open();

How to do it...

Run the app in the simulator and you'll see the following:

This is a very simple example, but even with the few lines of code that you have written, you can see how complex the JavaScript could become. Imagine writing an app with many more visual elements—there would be a lot of JavaScript code!

In addition, any changes you may want to make to the visual look of the app, such as colors or layouts, would...