Appcelerator Titanium Smartphone App Development Cookbook

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.

We are going to create two separate windows. One of these will be defined inline, and the other will be loaded from an external CommonJS JavaScript module.

Before you write any code, create a new JavaScript file called window2.js and save it in your Resources directory, the same folder in which your app.js file currently resides.

Now open the window2.js file you just created and add the following code:

//create an instance of a window
module.exports = (function(){
var win = Ti.UI.createWindow({
  backgroundColor: '#BBB',
  title: 'Settings'
});

return win;
})();

If you have been following along with the LoanCalc app so far, then delete the current code in the app.js file that you created and replace it with the following source. Note that you can refer to the Titanium SDK as Titanium or Ti; in this book, I'll be using Ti:

//create tab group
var tabGroup = Ti.UI.createTabGroup();

//create the window
var win1 = Ti.UI.createWindow({
  backgroundColor: '#BBB',
  title: 'Loan Calculator'
});

//create the view, this will hold all of our UI controls 
var view = Ti.UI.createView({
top: 10,
  bottom: 10,
  left: 10,
  right: 10,
  backgroundColor: '#fff',
  borderRadius: 2,
  layout: 'vertical'
});

//now let's add our logo to an imageview and add that to our //view object
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);

//add the first tab and attach our window object (win1) to it
var tab1 = Ti.UI.createTab({  
    icon:'calculator.png',
    title:'Calculate',
  
    window: win1
});

//create the second window for settings tab
var win2 = require("window2");


//add the second tab and attach our external window object //(win2 / window2) to it
var tab2 = Ti.UI.createTab({  
    icon:'settings.png',
    title:'Settings',
    window: win2
});


//now add the tabs to our tabGroup object
tabGroup.addTab(tab1);  
tabGroup.addTab(tab2);  

//finally, open the tabgroup to launch the app
tabGroup.open();

Logically, it's important to realize that the tabgroup, when used, is the root of the application and it cannot be included via any other UI component. Each tab within the tabgroup is essentially a wrapper for a single window.

Windows should be created and assigned to the window property. At the time of writing this book, it may be possible to still use the url property (depending on the SDK you are using), but do not use it as it will be removed in later SDKs. Instead, we'll be creating windows using a CommonJS pattern, which is considered the proper way of developing modular applications.

The tabs icon is loaded from an image file, generally a PNG file. It's important to note that in both Android and the iPhone, all icons will be rendered in grayscale with alpha transparency—any color information will be discarded when you run the application.

You'll also notice in the Resources folder of the project that we have two files for each image—for example, one named settings.png and one named settings@2x.png. These represent normal and high-resolution retina images, which some iOS devices support. It's important to note that while specifying image filenames, we never use the @2x part of the name; iOS will take care of using the relevant image, if it's available. We also specify all positional and size properties (width, height, top, bottom, and so on) in non-retina dimensions.

This is also similar to how we interact with images in Android: we always use the normal filename, so it is settings.png, despite the fact there may be different versions of the file available for different device densities on Android.

Finally, notice that we're in the view and we're using vertical as a layout. This means that elements will be laid out down the screen one after another. This is useful in avoiding having to specify the top values for all elements, and, if you need to change one position, having to change all the elements. With a vertical layout, as you modify one element's top or height value, all others shift with it.

Apple can be particularly picky when it comes to using icons in your apps; wherever a standard icon has been defined by Apple (such as the gears icon for settings), you should use the same.

A great set of 200 free tab bar icons is available at http://glyphish.com/.

Open up your app.js file, and put these two variables at the top of your code file, directly under the tabgroup creation declaration. These are going to be the default values for our interest rate and loan length for the app:

//application variables
var numberMonths = 36; //loan length
var interestRate = 6.0; //interest rate

Let's create labels to identify the input fields that we'll be implementing later on. Type the following source code into your app.js file. If you are following along with the LoanCalc sample app, this code should go after your imageview logo, added to the view from the previous recipe:

var amountRow = Ti.UI.createView({
  top: 10,
  left: 0,
  width: Ti.UI.FILL,
  height: Ti.UI.SIZE
});

