Now that we have opened the app.js file and cleared all of its content, we can start working on a clean slate.

So the very first thing that we need in every application is a Window object. Every application today has at least one window. Some of them can fill the entire screen, have no title whatsoever, or even be transparent. But they are windows nonetheless.

The Titanium API provides us with several functions to create our UI objects. They are usually contained in the Titanium.UI namespace. Think of it as a package where you store functions that share a similar domain (such as User Interface, Geolocation, and Media management).

We create the window using the Ti.Ui.createWindow function. We want it to have a white background color and a vertical layout. Since we want to interact with our window later on in the code, we store its reference into a variable named win.

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

We added the layout property as an extra property to make sure that components will be stacked below one another. Thus, we're making sure that none of them will overlap. Different applications will have different needs, but in this specific case, it is appropriate.

The main function of a stopwatch is to display the current time; for this, we will use a Label component. In order to give a visual effect of having light text over a dark background, we will put this label in a container view as explained in The UI structure section of this chapter.

So first, we create our container view. We want to position it at the very top. It will fill the entire width of the screen and will take up 30 percent of the screen's height.

var timeView = Ti.UI.createView({
  top:0,
  width: '100%',
  height: '30%',
  backgroundColor: '#1C1C1C'
});

Then, we want to create a label that will display the timer itself. The label object has more than 50 properties that can affect its appearance and behavior, so we won't go over all of them at this stage. What is important to remember here, is that we want it to have a large font (to display big numbers), and we want the text to be centered. We will also give a default value of READY? for when the counter is not running.

var label = Ti.UI.createLabel({
  color: '#404040',
  text: 'READY?',
  height: Ti.UI.SIZE,
  textAlign: 'center',
  verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_CENTER,
  font:{
    fontSize: '55sp',
    fontWeight: 'bold'
  }
});

Now that both controls have been created, we need to add them to our window. As explained earlier, first we add the Label object to its container view:

timeView.add(label);

Then, we add this same container view to our window:

win.add(timeView);

Finally, we show the window using the open function:

win.open();

We can now do our first run

We can launch the application using the Run button from the App Explorer tab (on a simulator/emulator, or directly on a device). To see your code in action, simply click on the Run button, select where you want to run it, and the application will start (provided the code has no errors).

Our very first run shows our main window (with a white background), our container view (with a dark background), and our label showing READY? on the screen, as shown in the following screenshot:

This is not much yet, but we are getting there.

Now that we can show the time on our stopwatch, we need some way to start and stop it. To do this, we will use two button components. Buttons are pretty straightforward; the user touches it, an event occurs, and an action is performed.

As we want our buttons to be horizontally aligned, it makes perfect sense to group them inside a view. This view will act as a toolbar. It will fill the entire width of the screen, occupy 10 percent of the screen's height, and have a horizontal layout. The buttons are laid out from left to right.

var buttonsView = Ti.UI.createView({
  width: '100%',
  height: '10%',
  layout: 'horizontal'
});

Now, we need a button to start the stopwatch and another one to stop it. Much like labels, buttons have a lot of properties, so we won't go over all of them here. What is important here, is that they each have a different title (this is what the user sees on the button), and they each take up about 50 percent of the screen's width. Also, they each have different colors but share the same font.

var buttonStartLap = Ti.UI.createButton({
  title: 'GO!',
  color: '#C0BFBF',
  width: '50%',
  height: Ti.UI.FILL,
  backgroundColor: '#727F7F',
  font: {
    fontSize: '25sp',
    fontWeight: 'bold'
  }
});

var buttonStopReset = Ti.UI.createButton({
  title: 'STOP',
  color: '#C0BFBF',
  width: '50%',
  height: Ti.UI.FILL,
  backgroundColor: '#404040',
  font: {
    fontSize: '25sp',
    fontWeight: 'bold'
  }
});

Notice that we didn't give any x position for the buttons. That's one advantage of using the layout property since it takes care of it for us.

Once the buttons are created, we simply add them to their parent view and then add this same parent to the main window, as shown in the following code:

buttonsView.add(buttonStopReset);
buttonsView.add(buttonStartLap);
win.add(buttonsView);

We see the buttons, but they don't do much yet!

Once we have added our buttons, we can run our application once again, and we will see our newly added buttons. But at this point in time, they have no code behind them, as shown in the following screenshot:

Let's start with the GO! button. We want it to start counting when the user presses it. So to achieve this, we need to add an event handler that will be triggered when the user presses the button.

Titanium provides us with a simple function named addEventListener. This function has two parameters:

• The event's name we want to handle (click, swipe, pinch, and so on)
• The function that will be executed when the event occurs

For our two buttons, we add event handlers for the click event. Once this event is caught, the code contained in the function (passed as a second parameter), will be executed, as shown in the following code:

