To follow along with this recipe, you'll need Titanium installed plus the appropriate SDKs. All the examples generally work on either platform unless specified explicitly at the start of a particular recipe.

The quickest way to get started is by using Appcelerator Studio, a full-fledged Integrated Development Environment (IDE) that you can download from the Appcelerator website.

If you prefer, you can use your favorite IDE, such as TextMate, Sublime Text, Dashcode, Eclipse, and so on. Combined with the Titanium CLI, you can build, test, deploy, and distribute apps from the command line or terminal. However, for the purposes of this book, we're assuming that you'll be using Appcelerator Studio, which you can download from https://my.appcelerator.com/auth/signup/offer/community.

To prepare for this recipe, open Appcelerator Studio and log in if you have not already done so. If you need to register a new account, you can do so for free from within the application. Once you are logged in, navigate to File | New | Mobile App Project and select the Classic category on the left (we'll come back to Alloy later on), then select Default Project and click on Next. The details window for creating a new project will appear. Enter LoanCalc, the name of the app, and fill in the rest of the details with your own information, as shown in the following screenshot. We can also uncheck the iPad and Mobile Web options, as we'll be building our application for the iPhone and Android platforms only:

First, open the Resources/app.js file in your Appcelerator Studio. If this is a new project, the studio creates a sample app by default, containing a couple of Windows inside of a TabGroup; certainly useful, but we'll cover tabgroups in a later recipe, so we go ahead and remove all of the generated code. Now, let's create a Window object, to which we'll add a view object. This view object will hold all our controls, such as textfields and labels.

In addition to creating our base window and view, we'll also create an imageview component to display our app logo before adding it to our view (you can get the images we have used from the source code for this chapter; be sure to place them in the Resources folder).

Finally, we'll call the open() method on the window to launch it:

//create a window that will fill the screen
var win1 = Ti.UI.createWindow({
  backgroundColor: '#BBB'  
});

//create the view, this will hold all of our UI controls 
//note the height of this view is the height of the window //minus 20 points for the status bar and padding
var view = Ti.UI.createView({
  top: 20,
bottom: 10,
  left: 10,
  right: 10,
  backgroundColor: '#fff',
  borderRadius: 2
});


//now let's add our logo to an imageview and add that to our //view object. By default it'll be centered.
var logo = Ti.UI.createImageView({
  image: 'logo.png',
  width: 253,
  height: 96,
  top: 10
});
view.add(logo);

//add the view to our window
win1.add(view);

//finally, open the window to launch the app
win1.open();

Firstly, it's important to explain the differences between windows and views, as there are a few fundamental differences that may influence your decision on using one compared to the other. Unlike views, windows have some additional abilities, including the open() and close() methods.

If you are coming from a desktop development background, you can imagine a Window as the equivalent of a form or screen; if you prefer web analogies, then a window is more like a page, whereas views are more like a Div.

In addition to these methods, windows have display properties such as full screen and modal; these are not available in views. You'll also notice that while creating a new object, the create keyword is used, such as Ti.UI.createView() to create a view object. This naming convention is used consistently throughout the Titanium API, and almost all components are instantiated in this way.

Windows and views can be thought of as the building blocks of your Titanium application. All your UI components are added to either a window, or a view (which is the child of a Window). There are a number of formatting options available for both of these objects, the properties and syntax of which will be very familiar to anyone who has used CSS in the past. Note that these aren't exactly like CSS, so the naming conventions will be different. Font, Color, BorderWidth, BorderRadius, Width, Height, Top, and Left are all properties that function in exactly the same way as you would expect them to in CSS, and apply to windows and almost all views.