//create a label to identify the textfield to the user
var labelAmount = Ti.UI.createLabel({
  width : Ti.UI.SIZE,
  height : 30,
  top : 0,
  left : 20,
  font : {
    fontSize : 14,
    fontFamily : 'Helvetica',
    fontWeight : 'bold'
  },
  text : 'Loan amount:   $'
});

amountRow.add(labelAmount);

view.add(amountRow);

var interestRateRow = Ti.UI.createView({
  top: 10,
  left: 0,
  width: Ti.UI.SIZE,
  height: Ti.UI.SIZE
});

//create a label to identify the textfield to the user
var labelInterestRate = Ti.UI.createLabel({
  width : Ti.UI.SIZE,
  height : 30,
  top : 0,
  left : 20,
  font : {
    fontSize : 14,
    fontFamily : 'Helvetica',
    fontWeight : 'bold'
  },
  text : 'Interest Rate:  %'
});

interestRateRow.add(labelInterestRate);

view.add(interestRateRow);

var loanLengthRow = Ti.UI.createView({
  top: 10,
  left: 0,
  width: Ti.UI.FILL,
  height: Ti.UI.SIZE
});

//create a label to identify the textfield to the user
var labelLoanLength = Ti.UI.createLabel({
  width : 100,
  height : Ti.UI.SIZE,
  top : 0,
  left : 20,
  font : {
    fontSize : 14,
    fontFamily : 'Helvetica',
    fontWeight : 'bold'
  },
  text : 'Loan length (' + numberMonths + ' months):'
});

loanLengthRow.add(labelLoanLength);

view.add(loanLengthRow);

By now, you should notice a trend in the way in which Titanium instantiates objects and adds them to views/windows, as well as a trend in the way formatting is applied to most basic UI elements using the JavaScript object properties. Margins and padding are added using the absolute positioning values of top, left, bottom, and right, while font styling is done with the standard font properties, which are fontSize, fontFamily, and fontWeight in the case of our example code.

Here are a couple of important points to note:

Type the following code after the view has been created but before adding that view to your window. If you've been following along from the previous recipe, this code should be entered after your labels have been created:

//creating the textfield for our loan amount input
var tfAmount = Ti.UI.createTextField({
  width: 140,
  height: 30,
  right: 20,
   borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
   returnKeyType:Ti.UI.RETURNKEY_DONE,
  hintText: '1000.00'
});

amountRow.add(tfAmount);

//creating the textfield for our percentage interest 
//rate input
var tfInterestRate = Ti.UI.createTextField({
  width: 140,
  height: 30,
  right: 20,
   borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
   returnKeyType:Ti.UI.RETURNKEY_DONE,
  value: interestRate
});

interestRateRow.add(tfInterestRate);

In this example, we created a couple of basic textfield with a rounded border style, and introduced some new property types that don't appear in labels and imageviews, including hintText. The hintText property displays a value in the textfield, which disappears when that textfield has focus (for example, when a user taps it to enter some data using their keyboard).

The user input is available in the textfield property called value; as you must have noted in the preceding recipe, accessing this value is simply a matter of assigning it to a variable (for example, var myName = txtFirstName.value), or using the value property directly.

textfield are one of the most common components in any application, and in Titanium there are a couple of points and options to consider whenever you use them.

Ti.UI.INPUT_BORDERSTYLE_BEZEL
Ti.UI.INPUT_BORDERSTYLE_LINE
Ti.UI.INPUT_BORDERSTYLE_NONE
Ti.UI.INPUT_BORDERSTYLE_ROUNDED

Note that toolbars are iOS-specific, and currently they may not be available for Android in the Titanium SDK.

Open your app.js file and type the following code. If you have been following along from the previous recipe, this code should replace the previous recipe's code for adding the amount and interest rate textfields:

//flexible space for button bars
var flexSpace = Ti.UI.createButton({
  systemButton:Ti.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});
 
//done system button
var buttonDone = Ti.UI.createButton({
    systemButton:Ti.UI.iPhone.SystemButton.DONE,
    bottom: 0
});

//add the event listener 'click' event to our done button
buttonDone.addEventListener('click', function(e){
    tfAmount.blur();
    tfInterestRate.blur();
    interestRate = tfInterestRate.value;
});

//creating the textfield for our loan amount input
var tfAmount = Ti.UI.createTextField({
    width: 140,
    height: 30,
    right: 20,
    borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    returnKeyType:Ti.UI.RETURNKEY_DONE,
    hintText: '1000.00',
    keyboardToolbar: [flexSpace,buttonDone],
    keyboardType:Ti.UI.KEYBOARD_PHONE_PAD
});
amountRow.add(tfAmount);

//creating the textfield for our percentage interest rate //input
var tfInterestRate = Ti.UI.createTextField({
    width: 140,
    height: 30,
    right: 20,
    borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED,
    returnKeyType:Ti.UI.RETURNKEY_DONE,
    value: interestRate,
    keyboardToolbar: [flexSpace,buttonDone],
    keyboardType:Ti.UI.KEYBOARD_PHONE_PAD
});

interestRateRow.add(tfInterestRate);

In this recipe, we created a textfield and added it to our view. You should have noticed by now how many properties are universal among the different UI components: width, height, top, and right are just four properties that are used in our textfield called tfAmount and were used in previous recipes for other components.

Many touchscreen phones do not have physical keyboards; however, we are using a touchscreen keyboard to gather our input data. Depending on the data you require, you may not need a full keyboard with all the QWERTY keys, and you may want to just display a numeric keyboard, for example, if you were using the telephone dialing features on your iPhone or Android device.

Additionally, you may require the QWERTY keys, but in a specific format. A custom keyboard makes the user input quicker and less frustrating for the user by presenting custom options, such as keyboards for inputting web addresses and e-mails with all the www and @ symbols in convenient touch locations.

In this example, we're setting keyboardType to Ti.UI.KEYBOARD_PHONE_PAD, which means that whenever the user clicks on that field, they see a numeric keypad.

In addition, we are specifying the keyboardToolbar property to be an array of our Done button as well as the the flexspace button, so we get a toolbar with the Done button. The event listener added to the Done button ensures that we can pick up the click, capture the values, and blur the field, essentially hiding the keypad.

Try experimenting with other keyboard styles in your Titanium app!

Ti.UI.KEYBOARD_DEFAULT
Ti.UI.KEYBOARD_EMAIL
Ti.UI.KEYBOARD_ASCII
Ti.UI.KEYBOARD_URL
Ti.UI.KEYBOARD_NUMBER_PAD
Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION
Ti.UI.KEYBOARD_PHONE_PAD

If you're following with the LoanCalc app, the next code should replace the code in your window2.js file. We'll also add a label to identify what the switch component does and a view component to hold it all together:

//create an instance of a window
module.exports = (function(){
var win = Ti.UI.createWindow({
  backgroundColor: '#BBB',
  title: 'Settings'
});

//create the view, this will hold all of our UI controls 
var view = Ti.UI.createView({
  width: 300,
  height: 70,
  left: 10,
  top: 10,
  backgroundColor: '#fff',
  borderRadius: 5
});

//create a label to identify the switch control to the user
var labelSwitch = Ti.UI.createLabel({
    width: Ti.UI.SIZE,
    height: 30,
    top: 20,
    left: 20,
    font: {fontSize: 14, fontFamily: 'Helvetica', 
          fontWeight: 'bold'},
    text: 'Auto Show Chart?'
});
view.add(labelSwitch);

//create the switch object
var switchChartOption = Ti.UI.createSwitch({
  right: 20,
  top: 20,
  value: false
});
view.add(switchChartOption);


win.add(view);

return win;
})();

Now let's write the slider code; go back to your app.js file and type the following code underneath the interestRateRow.add(tfInterestRate); line:

//create the slider to change the loan length
var lengthSlider = Ti.UI.createSlider({
  width: 140,
  top: 200,
  right: 20,
  min: 12,
  max: 60,
  value: numberMonths,
  thumbImage: 'sliderThumb.png',
  highlightedThumbImage: 'sliderThumbSelected.png'
});

