In this multi-part tutorial series, I’ll be teaching you how to build a Titanium Mobile app from start to finish. Specifically, you’ll learn how to build a Pizza Shop app that will allow customers to order a custom pizza on the go. In this tutorial, I will demonstrate how to setup the project and create a “Crust Selection” screen.

Step 1: Create a New Project

Open up Titanium and create a new mobile project. Now is a good time to go ahead and download the zip file attached to this post as well. The zip file attached to this post contains a subfolder called “images”. Once you have created your empty project, place the “images” folder in your new project’s “resources” folder. While inside the “resources” folder, go ahead and create a new subfolder called “main_windows” as well as a subfolder called “includes”.

Step 2: Edit App.js

Browse to the Resources/app.js file. There is a lot of stuff in this file already that we do not need. Go ahead and remove everything and replace it with the following:

Titanium.UI.setBackgroundColor('#8C0221');

//-- Create our main window that will contain all our sub windows
var main = Ti.UI.createWindow({
    url:'main_windows/main.js',
    height:Ti.Platform.displayCaps.platformHeight,
    width:Ti.Platform.displayCaps.platformWidth,
    fullscreen:true,
    navBarHidden:true
});
main.open();

What we did here is set our background color, made a new window called “main”, and then opened it. Main will hold all of our sub windows like crusts and toppings.

Notice the URL property on the window. In the Resources folder, make a new folder called “main_windows” if you haven’t already and a new JS file called main.js. The URL property tells the compiler to use main.js as our window. If you skip this part, Titanium will throw an ugly red error in the emulator.

Step 3: Adding a Background and a Clock

If you haven’t already made a main.js file and saved it in the main_windows folder, do so now. Open main.js and add the following:

var win = Ti.UI.currentWindow;

//-- Create the sub windows
var crusts = Ti.UI.createWindow();
var toppings = Ti.UI.createWindow();
var details = Ti.UI.createWindow();

//-- We set the background here since this wont change
win.backgroundImage = '../images/bg_main.png';

//-- Include our clock
Ti.include('../includes/clock.js');

If you haven’t created an “includes” folder in the resources folder, do so now. Next, create a new JS file called clock.js. Save it to the “includes” folder and add the following:

var time = Ti.UI.createLabel({
    text:'',
    font:{
        fontFamily:'Verdana',
        fontWeight:'bold',
        fontSize:14
    },
    color:'#fff',
    shadowColor:'#333',
    shadowOffset:{x:1,y:1},
    textAlign:'right',
    width:Ti.Platform.displayCaps.platformWidth,
    height:20,
    top:45,
    left:-13
});

function getFormattedTime()
{
    var amPM = '';
    var d = new Date();
    var currentHour = d.getHours();

    if (currentHour < 12)
    {
        amPM = 'AM';
    }
    else
    {
        amPM = 'PM';
    }

    if (currentHour == 0)
    {
        currentHour = 12;
    }

    if (currentHour > 12)
    {
        currentHour = currentHour - 12;
    }

    var currentMinute = d.getMinutes();
    currentMinute = currentMinute + '';

    if (currentMinute.length == 1)
    {
         currentMinute = '0' + currentMinute;
    }
    time.text = currentHour + ':' + currentMinute + ' ' + amPM;
}
var clockInterval = setInterval(getFormattedTime,5000);
getFormattedTime();
win.add(time);

So what we did is create 3 sub windows, set our background and included a clock that updates every 5 seconds. The reason for the clock is our application is set to fullscreen mode, so the default device status bar and time will not be displayed. Go ahead and compile. Your screen should look like the below image:

Step 4: Creating and Opening the Crusts Window

Create a new JS file called crusts.js and save it in the main_windows folder. You can leave it blank for now. Go back to main.js. We need to add a method that opens our crusts window, so add the following to main.js

function openCrust(e)
{
    crusts.url = 'crusts.js';
    crusts.open();
}
openCrust({});

To explain the above: we made a method called openCrust(), we set the url property on our crusts window to “crusts.js”, and then we opened it. The reason we are passing an empty object is because later in this tutorial series, we will actually be passing data to this method. You don’t need to compile just yet as you will see no visible change.

Step 5: Editing the crusts.js File

