1. Code
  2. Titanium Mobile

Build a Titanium Mobile Pizza Ordering App: Topping Selection

Read Time:9 minsLanguages:
This post is part of a series called Build a Titanium Mobile Pizza Ordering App.
Build a Titanium Mobile Pizza Ordering App: Crust Selection
Build a Titanium Mobile Pizza Ordering App: Order Form Setup

In this multi-part tutorial series, I’ll be teaching you how to build a pizza ordering app with Titanium Mobile from start to finish. In this tutorial, we'll create the "Choose Your Toppings" screen.

Step 1: Listening for Custom Events

At the end of part 1, we had our next button firing a custom event. It is now time to handle that custom event. The custom event is going to reside in our main.js file, so open that up. The custom event listener is looking for a method called openToppings, so let's add that as well:

So, when you hit the next button in the crusts window, the openToppings() method is going to be called. That will result in:

  • Closing the crusts window
  • Setting the URL property on the window
  • Creating 3 custom properties
    • crust
    • path
    • returnToppings (this property will be used in part 3)
  • Opening the toppings window

Step 2: Create the Toppings Window

Let's create a new JS file called toppings.js and save it to the main_windows folder. Rather than reading a long paragraph of me explaining what all this code does, I just commented the code directly:

Since we added our three custom properties to the toppings window when it was being opened, we can reference them using win.propertyName. In our case, we set the pizza image to win.path. That is telling the view to use whichever image we selected as the background image. Go ahead and compile. Once you get past the crusts window, you won't be able to go back or forward just yet, but you can see that the toppings window will contain whichever crust you've selected. Your toppings window should look similar to the one below:

Step 3: Adding the Toppings List

We want to now add our scrollable list to the toppings window. I've explained in the code what each step does, but, to reiterate, iOS doesn't really have a checkbox component, so I went ahead and made my own using two PNG files, and I just swap the image based off the selected property on the checkbox view.

Below is the code for generating the list as well as handling the click event for each topping in the list:

Finally, we call the createToppingsList method which gets called every time the window opens. In part three of this tutorial series, we will modify that method so if the user hits cancel in the submit order window, the app will remember what toppings the user had previously selected. For now, compile and your app should look like this:

You can go ahead and check the boxes on and off to see their functionality.

Step 4: Coding the Cancel Button

So when ordering a pizza, you may decide you want to get a different crust. Since that is a good possiblity, let's add that functionality. The cancel button click event is already taken care of. We are firing a custom event called cancelToppings and we are passing the currently selected crust.

In order to handle this event, we must go back to our main.js file and add and event listener for it.

So you can see we added another event listener. When it receives the event after the user hits "cancel" in toppings, it will fire the openCrust method. Remember in part one how I said we will be passing data to it eventually? Well, that time has come. In the click event for the cancel button we passed the current crust. We have modified the openCrust method by closing the toppings window and if the crusts property is in the event, that means they hit cancel, so I want to add the crust type as a property to the crusts window. What this will do is allow us to automatically select the previously selected crust. We will cover that in the next step.

Step 5: Persisting Crust Selection

Open up crusts.js. We need to add a conditional to check if the crusts property exists on the window. You will want to place this code directly under our scrollView variable:

If the crust property isn't null, what this snippet will do is loop through our existing crusts array and break once the crust property matches the title in the array. Once it finds a match, we use the scrollToView method on our scrollView. This will preselect our crust from our last section.

We have one more part to this step. If you compiled, you will notice the title of the crust is wrong so we need to fix that. Insert this small snippet under our crustType variable.

Problem solved! When hitting cancel on the toppings window, we go back to the crusts window and preselect the crust we had selected before as well as match the crust title. Go ahead and test it out. Select a crust, go to toppings, and hit cancel. You should be able to go back and forth as much as you want!


In part two, we handled some custom events that allowed us to navigate between some windows with the help of our openToppings and openCrust methods in main.js. We learned about passing data between windows. We essentially created a new component that doesn't exist in iOS which is the checkbox. Sure, the iOS SDK does have the toggle switch, but that is ugly and wouldn't look good in our application. In part three of this tutorial, we will cover going to the submit order window. Once in the window, we will fill out some text fields and, on submit, we will send all our pizza info to a PHP script. The PHP script will then e-mail the address of your choice, simulating how an order would come in if this were a real-world, working application.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.