lengthSlider.addEventListener('change', function(e){
  //output the value to the console for debug
   console.log(lengthSlider.value); 
   //update our numberMonths variable
  numberMonths = Math.round(lengthSlider.value); 
   //update label
  labelLoanLength.text = 'Loan length (' + Math.round(numberMonths) + ' months):';
});

loanLengthRow.add(lengthSlider);

In this recipe, we added two new components to two separate views within two separate windows. The first component—a switch—is fairly straightforward, and apart from the standard layout and positioning properties, it takes one main boolean value to determine its on or off status. It also has only one event, change, which is executed whenever the switch changes from the on to off position or vice versa.

On the Android platform, the switch can be altered to appear as a toggle button (default) or a checkbox. Additionally, Android users can display a text label using the title property, which can be changed programmatically by using the titleOff and titleOn properties.

The slider component is more interesting and has many more properties than a Switch. sliders are useful for instances where we want to allow the user to choose between a range of values; in this case, it is a numeric range of months from 12 to 60. This is a much more effective method of choosing a number from a range than listing all the possible options in a picker, and is much safer than letting a user enter possibly invalid values via a textfield or textarea component.

Pretty much all of the slider can be styled using the default properties available in the Titanium API, including thumbImage and highlightedThumbImage, as we did in this recipe. The highlightedThumbImage property allows you to specify the image that is used when the slider is being selected and used, allowing you to have a default and an active state.

Try extending the styling of the slider component using images for the left- and right-hand sides of the track, which is the element that runs horizontally underneath the moving switch.

Under the declaration for your second window, win2 in the app.js file, include the following additional property called autoShowChart and set it to false. This is a custom property, that is, a property that is not already defined by the Titanium API. Often, it's handy to include additional properties in your objects if you require certain parameters that the API doesn't provide by default:

//set the initial value of win2's custom property
win2.autoShowChart = false;

Now, in the window2.js file, which holds all the subcomponents for your second window, replace the code that you created earlier to add the switch with the following code. This will update the window's autoShowChart variable whenever the switch is changed:

//create the switch object
var switchChartOption = Ti.UI.createSwitch({
  right: 20,
  top: 20,
  value: false
});

//add the event listener for the switch when it changes
switchChartOption.addEventListener('change', function(e){
  win.autoShowChart = switchChartOption.value;
});

//add the switch to the view
view.add(switchChartOption);

How this code works is actually pretty straightforward. When an object is created in Titanium, all the standard properties are accessible in a dictionary object of key-value pairs; all that we're doing here is extending that dictionary object to add a property of our own.

We can do this in two ways. As shown in our recipe's source code, this can be done after the instantiation of the window object, or it can also be done immediately within the instantiation code. In the source code of the second window, we are simply referencing the same object, so all of its properties are already available for us to read from and write to.

There are other ways of passing and accessing objects and variables between Windows, including the use of App Properties and Events. These will be covered in Chapter 6, Getting to Grips with Properties and Events.

Open your app.js file and type the following code. If you're following along with the LoanCalc app, the following code should go after you created and added the textfield controls:

//calculate the interest for this loan button
var buttonCalculateInterest = Ti.UI.createButton({
   title: 'Calculate Total Interest',
  id: 1,
  top: 10
});

//add the event listener
buttonCalculateInterest.addEventListener('click', calculateAndDisplayValue);

//add the first button to our view
view.add(buttonCalculateInterest);

//calculate the interest for this loan button
var buttonCalculateRepayments = Ti.UI.createButton({
   title: 'Calculate Total Repayment',
  id: 2,
  top: 10
});

//add the event listener
buttonCalculateRepayments.addEventListener('click', 
                          calculateAndDisplayValue);

//add the second and final button to our view
view.add(buttonCalculateRepayments);

Now that we've created our two buttons and added the event listeners, let's create the calculateAndDisplayValue() function to do some simple fixed interest mathematics and produce the results, which we'll log to the Appcelerator Studio console:

//add the event handler which will be executed when either of //our calculation buttons are tapped
function calculateAndDisplayValue(e)
{
   //log the button id so we can debug which button was tapped
  console.log('Button id = ' + e.source.id);

    if (e.source.id == 1) 
    {
       //Interest (I) = Principal (P) times Rate Per Period 
       //(r) times Number of Periods (n) / 12 
       var totalInterest = (tfAmount.value * (interestRate / 
       100) * numberMonths) / 12;
        
      //log result to console
      console.log('Total Interest = ' + totalInterest);
    }
    else 
    {
      //Interest (I) = Principal (P) times Rate Per Period (r) 
      //times Number of Periods (n) / 12 
      var totalInterest = (tfAmount.value * (interestRate / 
      100) * numberMonths) / 12;
      
      var totalRepayments = Math.round(tfAmount.value) +  
      totalInterest;
      
      //log result to console
      console.log('Total repayments' + totalRepayments);
    }

} //end function

Most controls in Titanium are capable of firing one or more events, such as focus, onload, or (as in our recipe) click. The click event is undoubtedly the one you'll use more often than any other. In the preceding source code, you will notice that, in order to execute code from this event, we are adding an event listener to our button, which has a signature of click. This signature is a string and forms the first part of our event listener. The second part is the executing function for the event.

It's important to note that other component types can also be used in a similar manner; for example, an imageview can be declared. It can contain a custom button image, and can have a click event attached to it in exactly the same way as a regular button can.

First, we'll create an alert dialog that simply notifies the user of an action that can not be completed due to missing information. In our case, that they have not provided a value for the loan amount in tfAmount TextField. Add the following code to the calculateAndDisplayValue() function, just under the initial console.log command:

if (tfAmount.value === '' || tfAmount.value === null) 
{
    var errorDialog = Ti.UI.createAlertDialog({
      title: 'Error!',
      message: 'You must provide a loan amount.'
    });
    errorDialog.show();
return;
}

Now let's add the option dialog. This is going to display the result from our calculation and then give the user the choice of viewing the results as a pie chart (in a new window), or of canceling and staying on the same screen.

We need to add a couple of lines of code to define the optionsMessage variable that will be used in the option dialog, so add this code below the line calculating totalRepayments:

console.log('Total repayments = ' + totalRepayments) :
var optionsMessage = "Total repayments on this loan equates to $" + totalRepayments;

Then add the following code just below the line of code defining totalInterest:

console.log('Total interest = ' + totalInterest) :
var optionsMessage = "Total interest on this loan equates to $" + totalInterest;

Finally, at the end of the function, add this code:

//check our win2 autoShowChart boolean value first (coming //from the switch on window2.js)
if (win2.autoShowChart == true) {
   // openChartWindow();
 }
 else {
  var resultOptionDialog = Ti.UI.createOptionDialog({
        title: optionsMessage + '\n\nDo you want to 
                  view this in a chart?',
        options: ['Okay', 'No'],
        cancel: 1
  });
  
  //add the click event listener to the option dialog
  resultOptionDialog.addEventListener('click', function(e){
    console.log('Button index tapped was: ' + e.index);
    if (e.index == 0) 
      {
       // openChartWindow();
    }
  });
      
  resultOptionDialog.show();

} //end if

The alert dialog, in particular, is a very simple component that simply presents the user with a message as a modal, and it has only one possible response, which closes the alert. Note that you should be careful not to call an alert dialog more than once while a pending alert is still visible, for example, if you're calling that alert from within a loop.

The option dialog is a much larger modal component that presents a series of buttons with a message at the bottom of the screen. It is generally used to allow the user to pick more than one item from a selection. In our code, resultOptionDialog presents the user with a choice of two options—Okay and No. One interesting property of this dialog is Cancel, which dismisses the dialog without firing the click event, and also styles the button at the requested index in a manner that differentiates it from the rest of the group of buttons.

Note that we've commented out the openChartWindow() function because we haven't created it yet. We'll be doing that in the next recipe.