This file will contain a scroll view that allows the user to swipe through the various crusts offered by our pizza shop. We will also add a next button that will take the user to the toppings window:

var win = Ti.UI.currentWindow;

//-- Our crust views
var handMade = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/hand.png'});
var natural = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/natural.png'});
var panCrust = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/pan.png'});
var stuffedCrust = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/stuffedCrust.png'});
var thinNCrispy = Ti.UI.createView({width:216,height:156,backgroundImage:'../images/crust/thinNcrispy.png'});
var returnCrust;

//-- Crust reference
var crusts = [
    {title:'Hand Made',path:'../images/crust/hand.png'},
    {title:'Natural',path:'../images/crust/natural.png'},
    {title:'Pan Crust',path:'../images/crust/pan.png'},
    {title:'Stuffed Crust',path:'../images/crust/stuffedCrust.png'},
    {title:'Thin N Crispy Crust',path:'../images/crust/thinNcrispy.png'}
];

//-- Our scroll view that contains our crust views
var scrollView = Ti.UI.createScrollableView({
    views:[handMade,natural,panCrust,stuffedCrust,thinNCrispy],
    showPagingControl:true,
    clipViews:false,
        top:180,
        left:30,
        right:30,
        height:180,
        opacity:0
});

//-- Crust title
var crustTitle = Ti.UI.createLabel({
    text:'1. Choose a crust',
        font:{
            fontFamily:'Verdana',
            fontWeight:'bold',
            fontSize:24
        },
        color:'#A90329',
        shadowColor:'#333',
        shadowOffset:{x:1,y:1},
        textAlign:'left',
        width:Ti.Platform.displayCaps.platformWidth,
        height:58,
        left:10
});

//-- Crust title background
var crustTitleView = Ti.UI.createView({
        width:328,
        height:58,
        backgroundImage:'../images/crustHeaderBg.png',
        top:100,
        left:-6,
        opacity:0
});
crustTitleView.add(crustTitle);

//-- Crust type label
var crustType = Ti.UI.createLabel({
        text:'Hand Made',
        font:{
            fontFamily:'Verdana',
            fontWeight:'bold',
            fontSize:16
        },
        color:'#fff',
        shadowColor:'#333',
        shadowOffset:{x:1,y:1},
        textAlign:'center',
        width:Ti.Platform.displayCaps.platformWidth,
        height:20,
        top:170,
        opacity:0
});

//-- Next Button
var next = Ti.UI.createButton({
        width:137,
        height:75,
        backgroundImage:'../images/toppings_next.png',
        top:385,
        opacity:0
});

//-- If android OS, use the image property instead of backgroundImage (Ti SDK bug)
if (Ti.Platform.osname == 'android')
{
    next.image = '../images/toppings_next.png';
}

next.addEventListener('click',function(e){
    Ti.App.fireEvent('toppings',{
        crust:crusts[scrollView.currentPage].title,
        path:crusts[scrollView.currentPage].path
    });
});

win.add(scrollView);
win.add(crustTitleView);
win.add(crustType);
win.add(next);

//-- Fade the scrollview in
scrollView.animate({
    opacity:1,
    duration:500
});

//-- Fade the crust title in
crustTitleView.animate({
    opacity:1,
    duration:500
});

crustType.animate({
    opacity:1,
    duration:500
});

//-- Fade the next button in
next.animate({
    opacity:1,
    duration:500
});

//-- Changes the crust type label text when the user scrolls
scrollView.addEventListener('scroll',function(){
    crustType.text = crusts[scrollView.currentPage].title;
});

So we created our crust views, a scroll view, and added the crust views to the scroll view. We also created a custom title and a next button. Go ahead and compile. Your app should now look like this and have the swiping functionality. As you swipe, you will notice the title above the pizza image will change to whatever crust you are on. That is thanks to the “scroll” event we added to our scroll view.

Conclusion

In part 1 of this series, we created our main window to contain our sub windows. We created an openCrust method that will evolve through this series of tutorials. It is pretty basic right now. We created our first essential screen, the crusts window. This allows the user to swipe through the crusts we offer. The next, or toppings, button is firing a custom event in the background. In the next part of this tutorial, we will look back to our main.js file and listen for the custom event that will allow us to start adding toppings to our pizza!