Titanium Mobile App Development Essential Training

with Rafael Hernandez
please wait ...
Titanium Mobile App Development Essential Training
Video duration: 0s 3h 3m Beginner

Viewers:

In this course, author Rafael Hernandez creates native iOS and Android applications from a single codebase with the open-source Appcelerator Titanium platform. The course explains the difference between browser-based JavaScript and Titanium JavaScript, shows how to create a basic application, and demonstrates building buttons, sliders, switches, and pickers. The course also covers creating tables, implementing maps, providing feedback to users, incorporating multimedia, detecting gestures, and preparing finished apps for distribution.

Topics include:
  • Accessing the Titanium API documentation
  • Navigating the Titanium Studio workspace
  • Detecting platforms
  • Understanding windows and views
  • Listening for events
  • Configuring text fields
  • Adding interactivity to a view
  • Working with a single tab group
  • Creating a map and setting the location
  • Adding and removing map pins at runtime
  • Loading local and remote web pages
  • Loading an external XML feed
  • Setting timers
  • Prompting device vibrations
  • Implementing an activity indicator
  • Reading from and writing to the file system
  • Working with media
  • Reading device orientation
  • Detecting gestures
  • Debugging an app
  • Stepping through a finished app
Subjects:
Developer Web
Software:
Titanium
Author:

Welcome

Hi! I'm Rafael Hernandez and welcome to Titanium Mobile App Development Essential Training. In this course, we'll look at using one set of code to create mobile apps that run on both iOS and Android devices. I'll start by showing you how to set up a project and how to create images and labels. Then I'll show you how to add interactivity and gather information from the user using text fields and text areas. After that, we'll look at tabGroups and the tableView, which is a common way of presenting information to the user in an application.

Then we'll look at some of the more advanced functions of Titanium Mobile, such as implementing a map view, providing the user with feedback, working with multimedia, and more. Finally, I'll show you how to prepare your app for distribution in the Android and iOS app stores. I'm eager to show you what Titanium Mobile offers. Now let's get started with Titanium Mobile App Development Essential Training.

Find answers to the most frequently asked questions about Titanium Mobile App Development Essential Training .


Expand all | Collapse all
please wait ...
Q: I'm having trouble getting the code in the Chapter 5 "Opening windows from rows" movie to work for Android.
A: There is a difference in the way Android treats a generic object that serves as data for a table. As well, there is no "hasDetail" property for Android table rows. The solution is to:
 
1.) Rename all the "hasDetail" properties to "hasChild"

2.) Instead of using generic objects in the data array, use Titanium Table
Row objects.
 
As a general note: In order to attach custom properties to rows in Android, Titanium Table Row objects *must* be used. That isn't made clear in the Android docs, especially if the app won't fail if you don't do this as evidenced by the old code. New code is included here that should take care of this issue.
 
This is how your code should read:
 
// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

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

var win = Titanium.UI.createWindow({
    title:"Tours",
    backgroundColor:"#FFFFFF",
    //navBarHidden:true, //Hide the nav bar for the window
    tabBarHidden:true //Hide the tab bar for the window
});
//Remember, we are hiding this tab through the property tabBarHidden above
var tab = Titanium.UI.createTab({
    icon:"KS_nav_views.png",
    title:"Tours",
    window:win
});

var data = [
    Ti.UI.createTableViewRow({title:"Backpack Cal", leftImage:"images/01-backpack-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"California Calm", leftImage:"images/02-calm-cal-thumb.png", className:"tableRow", hasChild:true, customData:"This is custom row data"}),
    Ti.UI.createTableViewRow({title:"California Hotsprings", leftImage:"images/03-hotsprings-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Cycle California", leftImage:"images/04-cycle-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"From Desert to Sea", leftImage:"images/05-desert-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Kids California", leftImage:"images/06-kids-cal-thumb.png", className:"tableRow", hasChild:true, customData:"This is custom row data"}),
    Ti.UI.createTableViewRow({title:"Nature Watch", leftImage:"images/07-nature-watch-cal-thumb.png", className:"tableRow"}),
    Ti.UI.createTableViewRow({title:"Snowboard Cali", leftImage:"images/08-snowboard-cal-thumb.png", className:"tableRow",hasChild:true,js:"external.js",dataToPass:"This data was passed in from the main window"}),
    Ti.UI.createTableViewRow({title:"Taste of California", leftImage:"images/09-taste-cal-thumb.png", className:"tableRow"})
];


var tableView = Titanium.UI.createTableView({
    data:data
});

tableView.addEventListener("click",function(e){
    //Check the row's hasDetail property
    var w;
    if(e.source.hasChild){
        if(e.source.js){//Does the row have a pointer to an external js file?
            //It does: Load that file
            w = Titanium.UI.createWindow({
                title:e.source.title,//Take the title from the row
                backgroundColor:"#FFFFFF",
                dataToPass:e.source.dataToPass,
                url:e.source.js//The url property of a window will load an external .js file for window contents (be sure that external file is properly formatted!)
            });
        }else{
            //It doesn't: Create a window from scratch
            w = Titanium.UI.createWindow({
                title:e.source.title,//Take the title from the row
                backgroundColor:"#FFFFFF"
            });
            //Create some views for our window
           
            var label = Titanium.UI.createLabel({
                text:"A newly opened window from the " + e.source.title + " row",
                width:"auto",
                height:"auto",
                textAlign:"center"
please wait ...