Just like the Window object, both of these dialogs are not added to another View, but are presented by calling the show() method instead. You should call the show() method only after the dialog has been properly instantiated and any event listeners have been created.

The following images show the difference between the alert dialog and the option dialog:

You can also create a predefined alert dialog using basic JavaScript, by using the alert('Hello world!'); syntax. Be aware, however, that you only have control over the contents of the messages that use this method, and the title of your alertdialog will always be set to Alert.

If you're following along with the LoanCalc example app, then open your project directory and put your downloaded files into a new folder called charts under the Resources directory. You can put them into the root folder if you wish, but bear in mind that you will have to ensure that your references in the following steps are correct.

To use the library, we'll be creating a webview in our app, referencing a variable that holds the HTML code to display a Raphael chart, which we'll call chartHTML. A webview is a UI component that allows you to display web pages or HTML in your application. It does not include any features of a full-fledged browser, such as navigation controls or address bars.

Create a new file called chartwin.js in the Resources directory and add the following code to it:

//create an instance of a window
module.exports = (function() {

  var chartWin = Ti.UI.createWindow({
    title : 'Loan Pie Chart'
  });

  chartWin.addEventListener("open", function() {
    
    //create the chart title using the variables we passed in from
    //app.js (our first window)
    var chartTitleInterest = 'Total Interest: $' + chartWin.totalInterest;
    var chartTitleRepayments = 'Total Repayments: $' + chartWin.totalRepayments;
      
    //create the chart using the sample html from the
    //raphaeljs.com website
    var chartHTML = '<html><head> <title>RaphaelJS Chart</title><meta name="viewport" content="width=device-width, initial-scale=1.0"/>      <script src="charts/raphael-min.js" type="text/javascript" charset="utf-8"></script>    <script src="charts/g.raphael-min.js" type="text/javascript" charset="utf-8"></script>    <script src="charts/g.pie-min.js" type="text/javascript" charset="utf-8"></script>    <script type="text/javascript" charset="utf-8"> window.onload = function () { var r = Raphael("chartDiv");  r.text.font = "12px Verdana, Tahoma, sans-serif";  r.text(150, 10, "';

    chartHTML = chartHTML + chartTitleInterest + '").attr({"font-size": 14}); r.text(150, 30, "' + chartTitleRepayments + '").attr({"font-size": 14});';

    chartHTML = chartHTML + ' r.piechart(150, 180, 130, [' + Math.round(chartWin.totalInterest) + ',' + Math.round(chartWin.principalRepayments) + ']); };
</script> </head><body>     <div id="chartDiv" style="width:320px; height: 320px; margin: 0"></div> </body></html>';

    //add a webview to contain our chart
    var webview = Ti.UI.createWebView({
      width : Ti.UI.FILL,
      height : Ti.UI.FILL,
      top : 0,
      html : chartHTML
    });
    
    chartWin.add(webview);

  });

  return chartWin;

})();

Now, back in your app.js file, create a new function at the end of the file, called openChartWindow(). This function will be executed when the user chooses Okay from the previous recipe's option dialog. It will create a new window object based on the chartwin.js file and pass to it the values needed to show the chart:

//we'll call this function if the user opts to view the loan //chart
function openChartWindow() {

  //Interest (I) = Principal (P) times Rate Per Period (r)
  //times Number of Periods (n) / 12
  var totalInterest = (tfAmount.value * (interestRate / 100) * numberMonths) / 12;
  var totalRepayments = Math.round(tfAmount.value) + totalInterest;
  
  
  var chartWindow = require("chartwin");

  chartWindow.numberMonths = numberMonths;
  chartWindow.interestRate = interestRate;
  chartWindow.totalInterest = totalInterest;
  chartWindow.totalRepayments = totalRepayments;
  chartWindow.principalRepayments = (totalRepayments - totalInterest);
    

  tab1.open(chartWindow);

}

Finally, remember to uncomment the two // openChartWindow() lines that you added in the previous recipe. Otherwise, you won't see anything!

