How to Build a Mobile Application with Appcelerator Titanium

APPC_landscape

Today we will look at another cross platform app development tool – Appcelerator Titanium.

PhoneGap allows us to build an app that supports a variety of platforms , We were only left with the user interface (UI) that did not offer the same experience as that in a native application. Our PhoneGap solution rendered the UI with HTML5 and CSS3.

Appcelerator Titanium apps are used to provide the experience of a native UI, along with portability between the iOS, Android, and BlackBerry platforms.

Titanium provides UI objects for things like buttons, text fields, and lists and so on, and these are backed by the mobile platform’s truly faithful representation of the respective native controls

Appcelerator consists of a suite of products, including the Titanium SDK for building mobile applications, and some cloud services that can be used for the back end of the application.

An Eclipse-based IDE named Titanium Studio is offered by Appcelerator. This IDE contains a JavaScript editing environment, along with a source-level debugger.

03-titanium-studio-ide
Titanium Studio IDE overview. (Large preview)

Starting Your First Project 

  1. To use Titanium, you must create   a free developer account on the Titanium website.
  2. Once you have a developer account, you’ll have access to Appcelerator’s developer resources
  3. Now install the native SDKs for the platforms you wish to support.
  4. From the “File” menu, choose “New” → “Mobile App Project.” This will open a dialog box that lets you choose an Alloy or Classic development project.
  5. Selecting the “Default Alloy” project will give you a simple project with one “Hello World” screen, a useful starting point. Clicking “Next” opens the next dialog:
  6. Running the app is as easy as selecting a simulator in the device drop-down menu and pressing the “Run” button:
  7. 26615-07-run-on-ios
  1. The “Run” button has a drop-down menu of its own that provides options for debugging and packaging your application for distribution.

Defining The UI

On the first screen of our application, the UI is defined by the views/calculator.xmlfile. It contains elements to describe each TextField, Button, Label and so on on the screen.

Navigating Between Screens: Dealing With Platform Differences

function clickedSettings(e) {

var settingsController = Alloy.createController(‘settings’);

var win = settingsController.getView();

if (Alloy.Globals.navgroup) {

Alloy.Globals.navgroup.openWindow(win);

} else if (OS_ANDROID) {

win.open();

}

}

Appcelerator Titanium: Right for Your Project? 

With respect to the cross platform development, gives the better user experience than an HTML based solution like phonegap. Now you can access cutting edge features with a tool from a third party vendor.

Hope this article help you create a successful mobile app for android platforms.

Custom Web Development Agency : iMediadesigns is a reputed It industry which offers custom web design services in Toronto.

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s