1. Code
  2. Titanium Mobile

Build a Titanium Mobile Pizza Ordering App: Order Form Setup

This post is part of a series called Build a Titanium Mobile Pizza Ordering App.
Build a Titanium Mobile Pizza Ordering App: Topping Selection
Build a Titanium Mobile Pizza Ordering App: Order Completion

Welcome to the third installment in our series demonstrating how to build a pizza ordering application with Titanium Mobile. In this tutorial, we'll be creating the "Submit Your Order" screen.

Step 1: The Details Window

Now that the user is able to select and deselect toppings, we need to allow the user to actually submit an order. Let's start by modifying the details click event inside toppings.js:

Now when you hit the details button in the toppings window the code above will loop through our giant array of toppings and check the container property for each array item. If the item isn't null, it will add it to our temp array, called pizzaInfo. After the loop finishes, we will fire a new custom event called details. We will pass three parameters to this event:

  • The selected crust.
  • The image path to the selected crust.
  • The selected toppings (i.e. the temp array called pizzaInfo).

Step 2: Coding the openDetails Event

We need to modify our main.js file to listen for our custom event, so go ahead and open that file now. You are also going to add a new method called openDetails to the code:

Okay, your main.js file should now match the code above. In the above code, we added a new event listener at the bottom called details and when the app receives that event, we want to call the openDetails method. In the openDetails method, we first close the toppings window. We then set some properties on the details window with the values from the event we passed in toppings.js. We also set the URL property to details.js and finally call the open method.

Step 3: Creating the Details Form

We need to make a new javascript file called details.js and save it in the main_windows folder. What we want to do in this file is add three text fields:

  • Name
  • Address Line 1
  • Address Line 2

NOTE: In a real-world application, we would obviously have more fields, but for the sake of this tutorial we will have only created three fields.

We are also going to have a summary of the pizza the user has ordered with a submit order button. Let's start with the interface for this:

The above block of code may look scary, but really it is quite simple. We start by defining our win variable as well as our orderReq variable. The orderReq variable will handle our request out to our PHP file which we will cover in the next tutorial of this series.

We then define our three text fields and give them some simple properties. We add a return event listener on the text fields so when you hit next on the keyboard, it jumps to the next text field. We make a label called pizzaInfoText and set its text property to our getFormattedPizza method. This method will return a formatted list of our chosen crust and toppings. If the user selected no toppings, we will display the crust type and a simple cheese pizza. We've also made our order and cancel buttons and faded them in. Your interface should look like this now:

Step 4: Coding the Cancel Button

So you're in the submit order screen and you decide you want to remove mushrooms from your topping list. Well, no problem! The app already knows the toppings you currently have selected, so we will simply pass that temp array back to toppings.js and recheck the toppings. We first need to add an event listener to our cancel button. Scroll to the bottom of your details.js file and add this:

We are firing yet another custom event, this time called cancelDetails, and again we pass three parameters:

  • The selected crust.
  • The image path to the selected crust.
  • The selected toppings (i.e. our temp array).

Step 5: Code the cancelDetails Event

Let's go back to main.js. We need to add a new event listener. Add the following to the end of our event listeners.

So, with our modified method, we do a check for the toppings property tied to the event. If it isn't null, we want to close the details window. If it is null, we want to close the crust window. We still add our custom properties and then open our toppings window.

Step 6: Checkbox Preselection

When we go back we want to preselect the checkboxes of the topping we previously chose. We also want to add the toppings to the pizza visually. Open up the toppings.js file and scroll down to the createToppingsList method. The difference between your current one and the one below is if win.returnToppings isn't null, it will loop through our larger toppings array and compare it to our temp array. If they match up, recheck the checkbox, add the visual to the crust, and increase our toppings count.


In this tutorial we created the "Submit Oder" screen that is the last screen we will need in this tutorial series. We also added two more custom events to our app that allowed us to jump between the "Choose Crust" and "Submit Order" screens.

The next part of this series will go over doing the form authentication necessary to handle submissions and then e-mailing the order chosen along with the customer information submitted (a web server with a mail client and PHP installed will be required in order to send the e-mail order notification).

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