Essentially, what we're doing here is wrapping the Raphael library, something that was originally built for the desktop browser, into a format that can be consumed and displayed using the iOS's WebKit browser. You can find out more about Raphael at http://raphaeljs.com and http://g.raphaeljs.com, and learn how it renders charts via its JavaScript library. We'll not be explaining this in detail; rather, we will cover the implementation of the library to work with Titanium.

Our implementation consists of creating a webview component that (in this case) will hold the HTML data that we constructed in the chartHTML variable. This HTML data contains all of the code that is necessary to render the charts, including the scripts listed in item #2 of the Getting Ready section of this recipe. If you have a chart with static data, you can also reference the HTML from a file using the url property of the webview object, instead of passing all the HTML as a string.

The chart itself is created using some simple JavaScript embedded in the r.piechart(150, 180, 130, n1, n2) HTML data string, where n1 and n2 are the two values we wish to display as slices in the pie chart. The other values define the center point of the chart from the top and left, respectively, followed by the chart radius.

All of this is wrapped up in a new module file defined by the chartwin.js file, which accesses the properties passed from the first tab's window in our LoanCalc app. This data is passed using exactly the same mechanism as explained in a previous recipe, Passing custom variables between Windows.

Finally, the chart window is passed back to the app.js file, within the openChartWindow() function, and from there, we use tab1.open() to open a new window within tab1. This has the effect of sliding the new window, similar to the way in which many iOS apps work (in Android, the new window would open normally).

The following screenshot shows the Raphael JS Library being used to show a pie chart based on our loan data:

There's not much to do to get the actionbar working, as we've already created a tabgroup for our main interface. We just need to do just a few tweaks to our app views, buttons, and labels.

First, let's make sure that all our labels are rendering correctly. Add the following attribute to any label that you've created:

color: '#000'

Now we need to fix our buttons. Let's add a tweak to them after we've created them (for Android only). Add the following code after your buttons. To do this, we're going to use .applyProperties, which allows us to make multiple changes to an element at the same time:

if (Ti.Platform.osname.toLowerCase() === 'android') {
  buttonCalculateRepayments.applyProperties({
    color : '#000',    
    height : 45
  });
  
  buttonCalculateInterest.applyProperties({
    color : '#000',    
    height : 45
  });
}

This block checks whether we're running Android and makes some changes to the buttons. Let's add some more code to the block to adjust the textfield height as well, as follows:

if (Ti.Platform.osname.toLowerCase() === 'android') {
  buttonCalculateRepayments.applyProperties({
    color : '#000',
    height : 45
  });

  buttonCalculateInterest.applyProperties({
    color : '#000',
    height : 45
  });

  tfAmount.applyProperties({
    color : '#000',
    height : 35
  });
  
  tfInterestRate.applyProperties({
    color : '#000',
    height : 35
  });
}

Finally, we're going to make a tweak to our settings window to make it play nicely on Android devices with different widths. Edit the window2.js file and remove the width of the view variable, changing it to the following:

var view = Ti.UI.createView({
    height : 70,
    left : 10,
right: 10,
    top : 10,
    backgroundColor : '#fff',
    borderRadius : 5
});

We'll need to update the labelSwitch variable too, by adding this line:

color: '#000'

Now let's run the app in the Android emulator or on a device, and we should see the following:

We've not done much here to get an actionbar working. That's because Titanium takes care of the heavy lifting for us. You must have noticed that the only changes we made were visual tweaks to the other elements on the screen; the actionbar just works!

This is a really nice feature of Titanium, wherein you can create one UI element, a tabgroup, and have it behave differently for iOS and Android using the same code.

Having said that, there are some additional tweaks that you can do to your actionbar using the Ti.Android.ActionBar API. This gives specific access to properties and events associated with the actionbar. More information can be found at http://docs.appcelerator.com/platform/latest/#!/api/Titanium.Android.ActionBar.

So, for example, you can change the properties of actionBar by accessing it via the current window:

actionBar = win.activity.actionBar; 

if (actionBar) {
actionBar.backgroundImage = "/bg.png";
actionBar.title = "New Title"; 
}

As you can see, it's really easy to create an actionbar using a tabgroup and alter its properties in Android.