Hello World

Objective

In this section, you'll take a focused look at creating Mobile applications using Studio and the Titanium SDK. This section sets the stage for the remainder of this book, during which we'll dig deep into the various aspects of creating mobile applications with the Titanium SDK.

Contents

Before we can build our first app, we need to create a mobile project in Studio. During this process, we'll discuss the following critical aspects of mobile projects:

  • The meta-information necessary for project creation
  • The default project structure
  • Launching projects in the simulator/emulator

Creating a New Mobile Project

You can create a new project in Studio one fo two ways:

  • From the menu, select File > New > Mobile App Project
  • From the toolbar, click the New Project button  and select Mobile App Project.

The New Mobile Project wizard appears.  The first step is to select a project template (in the Project Template window).  You can choose between:

  • Alloy – create a Mobile project utilizing the Titanium MVC framework called Alloy
  • Classic – create a classic Titanium project with no defined framework
  • Other – create a specialized mobile project

In the Project Location window, you'll need to fill in the following fields:

  • Project name – Your app's name as seen by users.
  • App Id – Titanium SDK's version of the Android Application Package Name or CF Bundle Identifier. See below for guidelines and rules for App ID names.
  • Company/Personal URL
  • Titanium SDK Version – select the Titanium SDK to use for your project.
  • Deployment Targets – you can create a single project to target.

Once this is complete, Studio creates a default project structure for you, based on the given meta-information.

  • Resources folder – your project's code files and graphics are stored in this folder
  • app.js – your project's bootstrap file. Every project has one; it's the file loaded first when your app is launched
  • tiapp.xml – The details you enter in the new project wizard are used to populate the tiapp.xml file and the manifest file.

Those are basically the only required files, but you can augment the project with others. For example, you don't have to put all of your code into app.js. (Later in this guide, we'll show one method for dividing up code into multiple files.) You could put all your graphics in the Resources folder, or you could put them into subfolders. We'll dig more deeply into cross-platform development later, but the android and iphone directories within Resources are locations for your platform-specific assets.

App ID Naming Guidelines

An App ID must be unique across all apps installed on a device. For published apps, the name must be unique across the entire App Store / Market. Therefore, we recommend you use the Java Package Name style when assigning your App ID. Following this format, you enter a name in reverse domain name format with your app's name at the end (i.e., com.yourdomain.yourappname). While technically valid, a one-word App ID (such as "testapp") will cause build errors.

Some additional points:

  • You cannot include spaces or special characters in your App ID.
  • Use all lowercase, as uppercase or mixed case could cause errors on Android.
  • You cannot use any Java keywords in the App ID – words like 'case' or 'package' will cause an error that will prevent Titanium from building your app.
  • You cannot change the App ID once you publish an app because the App Store / Market would consider the change to mean you're publishing a new app, not an upgrade.
  • The App ID is related to the Bundle Identifier you define in the iOS Provisioning Portal / iTunes Connect, see Distributing iOS apps for more info.

(On Android, the App ID is technically an Application Package Name, not a Java Package Name. See http://blog.javia.org/android-package-name/ for further info on the distinction.)

Running Your App

To build and run your app, simply click the Run button  as shown in the following graphic. Then, choose the appropriate target.

Simulator/Emulator

It's more than simple semantics, but with iOS the desktop software that runs your app is called a simulator; on Android, it's an emulator. Whether writing a native Objective-C app or a Mobile app, your iPhone/iPad code is cross-compiled and turned into an OS X executable. It's then run by OS X, simulating the environment within an iOS device. With Android, the emulator provides a virtual hardware environment that runs the actual Android operating system, platform components, and your app's code.

With both platforms, the test environment isn't a perfect representation of the actual mobile device. Some subtle (and not-so-subtle) differences will present themselves. You should always test your app on a physical device before publishing it.

We'll try to be generic in this guide by saying simulator/emulator when referring to the virtual software device thingie. But, forgive us if we say simulator or emulator alone.

Under the Covers

Let's take a high-level look at how your source code is turned into a native app. Titanium's tools include a pre-compiler, front-end compiler, and a set of Node.js build scripts that interact with the native SDK tools.

To start, Titanium precompiles your JavaScript to minify it. Titanium's pre-compiler statically analyzes your code and builds a dependency hierarchy of all the Titanium APIs used by your application. The front-end compiler's job is to create native stub files. These stubs include appropriate platform-specific native code, a native project file (if necessary), and any specific code that is necessary to compile Titanium code for a given platform compiler. Finally, Titanium calls out to the platform-specific compiler tools (for example, xcodebuild for iOS) to compile the final native application.

On the iOS side, your JavaScript is Base64 encoded, inlined as a variable in a C file, and is then compiled. Your JavaScript is not converted to Objective-C. It remains Javascript and is interpreted at runtime using the JavaScriptCore interpreter. On Android, your JavaScript is precompiled to bytecode. At runtime, your code is interpreted by the Rhino/V8 JavaScript interpreter. In both cases, your original code is not retrievable in any sort of human-readable form.

Hands-on Practice

Goal

In this activity, you will create a default project and examine the resulting files.

Steps

  1. In Studio, use the New Mobile Project wizard to create a new classic Mobile project. Create a test project named HelloWorld with an app ID of com.yourname.helloworld. Select appropriate build targets (e.g. iPhone and/or Android).
  2. Once the project is created, close the tiapp.xml file.
  3. Examine the code of the app.js file. The default project creates a simple two-tab application. Each tab contains a window. Each window contains a label.
  4. Update the label on window 1 to read 'Hello World!' and save your changes.
  5. Click the Run button, then choose the appropriate build target.
  6. Test the application in the simulator/emulator. Close the simulator when you're done.
  7. Using Finder/Explorer, examine the project files created by Studio.

Summary

In this chapter, you took a brief look at creating Mobile applications. In the remainder of this course, we'll dig deep into the various aspects of creating mobile applications with the Titanium SDK, such as user interface construction, networking, localization, and much more.

Related Links