ButtonStartLap.addEventListener('click', function(e) {
  stopWatch.start();
}

ButtonStopReset.addEventListener('click', function(e) {
  stopWatch.stop();
  label.text = 'READY?';
}

Tip

We could have also used an already existing function and reused it as our second parameter. This becomes useful when you want to reuse the same code for different events.

var alertFunc = function(e) {
    alert('Reusable code');
}

buttonStartLap.addEventListener('click', alertFunc);

Stopwatch is not defined, but it's okay

If you have tried running your code after adding event handlers, you will be shown an error message related to the fact that the stopWatch object is undefined. That's because there is no such out of the box feature in Titanium. Therefore, we will have to create our own.

It's quite simple really; it has four functions in total, as shown in the following table:

It also has to provide a listening mechanism in order to be able to perform an action at a specific interval (every 10 milliseconds in our case).

Note

We are not going to cover the code from these functions in this book, since there are already plenty of JavaScript examples available on the web or the Internet. Also, putting the code used to calculate the difference between two timestamps would prove pretty much impossible to read on paper.

You can develop your own implementation, and as long as your code provides the methods needed, it will integrate seamlessly into the existing code.

But we took the liberty of providing one in the application's code, which is available on the public GitHub repository at https://github.com/TheBrousse/TitaniumMobileHotshot.

To use the library provided with the sample, we have to do the following:

1. Load the stopwatch functionality contained in the stopwatch.js file located next to our app.js file. We can do this using the require function that follows the CommonJS pattern. There is a lot of documentation available regarding this pattern, and we will cover this topic in a chapter as we move forward. But for now, just see it as a way to load a feature that is contained in another file.

   var Stopwatch = require('stopwatch');

2. We then need to create a function that will be triggered every time the stopwatch reaches a fixed duration in milliseconds (10 should allow us enough precision, without having a huge impact on performance). It contains only one statement that updates the value of the label with the current time.

   function stopwatchListener(watch) {
     label.text = watch.toString(); 
   }

   Tip

   Since it is called repeatedly, it is recommended that such a function performs only small operations to avoid degrading the performance.

3. Then, we create a stopwatch object by specifying the listener function that will be attached to it (stopwatchListener) and the interval between calls (10 milliseconds), as shown in the following code:

   var stopWatch = new Stopwatch(stopwatchListener, 10);

With this code in place, we already have a fully-functioning stopwatch application that we can use. If we press the GO! button, the timer will start. If we press the STOP button, it will stop. And if we press the Go! button again, the timer will continue from where it was when it stopped.

Since we now have a working stopwatch application, we can implement more advanced features. One of those new features is the ability to keep a track of each lap and later on being able to view those laps.

The way that this feature will be presented to a user is quite simple. When the timer is running, the user has the ability to press a button. When this button is pressed, the application saves the current value on the timer and adds it to a list, without affecting the stopwatch counter in progress. The user can use this feature for an unlimited number of times, as long as the stopwatch is running.

var isRunning = false;

buttonStartLap.addEventListener('click', function(e) {
  // If the timer is running, we add a new lap
  if (isRunning) {
    Ti.API.info(stopWatch.toString());
  } else {
    // If the clock is not ticking, then we start it
    isRunning = true;
    buttonStartLap.title = 'LAP!';
    buttonStopReset.title = 'STOP';
    stopWatch.start();
  }
});

[INFO] 00:01:17:37
[INFO] 00:02:53:19
[INFO] 00:04:06:93
[INFO] 00:06:11:52

var table = Ti.UI.createTableView({
  width: '100%',
  height:Ti.UI.FILL,
  backgroundColor: '#C0BFBF'
});

win.add(table);

buttonStartLap.addEventListener('click', function(e) {
  if (isRunning) {
    var row = Ti.UI.createTableViewRow({
      title: stopWatch.toString(),
      color: '#404040',
      className: 'lap',
      leftImage: '/images/lap.png',
      font:{
        fontSize: '24sp',
        fontWeight: 'bold'
      }
    });
    

 table.appendRow(row);
  } else {
  // else code doesn't change

The reset button shares the same principle as the GO! button. When the timer is running, the button gives the ability to stop the timer. If it is already stopped, it can be used to reset the timer and empty the list of laps.

We check whether the timer is already running. If it is, we stop the timer, change the button title accordingly, and set the variable to false.

If it is not already running, we clear the table of all its rows. Notice that we don't really delete any row, but instead we assign its data with an empty array. Then, we reset the timer and update the label's text to its initial value.

buttonStopReset.addEventListener('click', function(e) {
  if (isRunning) {
    buttonStartLap.title = 'GO!';
    buttonStopReset.title = 'RESET';
    stopWatch.stop();
    isRunning = false;
  } else {
    table.setData([]);
    stopWatch.reset();
    label.text = 'READY?';
  }
});

Well, there you have it! A fully-featured, native mobile application that is fully compatible with iOS and Android devices with a single code base. All of this was made with less than 120 lines of code (including comments).

Here is our final stopwatch with the lap counter: