SlideShare a Scribd company logo
1 of 26
Download to read offline
Titanium Mobile: How-To




      Getting Started With Appcelerator Titanium

                                          For Mac




                                        Release GSM

                                       August 17, 2010
Getting Started with Appcelerator Titanium (Mac)



Copyright © 2010 Appcelerator, Inc. All rights reserved.
Appcelerator, Inc. 444 Castro Street, Suite 818, Mountain View, California 94041


No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, mechanical, elec-
tronic, photocopying, recording, or otherwise, without prior written permission of Appcelerator, Inc., with the following exceptions: Any per-
son is hereby authorized to store documentation on a single computer for personal use only and to print copies of documentation for
personal use provided that the documentation contains Appcelerator's copyright notice.
The Appcelerator name and logo are registered trademarks of Appcelerator, Inc. Appcelerator Titanium is a trademark of Appcelerator,
Inc. All other trademarks are the property of their respective owners.
No licenses, express or implied, are granted with respect to any of the technology described in this document. Appcelerator retains all
intellectual property rights associated with the technology described in this document.
Every effort has been made to ensure that the information in this document is accurate. Appcelerator is not responsible for typographical
or technical errors. Even though Appcelerator has reviewed this document, APPCELERATOR MAKES NO WARRANTY OR REPRESEN-
TATION, EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, ITS QUALITY, ACCURACY, MERCHANTABILITY,
OR FITNESS FOR A PARTICULAR PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED "AS IS," AND YOU, THE READER,
ARE ASSUMING THE ENTIRE RISK AS TO ITS QUALITY AND ACCURACY. IN NO EVENT WILL APPCELERATOR BE LIABLE FOR
DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES RESULTING FROM ANY DEFECT OR INACCURACY
IN THIS DOCUMENT, even if advised of the possibility of such damages. THE WARRANTY AND REMEDIES SET FORTH ABOVE ARE
EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORAL OR WRITTEN, EXPRESS OR IMPLIED. No Appcelerator dealer, agent, or employee
is authorized to make any modification, extension, or addition to this warranty. Some states do not allow the exclusion or limitation of
implied warranties or liability for incidental or consequential damages, so the above limitation or exclusion may not apply to you. This war-
ranty gives you specific legal rights, and you may also have other rights which vary from state to state.




2                                                                                                                  Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)



Contents


Step 0: Introduction .................................................................................................... 4
Step 0: Development environment requirements .......................................................................4

Step 1: Installing Titanium And Your SDK ................................................................ 5
Step 1: Install Titanium and mobile SDK’s (Mac OS X) ..............................................................5
   Install iOS (iPhone and iPad) SDK ........................................................................................6
   Install Android SDK ...............................................................................................................6
   Install Titanium Developer .....................................................................................................8

Step 2: Running the Sample Applications .............................................................. 11
Step 2: Run the sample mobile apps (Mac OS X) ................................................................... 11
   Create the HelloWorld project .............................................................................................12
   Run the default project for iPhone .......................................................................................14
   Edit the default project, creating “Hello World” on the iPhone .............................................15
   Run the default project for Android ......................................................................................17
   Edit the default project, creating “Hello World” on the Android ...........................................18
   Download the Kitchen Sink app ..........................................................................................20
   Import the Kitchen Sink project ...........................................................................................20
   Run KitchenSink on the iPhone emulator ............................................................................21
   Next steps ...........................................................................................................................23
   Troubleshooting ...................................................................................................................23




Release GSM, 8/17/10                                                                                                                          3
Getting Started with Appcelerator Titanium (Mac)                                                Step 0: Introduction




Step 0: Introduction
This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium
installed and working on your development system.
You’ve heard that Appcelerator Titanium can help you build your next great app. Let’s get started with the pro-
cess of installing and using Titanium. This document series covers “0 to 2” along fyour way to using Titanium
for application development.
• Step 0 covers your existing computer environment, specifying the supported operating systems that you can
  use with Titanium.
• In Step 1, you’ll learn how to download and install Titanium and the Apple and/or Android SDK’s so that
  you’re ready to start building apps.
• And then in Step 2, you’ll use JavaScript to build your first “HelloWorld” app, and then run our Kitchen Sink
  app that demonstrates most of the API’s that you can use in your own applications.
With Titanium, you can build apps for iPhone, iPad, and Android mobile platforms, as well as desktop apps for
Mac OS X, Windows, and Linux. This guide covers only the mobile platforms.
In Step 1 and Step 2, we’ll cover each of the mobile platforms, using each of the supported development envi-
ronments. You don’t have to read each section – just skip over the sections that don’t match your development
environment or your intended target platform.

Step 0: Development environment requirements
You’re ready to go – you’ve got your computer all set up,
and ready to start working with Titanium. These are the                  Supported Environments
development environments that are supported. You may           • Mac OS X 10.6.4 (Snow Leopard)
find that slightly down-rev operating systems work fine as     • Windows 7, XP and Vista
well, but these are the versions that we’ve tested.            • Ubuntu 9.10 (Karmic Koala)

If you’re developing for iPhone or iPad, you must use Mac
OS X for your development. Note that the current iOS (iPhone and iPad) SDK will not run on Mac OS X sys-
tems earlier than Snow Leopard.
Mac OS X
Using Mac OS X, you can build mobile apps for iPhone, iPad and Android.
We’ve tested Mac OS X version 10.6.4, but earlier versions of 10.6 (Snow Leopard) should work as well.
(Please let us know if you have any trouble.)
Windows
We have tested these procedures with Windows 7. You may be able to use earlier versions of Windows, but
we haven’t fully tested them, and they aren’t supported.
Linux
We’ve tested Titanium mobile development with Ubuntu 9.10 (Karmic Koala).
You can try using other Linux distributions to develop with Titanium, but this Ubuntu distribution is the one that
we test with and support. If you have trouble or success with another distribution, please let us know.




4                                                                                           Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                           Step 1: Installing Titanium And Your SDK



Step 1: Installing Titanium And Your SDK
This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium
installed and working on your development system.
This document is for development using a Macintosh. You can also develop using Windows or Linux, which are
covered in related sections.
For downloaded files, the filenames given here are current as of when we created this guide. In general, it
should be ok to use a later update of the listed files.

Step 1: Install Titanium and mobile SDK’s (Mac OS X)
Appcelerator’s Developer Web site contains information you’ll need to configure your development system,
and then begin development using the sample programs. Using your Web browser, navigate to
http://developer.appcelerator.com/get_started


Here’s the Web page you’ll see:




At the bottom of the page, you’ll see several helpful getting started videos that you can watch. You can watch
them now or later; when you’re ready, continue on with these instructions.
In this section, you’ll install the components on the right
that you’ll use to develop mobile applications with Tita-                  Components to Install
nium, using Mac OS X.                                         • Apple’s iOS SDK (for iPhone and iPad apps)
                                                              • Google’s Android SDK (for Android apps)
There are several API revision levels, and different ver-     • Specific platform packages in the Android
sions of the SDK’s that we’ll be navigating through in this     SDK
section. You’ll want to follow these installation steps in    • Titanium Developer
order.




Release GSM, 8/17/10                                                                                              5
Getting Started with Appcelerator Titanium (Mac)                               Step 1: Installing Titanium And Your SDK



Install iOS (iPhone and iPad) SDK
There are several steps along the way to installing the iOS SDK. To get started, go to:
http://developer.apple.com/


Here are the steps you’ll need to complete.
• Register as an Apple Developer, if you are not one already
• Agree to the Apple iPhone developer license
• Download and install XCode with the iOS SDK
Once you’ve agreed to the iOS developer license, there is an approval process before you go to the next step.
This approval generally takes only a few hours for individual developers, but can sometimes take several days
for a corporate account. Additionally, you’ll need a paid membership in the iPhone Developer Program when it
comes time for you to publish your app.
The above steps are done with Apple through Apple’s Web site, and don’t involve Appcelerator or Titanium.
It’s important to allow the SDK to install in the default location on your Mac. This is inside the “Developer” direc-
tory at the top level of your startup drive. (This will be a sibling directory to “Users”.) Once installed, it’s impor-
tant to avoid moving that directory – XCode will expect to see the various components in their default locations.
The SDK will take up about 6 GB, so be sure you have enough space on your startup drive for it.

Install Android SDK
There is no login or approval process for Android development. However, there are numerous steps that you
have to follow to download and install the Android SDK, and then register it for use in Titanium. In preparation,
it’s helpful to read about the Android SDK here:
http://developer.android.com/sdk/installing.html
When you’re ready, go to the Android SDK download page:
http://developer.android.com/sdk/index.html
In the following steps, we’ll show you how to:
• Download the Android SDK
• Install the Android SDK to the root drive
• Start the Android SDK and AVD Manager GUI
• Download and install the proper Android APIs
For development on the Mac, download android-sdk_r06-mac_86.zip, which should end up being automati-
cally unzipped into your Downloads folder. The Android SDK folder will be called
“android-sdk-mac_86”, and will take up about 1 GB.
Using the Finder, drag the “android-sdk-mac_86” from your Downloads directory to your root (startup) drive –
this is often called “Macintosh HD”. Rename the Android SDK folder to
“android-sdk”. Our examples expect this configuration, but you can actually put the Android SDK folder any-
where you like.
Although not essential, you may want to use the Terminal application on your Mac to work with the Android
tools. Here are the commands in Terminal that you could use to start up the Android SDK and AVD Manager
GUI.
$ cd /android-sdk/
$ tools/android




6                                                                                               Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                            Step 1: Installing Titanium And Your SDK



Alternatively, from the Finder, click on “android”, inside the tools folder, in your Android SDK folder. At this
point, you have the Android SDK and AVD Manager environment, and you are able to download the specific
Android SDK revision level that’s required for development using Titanium.




Inside the Android SDK and AVD Manager GUI, click on “Available Packages” in the left panel. Expand the list
in the right panel to see the various versions of the Android tools, and select the following items:
• SDK Platform Android 1.6, API 4, revision 3
• Google APIs by Google Inc., Android API 4, revision 2
As you develop and test for other versions of Android, you’ll want to install additional SDK and API versions.
But it will be easier for now to install only those listed above.
Now, click on “Install Selected”, click “Accept All” and “Install” on the confirmation screen, and the selected
components will be downloaded and installed.




Release GSM, 8/17/10                                                                                               7
Getting Started with Appcelerator Titanium (Mac)                             Step 1: Installing Titanium And Your SDK



Once this has completed, click on “Installed Packages” in the left panel to see what got installed. Your display
should look something like this:




After the installation has finished, close the Installer.
With these steps complete, all the tools needed by Titanium Developer are in place. When you create a Tita-
nium Mobile application, Developer will be able to find the tools it needs to compile your application, run the
emulator, and install your app.



Install Titanium Developer
In this section, you’ll install Titanium, and the Titanium Developer user interface. We’ll cover the following
steps:
• Download and install Titanium
• Create an Appcelerator account for Titanium development
• Connect your Android SDK with Titanium Developer
• Use the “New Project” button to verify proper SDK installation


Using your Web browser, again navigate to
http://developer.appcelerator.com/get_started




8                                                                                             Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                             Step 1: Installing Titanium And Your SDK



You’ll be returning to the Getting Started page you saw earlier:




Let’s install Titanium. First, click on the “Download and Install” link under Step 2 on the getting started page.
This will download “Titanium Developer.tgz” to your Downloads folder.
We’ll cover Step 3 on the getting started page a bit later, after we’ve finished installing Titanium, and after we
build a “Hello World” app from Titanium’s default sample application.
After the “Titanium Developer” disk image has mounted, open the “Titanium Developer” volume, and you’ll see
the “Titanium Developer.app” icon:




Copy “Titanium Developer.app” from the disk image to your Applications folder by dragging “Titanium Devel-
oper.app” to the Applications folder icon. Then unmount the disk image by dragging it to the trash, or selecting
“Eject” from the context menu when you click on the image icon.
It’s convenient to place an alias to the Titanium Developer app in your development folder. Whether you do that
or not, start Titanium Developer by double-clicking its icon.




Release GSM, 8/17/10                                                                                                 9
Getting Started with Appcelerator Titanium (Mac)                               Step 1: Installing Titanium And Your SDK



 The first time you start Titanium Developer, you’ll need to create an account with Appcelerator. This is free –
 just follow the instructions that appear on the screen in Developer. Be sure, of course, to remember the login
 credentials you create since you’ll use them to log in each time you use Titanium Developer.




 Titanium Developer will automatically find your iOS (iPhone) SDK installation, but you need to tell it where to
 find your Android SDK. After you’re logged in, click the Profile mini-icon in the Perspectives area, in the upper
 left corner of Titanium Developer’s main window. Your display will look like this:




 At the bottom of that window, you’ll see a field called “Android SDK” – click on the icon at the right of that field,
 and locate your Android SDK. If you followed our installation instructions above, you would enter the following
 pathname in the Android SDK field:
 /android-sdk


 Now select “Projects” from the Perspectives buttons at the top right corner of the Titanium Developer screen to
 begin development using Titanium. Let’s start with a New Project – click on the “New Project” button at the top
 of the screen. In the New Project panel, click on the “Project type” field and choose “Mobile” from the pop-up
 menu. In the lower part of the screen, you’ll see a line called “Installed Mobile Platforms”. After a few seconds




10                                                                                              Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                             Step 2: Running the Sample Applications



Titanium Developer should locate your iPhone and Android SDKs, and a green checkmark should appear for
each one.




If you followed all of these instructions, you installed both the iOS (iPhone) and Android SDK’s. However, you
can use Titanium to develop for only one of these platforms if you like – you don’t have to install both iOS and
Android. If you install only one, you’ll have one green checkmark and one red “X” in the “Installed Mobile Plat-
forms” field in the New Project panel in Titanium Developer.
Now you’ve successfully installed Titanium Developer, and at least one of the mobile SDK’s. Next, in Step 2,
you’ll start working with a “Hello World” app, and the Titanium sample applications.
Your Titanium account is available in several types, at different price points, with different support and training
resources. To get started, we’ll continue to use a Community account, which is free. When you get ready to
develop your own app using Titanium, you’ll want to consider upgrading your account to Titanium Professional
or Titanium Enterprise to help speed up your work.



Step 2: Running the Sample Applications
This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium
installed and working on your development system.
This document is for development using a Macintosh. You can also develop using Windows or Linux, which are
covered in related sections.

Step 2: Run the sample mobile apps (Mac OS X)
In this section, we’ll build a simple “HelloWorld” application in Titanium, and then we’ll run one of the sample
apps available on the Appcelerator Web site. We’ll configure this sample app to run on both iPhone and
Android to demonstrate how the same Titanium project can target both mobile platforms.
Step-by-step, here are the topics we’ll cover.
• Create a default project using Titanium — See Create the HelloWorld project on page 12
• Run the default project on the iPhone emulator — See Run the default project for iPhone on page 14
• Run the default project on the Android emulator — See Run the default project for Android on page 17
• Edit the default project’s source file (“Hello World”) — See Edit the default project, creating “Hello World”
 on the Android on page 18




Release GSM, 8/17/10                                                                                               11
Getting Started with Appcelerator Titanium (Mac)                            Step 2: Running the Sample Applications



 • Download Titanium’s Kitchen Sink app — See Download the Kitchen Sink app on page 20
 • Import the Kitchen Sink source code into Developer — See Import the Kitchen Sink project on page 20
 • Run the Kitchen Sink app on the iPhone emulator — See Run KitchenSink on the iPhone emulator on
     page 21
 • Run the Kitchen Sink app on the Android emulator — See Run KitchenSink on the Android emulator on
     page 22

 Create the HelloWorld project
 Let’s start where we left of at the end of Step 1. You should have Titanium’s New Project window open, ready
 to enter the details of your first app.




 Before you enter things into Titanium Developer’s New Project window, decide on a directory somewhere
 where the app’s source files will live. (Expect this to take about 300 MB.) Perhaps you created an Appcelerator
 directory inside your $HOME directory.
 We’ll call our app “HelloWorld”, so for our example, we’ll let Titanium Developer create the HelloWorld directory
 inside our existing Appcelerator directory. Let’s assume that $HOME is actually the
 /Users/devon directory for this example. Let’s also assume that your company name is devoncompanyinc, so
 your company’s URL would be www.devoncompanyinc.com.
 Now make entries like these in the New Project window:

     Project type:               Mobile
     Name:                       HelloWorld
     App Id:                     com.devoncompanyinc.helloworld
     Directory:                  /Users/devon/Appcelerator
     Company/Personal URL:       www.devoncompanyinc.com
     Titanium SDK version:       1.4.0




12                                                                                           Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                             Step 2: Running the Sample Applications




When you’ve filled in the fields, click “Create Project” to have Titanium Developer create all the source files for
your HelloWorld project. Titanium Developer will then open the HelloWorld project screen, which looks like this
one:




Using either Terminal or the Finder, you can explore the contents of the new HelloWorld directory. You’ll see
various files that are used by Titanium, plus a Resources folder – that’s where your JavaScript code goes. With
only a few exceptions which you’ll learn later, you should make all your changes in the Resources folder; the
other files and folders are used by Titanium, and you should not change them.
In the Resources folder, open app.js using your favorite text editor. You’ll see the JavaScript code for a simple
default project. In the next section we’ll run this application so you can see what it does. Later you’ll learn how
to deploy an app to a physical device; for now, we’ll run the HelloWorld app in an emulator on the Mac.




Release GSM, 8/17/10                                                                                              13
Getting Started with Appcelerator Titanium (Mac)                              Step 2: Running the Sample Applications



 Run the default project for iPhone
 To run the HelloWorld project we just created, click on the “Test & Package” tab at the top of the Titanium
 Developer window. That will bring up a screen like this:




 Click the iPhone tab if it’s not already selected to indicate that you’ll be using the iPhone emulator. (In the next
 section, we’ll repeat this process for Android.) If Titanium Developer has properly located the iPhone SDK,
 you’ll see the SDK field at the bottom of the screen populate with a pop-up list of available SDK versions.
 Select “3.1.3” from that list if it’s not already selected.
 Now, click on the “Launch” button to compile the JavaScript code and start the application in the iPhone emu-
 lator. You’ll see messages in the Titanium Developer window like these:




 It will take a couple of minutes for the application to build and for the emulator to launch.
 Eventually, you’ll see the emulated iPhone screen appear. This window looks just like an iPhone display. As
 the app starts executing in the emulated iPhone, it will automatically put up the Appcelerator logo.




14                                                                                               Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                               Step 2: Running the Sample Applications



Then the image will automatically flip to the “I am Window 1” display, with two tabs named (unsurprisingly) “Tab
1” and “Tab 2”.




This application doesn’t do much, but you’ll see that if you click on “Tab 2” at the bottom of the screen, the text
changes to “I am Window 2”. When you’re finished experimenting with the two tabs (which probably won’t be
very long!), return to the Titanium Developer window and click the “Stop” button at the bottom of it. This will ter-
minate the iPhone emulator.

Edit the default project, creating “Hello World” on the iPhone
Let’s change the message in the window to “Hello World!”. This requires only very simple edits to the app.js file
in the Resources folder, in the application’s source folder. In our example, that’s the /Users/Devon/Appcelera-
tor/HelloWorld source folder.
Again using your favorite text editor, open app.js. Search for “I am Window 1” – you’ll find this in the first half of
the app.js source file. Search also for “I am Window 2” which you’ll find in the second half of the app.js file.
Make the following changes in the app.js file:
• Change “I am Window 1” to “Hello World!”
• Change “I am Window 2” to “Hello again”


Look at the following code extracts from app.js to see exactly how to make these changes. Here’s the first sec-
tion of code, before the change of “I am Window 1” to “Hello World!”:
var label1 = Titanium.UI.createLabel({
     color:'#999',
     text:'I am Window 1',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});




Release GSM, 8/17/10                                                                                                 15
Getting Started with Appcelerator Titanium (Mac)                           Step 2: Running the Sample Applications



 And here’s what it will look like after your change:
 var label1 = Titanium.UI.createLabel({
      color:'#999',
      text:'Hello World!',
      font:{fontSize:20,fontFamily:'Helvetica Neue'},
      textAlign:'center',
      width:'auto'
 });


 Now, here’s the second section of code, before the change of “I am Window 2” to “Hello again”:
 var label2 = Titanium.UI.createLabel({
      color:'#999',
      text:'I am Window 2',
      font:{fontSize:20,fontFamily:'Helvetica Neue'},
      textAlign:'center',
      width:'auto'
 });


 And here’s what the second section will look like, after your change:
 var label2 = Titanium.UI.createLabel({
      color:'#999',
      text:'Hello again',
      font:{fontSize:20,fontFamily:'Helvetica Neue'},
      textAlign:'center',
      width:'auto'
 });

 Save your changes to app.js, go back to the Titanium Developer window, and again click “Launch” to start the
 changed application. Again Titanium will compile the JavaScript code (because you changed it), and eventu-
 ally it will relaunch the iPhone emulator. You’ll see your HelloWorld app automatically run on the emulated
 iPhone, and the message on the iPhone’s screen will be “Hello World!”.
 If you click “Tab 2”, the message should change to “Hello again”. When you’re finished playing with the tabs,
 return again to Titanium Developer’s window and click the “Stop” button to terminate the iPhone emulator.




16                                                                                         Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                              Step 2: Running the Sample Applications



Run the default project for Android
Development for Android is very similar to development for iPhone. If you did the iPhone steps above, you’ll
find much of the following to be essentially the same as what you’ve already done. Keep in mind that this sec-
tion is written comprehensively, so that it works for people who didn’t do the iPhone section.
To run the HelloWorld project we just created, click on the “Test & Package” tab at the top of the Titanium
Developer window. That will bring up this screen:




Click the Android tab if it’s not already selected to indicate that you’ll be using the Android emulator. If Titanium
Developer has properly located the Android SDK, you’ll see the SDK field at the bottom of the screen populate
with a pop-up list of available SDK versions. Select “APIs 1.6” from that list if it’s not already selected.
Now, click on the “Launch” button to compile the JavaScript code and start the application in the Android emu-
lator. You’ll see messages in the Titanium Developer window like these:




Release GSM, 8/17/10                                                                                                17
Getting Started with Appcelerator Titanium (Mac)                                Step 2: Running the Sample Applications



 It will take several minutes for the application to build, and for the emulator to launch and start up the applica-
 tion. Compared with the iPhone emulator, it takes much more time for the Android emulator to launch, and for
 the Hello World app to start up on the emulator. There’s no user intervention needed here; you just have to wait
 for Titantium Developer and the Android emulator to eventually start the app. If the Android emulator shows the
 “Locked” screen, press the emulator's “Menu” button to unlock it.
 When you finally see the emulated Android screen appear, you’ll see that this window looks just like an
 Android display. As the app starts executing in the emulated Android, it will automatically put up the Appceler-
 ator logo:
 Then the image will automatically flip to the “I am Window 1” display, with two tabs named (unsurprisingly) “Tab
 1” and “Tab 2”.




 This sample application doesn’t do much, but you’ll see that if you click on “Tab 2” at the bottom of the screen,
 the text changes to “I am Window 2”. When you’re finished experimenting with the two tabs (which probably
 won’t be very long!), return to the Titanium Developer window and click the “Stop” button at the bottom of it.
 This will terminate the Android emulator.
 If you don’t get the results you’re expecting, take a look at the Troubleshooting section below, and see if the
 suggestions there might help.

 Edit the default project, creating “Hello World” on the Android
 Let’s change the message in the window to “Hello World!”. This requires only very simple edits to the app.js file
 in the Resources folder, in the application’s source folder. In our example, that’s the /Users/Devon/Appcelera-
 tor/HelloWorld source folder.
 Again using your favorite text editor, open app.js. Search for “I am Window 1” – you’ll find this in the first half of
 the app.js source file. Search also for “I am Window 2” which you’ll find in the second half of the app.js file.
 Make the following changes in the app.js file:
 • Change “I am Window 1” to “Hello World!”
 • Change “I am Window 2” to “Hello again”




18                                                                                               Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                           Step 2: Running the Sample Applications



Look at the following code extracts from app.js to see exactly how to make these changes. Here’s the first sec-
tion of code, before the change of “I am Window 1” to “Hello World!”:
var label1 = Titanium.UI.createLabel({
     color:'#999',
     text:'I am Window 1',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});


And here’s what it will look like after your change:
var label1 = Titanium.UI.createLabel({
     color:'#999',
     text:'Hello World!',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});


Now, here’s the second section of code, before the change of “I am Window 2” to “Hello again”:
var label2 = Titanium.UI.createLabel({
     color:'#999',
     text:'I am Window 2',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});


And here’s what the second section will look like, after your change:
var label2 = Titanium.UI.createLabel({
     color:'#999',
     text:'Hello again',
     font:{fontSize:20,fontFamily:'Helvetica Neue'},
     textAlign:'center',
     width:'auto'
});


Save your changes to app.js, go back to the Titanium Developer window, and again click “Launch” to start the
changed application. Again Titanium will compile the JavaScript code (because you changed it), and eventu-
ally it will relaunch the Android emulator. If you experience timing issues between Titanium Developer and the
Android emulator, just click “Stop” and “Launch” to try again as described in the Troubleshooting section below.
You’ll see your HelloWorld app automatically run on the emulated Android, and the message on the Android’s
screen will be “Hello World!”. If you click “Tab 2”, the message should change to “Hello again”. When you’re fin-




Release GSM, 8/17/10                                                                                            19
Getting Started with Appcelerator Titanium (Mac)                            Step 2: Running the Sample Applications



 ished playing with the tabs, return again to Titanium Developer’s window and click the “Stop” button to termi-
 nate the Android emulator.




 Download the Kitchen Sink app
 Now that you’ve successfully built Titanium’s default project, let’s move on to build the much larger KitchenSink
 sample app. Appcelerator’s Kitchen Sink application demonstrates many of the APIs that are available in Tita-
 nium. You can adapt the code in the Kitchen Sink app to your own applications.
 The first step is to get the source code for the KitchenSink app, which you can download from Appcelerator’s
 Web site:
 http://developer.appcelerator.com/doc/kitchensink


 The source code repository lives on Github, and you can get the source code from there. Click on the link
 “Kitchen Sink on Github”, and from there, click on the “Download Source” button near the top of the Github
 page. The downloaded file will be an archive called something like
 “appcelerator-KitchenSink-1.3.3-1-g4d1c4f8.zip”.
 When you expand the archive (if it didn’t expand automatically), you’ll see KitchenSink and KitchenSink-iPad
 folders. Our examples assume that you’ll copy the KitchenSink folder into your existing Appcelerator folder –
 the Kitchen Sink source files would then live in /Users/Devon/Appcelerator/KitchenSink.

 Import the Kitchen Sink project
 Because the Kitchen Sink app is already a fully structured project, we’ll be importing this into Titanium Devel-
 oper. This contrasts with what we did earlier with the default project, where we created a new project from
 scratch. In that case, Titanium Developer created the default project, ready to edit.




20                                                                                          Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                           Step 2: Running the Sample Applications



To import the Kitchen Sink app’s source code, click the “Import Project” button at the top of Titanium Devel-
oper’s window. You’ll see the following dialog appear:




Click OK because we’re importing a mobile project. After a few moments, Titanium Developer will present the
following project screen:




Now the KitchenSink project is ready to go – the next step is to execute it on the iPhone and Android emula-
tors.



Run KitchenSink on the iPhone emulator
Just as you did with the default project, you’ll click on the “Test & Package” tab in Titanium Developer’s window
to run the KitchenSink app. Click the iPhone tab if it’s not already selected, and ensure that the SDK version is




Release GSM, 8/17/10                                                                                            21
Getting Started with Appcelerator Titanium (Mac)                            Step 2: Running the Sample Applications



 set to 3.1.3 just as you did with the default app. Then click “Launch” – your Titanium Developer screen should
 look like this:




 Notice that there are numerous warning and information messages that appear in Titanium Developer’s screen
 – these are expected.
 Eventually, the iPhone emulator should launch, and the app’s Kitchen Sink logo should automatically appear:




 After the logo flips, you’ll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. As
 you experiment with each of these, you’ll see that the Kitchen Sink app doesn’t “do” anything – it contains
 source code that illustrates how to incorporate lots of different elements into your own apps.

 Run KitchenSink on the Android emulator
 Just as you did with the default project, you’ll click on the “Test & Package” tab in Titanium Developer’s window
 to run the KitchenSink app. Click the Android tab if it’s not already selected, and ensure that the SDK version is




22                                                                                           Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)                          Step 2: Running the Sample Applications



set to “APIs 1.6” just as you did with the default app. Then click the “Launch” button, and your Titanium Devel-
oper screen should look like this:




Eventually, the Android emulator should launch, and the app’s Kitchen Sink logo should automatically appear.
After the logo flips, you’ll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. As
you experiment with each of these, you’ll see that the Kitchen Sink app doesn’t “do” anything – it contains
source code that illustrates how to incorporate lots of different elements into your own apps.




Next steps
Now that you’ve successfully built the default app and imported the Kitchen Sink app, you’re ready to start
looking at the JavaScript code for these and other sample apps.

Troubleshooting
You may encounter timing issues with Titanium Developer and the emulator. The last message you should see
in the Titanium Developer window is “[INFO] Deployed Hello World … Application should be running.” When
using the Android emulator, Titanium Developer sometimes times out before the emulator is ready to accept




Release GSM, 8/17/10                                                                                            23
Getting Started with Appcelerator Titanium (Mac)                                       Step 2: Running the Sample Applications



 the new application as input. If that happens, try again by clicking “Launch” again. Generally, this works after
 two or three tries. But be sure to wait a minute or two after the “… Application should be running.” message
 appears in Titanium Developer before deciding that the sample app didn’t start properly on the emulator. When
 this works properly, the sample app should automatically start on the emulator – there’s nothing you have to do
 on the emulator to start up the sample app.
 If your app doesn’t start, there are several additional things you can try. When using the Android emulator,
 some of these issues are more common after you’ve started the emulator several times.

 1. Read the messages in the Titanium Developer window to see if there are any clues to the problem. Also try changing
    the Filter to “Trace”, to view additional messages.
 2. Make sure you have enough free disk space and available RAM. The RAM requirements are very modest, so that’s
    unlikely to be a problem, and you should have at least 1 GB of free disk space at all times.
 3. When using the Android emulator, perhaps the adb server is stuck. In this case, you would restart the adb server like
    this:
     $ adb kill-server
     $ adb devices

 4. When using the Android emulator, check to see that there is exactly one Android emulator running. If there are two, then
     kill one of them.
 5. When using the Android emulator, in the Android SDK and AVD Manager, try killing any existing AVD’s, which will force
     Titanium to recreate them. This is not normally necessary, but can be needed if the AVD’s are out of order.
 6. Perhaps you have added too many apps to your emulated mobile device. If that happens, just remove some of the
     apps.
 7. Sometimes when importing Titanium projects, the build assets don’t import correctly, especially if you’re importing into a
     platform different from where the project was originally created. If this happens, you may need to copy the assets into a
     new project. To do this, create a new project and then replace its Resources directory with the Resources directory of
     the project that didn’t import successfully. Be aware that the TiApp.xml file includes the project id and other information,
     so it may have to be updated as well to reflect changes.
 8. Check how long the path to your project directory is. This is the full name of your project directory, starting from the root.
     Some Titanium errors are caused by a path that’s too long. Try using a shorter path to your source directory by moving
     your sources higher in the directory hierarchy.
 9. Titanium Developer has advanced proxy-detection capabilities, and will usually find a way to connect during authentica-
     tion when you log in. However, if you're in an unusual corporate network environment, you may require custom configu-
     ration of some environment variables.
 10. Check out the help resources on Appcelerator’s Developer Web. Point your browser to:
     http://developer.appcelerator.com/
     and click the Q&A tab. Many developers find answers to their questions here.
 11. Submit a support request. Be sure to include the following information with your support request:
       • What problem you’re experiencing
       • The version of Titanium you’re using
       • Whether you’re building a mobile or desktop app
       • Trace messages from Titanium Developer
       • The version(s) of the mobile tools (emulator) you have
       • The JDK version you’re using
       • Your operating system and version (e.g., Windows 7)
       • Anything else you think might be helpful to understanding your issue




24                                                                                                       Release GSM, 8/17/10
Getting Started with Appcelerator Titanium (Mac)




Revision History
8/5/2010        Initial release
8/17/2010       Minor formatting changes




Release GSM, 8/17/10                               25
Getting Started with Appcelerator Titanium (Mac)




26                                                 Release GSM, 8/17/10

More Related Content

Similar to Getting startedtitanium mac (1)

Essentials of developing_tizen_web_application_en_1.0
Essentials of developing_tizen_web_application_en_1.0Essentials of developing_tizen_web_application_en_1.0
Essentials of developing_tizen_web_application_en_1.0Saima Ashiq
 
Install shieldtuner7
Install shieldtuner7Install shieldtuner7
Install shieldtuner7kid_kaito
 
Orangescrum In App Chat Add-on User Manual
Orangescrum In App Chat Add-on User ManualOrangescrum In App Chat Add-on User Manual
Orangescrum In App Chat Add-on User ManualOrangescrum
 
Orangescrum Mobile API Add on User Manual
Orangescrum Mobile API Add on User ManualOrangescrum Mobile API Add on User Manual
Orangescrum Mobile API Add on User ManualOrangescrum
 
MonkeyTalk Documentation
MonkeyTalk DocumentationMonkeyTalk Documentation
MonkeyTalk DocumentationVivek Pansara
 
Laurentiu macovei meteor. a better way of building apps
Laurentiu macovei   meteor. a better way of building appsLaurentiu macovei   meteor. a better way of building apps
Laurentiu macovei meteor. a better way of building appsCodecamp Romania
 
Native Mobile Application Using Open Source
Native Mobile Application Using Open SourceNative Mobile Application Using Open Source
Native Mobile Application Using Open SourceAxway Appcelerator
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium TutorialKevin Whinnery
 
Get started with meteor | designveloper software agency meteor prime partner
Get started with meteor | designveloper software agency   meteor prime partnerGet started with meteor | designveloper software agency   meteor prime partner
Get started with meteor | designveloper software agency meteor prime partnerDesignveloper
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Sentinel Solutions Ltd
 
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIAdobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIeugeneyh
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Decksschwarzhoff
 
Joget v5 Getting Started Guide
Joget v5 Getting Started GuideJoget v5 Getting Started Guide
Joget v5 Getting Started GuideJoget Workflow
 
Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)Nicholas Jansma
 
Informatica Command Line Statements
Informatica Command Line StatementsInformatica Command Line Statements
Informatica Command Line Statementsmnsk80
 
Users Guide of AthTek WebXone
Users Guide of AthTek WebXoneUsers Guide of AthTek WebXone
Users Guide of AthTek WebXoneAthTek Software
 
Scaling mobile testing on AWS: Emulators all the way down
Scaling mobile testing on AWS: Emulators all the way downScaling mobile testing on AWS: Emulators all the way down
Scaling mobile testing on AWS: Emulators all the way downKim Moir
 

Similar to Getting startedtitanium mac (1) (20)

Essentials of developing_tizen_web_application_en_1.0
Essentials of developing_tizen_web_application_en_1.0Essentials of developing_tizen_web_application_en_1.0
Essentials of developing_tizen_web_application_en_1.0
 
Install shieldtuner7
Install shieldtuner7Install shieldtuner7
Install shieldtuner7
 
Orangescrum In App Chat Add-on User Manual
Orangescrum In App Chat Add-on User ManualOrangescrum In App Chat Add-on User Manual
Orangescrum In App Chat Add-on User Manual
 
Orangescrum Mobile API Add on User Manual
Orangescrum Mobile API Add on User ManualOrangescrum Mobile API Add on User Manual
Orangescrum Mobile API Add on User Manual
 
MonkeyTalk Documentation
MonkeyTalk DocumentationMonkeyTalk Documentation
MonkeyTalk Documentation
 
Laurentiu macovei meteor. a better way of building apps
Laurentiu macovei   meteor. a better way of building appsLaurentiu macovei   meteor. a better way of building apps
Laurentiu macovei meteor. a better way of building apps
 
Native Mobile Application Using Open Source
Native Mobile Application Using Open SourceNative Mobile Application Using Open Source
Native Mobile Application Using Open Source
 
OSCON Titanium Tutorial
OSCON Titanium TutorialOSCON Titanium Tutorial
OSCON Titanium Tutorial
 
Get started with meteor | designveloper software agency meteor prime partner
Get started with meteor | designveloper software agency   meteor prime partnerGet started with meteor | designveloper software agency   meteor prime partner
Get started with meteor | designveloper software agency meteor prime partner
 
Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]Titanium Studio [Updated - 18/12/2011]
Titanium Studio [Updated - 18/12/2011]
 
Adobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler APIAdobe Flex 3 - Compiler API
Adobe Flex 3 - Compiler API
 
Titanium Meetup Deck
Titanium Meetup DeckTitanium Meetup Deck
Titanium Meetup Deck
 
Android wear notes
Android wear notesAndroid wear notes
Android wear notes
 
Android wear notes
Android wear notesAndroid wear notes
Android wear notes
 
Joget v5 Getting Started Guide
Joget v5 Getting Started GuideJoget v5 Getting Started Guide
Joget v5 Getting Started Guide
 
Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)Appcelerator Titanium Intro (2014)
Appcelerator Titanium Intro (2014)
 
Rst4userguide
Rst4userguideRst4userguide
Rst4userguide
 
Informatica Command Line Statements
Informatica Command Line StatementsInformatica Command Line Statements
Informatica Command Line Statements
 
Users Guide of AthTek WebXone
Users Guide of AthTek WebXoneUsers Guide of AthTek WebXone
Users Guide of AthTek WebXone
 
Scaling mobile testing on AWS: Emulators all the way down
Scaling mobile testing on AWS: Emulators all the way downScaling mobile testing on AWS: Emulators all the way down
Scaling mobile testing on AWS: Emulators all the way down
 

Recently uploaded

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersThousandEyes
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?XfilesPro
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonetsnaman860154
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksSoftradix Technologies
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAndikSusilo4
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking MenDelhi Call girls
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Alan Dix
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationSafe Software
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountPuma Security, LLC
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking MenDelhi Call girls
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhisoniya singh
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024BookNet Canada
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machinePadma Pradeep
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Allon Mureinik
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking MenDelhi Call girls
 

Recently uploaded (20)

Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for PartnersEnhancing Worker Digital Experience: A Hands-on Workshop for Partners
Enhancing Worker Digital Experience: A Hands-on Workshop for Partners
 
How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?How to Remove Document Management Hurdles with X-Docs?
How to Remove Document Management Hurdles with X-Docs?
 
How to convert PDF to text with Nanonets
How to convert PDF to text with NanonetsHow to convert PDF to text with Nanonets
How to convert PDF to text with Nanonets
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Benefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other FrameworksBenefits Of Flutter Compared To Other Frameworks
Benefits Of Flutter Compared To Other Frameworks
 
Azure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & ApplicationAzure Monitor & Application Insight to monitor Infrastructure & Application
Azure Monitor & Application Insight to monitor Infrastructure & Application
 
The transition to renewables in India.pdf
The transition to renewables in India.pdfThe transition to renewables in India.pdf
The transition to renewables in India.pdf
 
08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men08448380779 Call Girls In Friends Colony Women Seeking Men
08448380779 Call Girls In Friends Colony Women Seeking Men
 
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...Swan(sea) Song – personal research during my six years at Swansea ... and bey...
Swan(sea) Song – personal research during my six years at Swansea ... and bey...
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry InnovationBeyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
Beyond Boundaries: Leveraging No-Code Solutions for Industry Innovation
 
Breaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path MountBreaking the Kubernetes Kill Chain: Host Path Mount
Breaking the Kubernetes Kill Chain: Host Path Mount
 
Pigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping ElbowsPigging Solutions Piggable Sweeping Elbows
Pigging Solutions Piggable Sweeping Elbows
 
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men08448380779 Call Girls In Greater Kailash - I Women Seeking Men
08448380779 Call Girls In Greater Kailash - I Women Seeking Men
 
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | DelhiFULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
FULL ENJOY 🔝 8264348440 🔝 Call Girls in Diplomatic Enclave | Delhi
 
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
#StandardsGoals for 2024: What’s new for BISAC - Tech Forum 2024
 
Install Stable Diffusion in windows machine
Install Stable Diffusion in windows machineInstall Stable Diffusion in windows machine
Install Stable Diffusion in windows machine
 
Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)Injustice - Developers Among Us (SciFiDevCon 2024)
Injustice - Developers Among Us (SciFiDevCon 2024)
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
08448380779 Call Girls In Diplomatic Enclave Women Seeking Men
 

Getting startedtitanium mac (1)

  • 1. Titanium Mobile: How-To Getting Started With Appcelerator Titanium For Mac Release GSM August 17, 2010
  • 2. Getting Started with Appcelerator Titanium (Mac) Copyright © 2010 Appcelerator, Inc. All rights reserved. Appcelerator, Inc. 444 Castro Street, Suite 818, Mountain View, California 94041 No part of this publication may be reproduced, stored in a retrieval system, or transmitted, in any form or by any means, mechanical, elec- tronic, photocopying, recording, or otherwise, without prior written permission of Appcelerator, Inc., with the following exceptions: Any per- son is hereby authorized to store documentation on a single computer for personal use only and to print copies of documentation for personal use provided that the documentation contains Appcelerator's copyright notice. The Appcelerator name and logo are registered trademarks of Appcelerator, Inc. Appcelerator Titanium is a trademark of Appcelerator, Inc. All other trademarks are the property of their respective owners. No licenses, express or implied, are granted with respect to any of the technology described in this document. Appcelerator retains all intellectual property rights associated with the technology described in this document. Every effort has been made to ensure that the information in this document is accurate. Appcelerator is not responsible for typographical or technical errors. Even though Appcelerator has reviewed this document, APPCELERATOR MAKES NO WARRANTY OR REPRESEN- TATION, EITHER EXPRESS OR IMPLIED, WITH RESPECT TO THIS DOCUMENT, ITS QUALITY, ACCURACY, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE. AS A RESULT, THIS DOCUMENT IS PROVIDED "AS IS," AND YOU, THE READER, ARE ASSUMING THE ENTIRE RISK AS TO ITS QUALITY AND ACCURACY. IN NO EVENT WILL APPCELERATOR BE LIABLE FOR DIRECT, INDIRECT, SPECIAL, INCIDENTAL, OR CONSEQUENTIAL DAMAGES RESULTING FROM ANY DEFECT OR INACCURACY IN THIS DOCUMENT, even if advised of the possibility of such damages. THE WARRANTY AND REMEDIES SET FORTH ABOVE ARE EXCLUSIVE AND IN LIEU OF ALL OTHERS, ORAL OR WRITTEN, EXPRESS OR IMPLIED. No Appcelerator dealer, agent, or employee is authorized to make any modification, extension, or addition to this warranty. Some states do not allow the exclusion or limitation of implied warranties or liability for incidental or consequential damages, so the above limitation or exclusion may not apply to you. This war- ranty gives you specific legal rights, and you may also have other rights which vary from state to state. 2 Release GSM, 8/17/10
  • 3. Getting Started with Appcelerator Titanium (Mac) Contents Step 0: Introduction .................................................................................................... 4 Step 0: Development environment requirements .......................................................................4 Step 1: Installing Titanium And Your SDK ................................................................ 5 Step 1: Install Titanium and mobile SDK’s (Mac OS X) ..............................................................5 Install iOS (iPhone and iPad) SDK ........................................................................................6 Install Android SDK ...............................................................................................................6 Install Titanium Developer .....................................................................................................8 Step 2: Running the Sample Applications .............................................................. 11 Step 2: Run the sample mobile apps (Mac OS X) ................................................................... 11 Create the HelloWorld project .............................................................................................12 Run the default project for iPhone .......................................................................................14 Edit the default project, creating “Hello World” on the iPhone .............................................15 Run the default project for Android ......................................................................................17 Edit the default project, creating “Hello World” on the Android ...........................................18 Download the Kitchen Sink app ..........................................................................................20 Import the Kitchen Sink project ...........................................................................................20 Run KitchenSink on the iPhone emulator ............................................................................21 Next steps ...........................................................................................................................23 Troubleshooting ...................................................................................................................23 Release GSM, 8/17/10 3
  • 4. Getting Started with Appcelerator Titanium (Mac) Step 0: Introduction Step 0: Introduction This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium installed and working on your development system. You’ve heard that Appcelerator Titanium can help you build your next great app. Let’s get started with the pro- cess of installing and using Titanium. This document series covers “0 to 2” along fyour way to using Titanium for application development. • Step 0 covers your existing computer environment, specifying the supported operating systems that you can use with Titanium. • In Step 1, you’ll learn how to download and install Titanium and the Apple and/or Android SDK’s so that you’re ready to start building apps. • And then in Step 2, you’ll use JavaScript to build your first “HelloWorld” app, and then run our Kitchen Sink app that demonstrates most of the API’s that you can use in your own applications. With Titanium, you can build apps for iPhone, iPad, and Android mobile platforms, as well as desktop apps for Mac OS X, Windows, and Linux. This guide covers only the mobile platforms. In Step 1 and Step 2, we’ll cover each of the mobile platforms, using each of the supported development envi- ronments. You don’t have to read each section – just skip over the sections that don’t match your development environment or your intended target platform. Step 0: Development environment requirements You’re ready to go – you’ve got your computer all set up, and ready to start working with Titanium. These are the Supported Environments development environments that are supported. You may • Mac OS X 10.6.4 (Snow Leopard) find that slightly down-rev operating systems work fine as • Windows 7, XP and Vista well, but these are the versions that we’ve tested. • Ubuntu 9.10 (Karmic Koala) If you’re developing for iPhone or iPad, you must use Mac OS X for your development. Note that the current iOS (iPhone and iPad) SDK will not run on Mac OS X sys- tems earlier than Snow Leopard. Mac OS X Using Mac OS X, you can build mobile apps for iPhone, iPad and Android. We’ve tested Mac OS X version 10.6.4, but earlier versions of 10.6 (Snow Leopard) should work as well. (Please let us know if you have any trouble.) Windows We have tested these procedures with Windows 7. You may be able to use earlier versions of Windows, but we haven’t fully tested them, and they aren’t supported. Linux We’ve tested Titanium mobile development with Ubuntu 9.10 (Karmic Koala). You can try using other Linux distributions to develop with Titanium, but this Ubuntu distribution is the one that we test with and support. If you have trouble or success with another distribution, please let us know. 4 Release GSM, 8/17/10
  • 5. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK Step 1: Installing Titanium And Your SDK This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium installed and working on your development system. This document is for development using a Macintosh. You can also develop using Windows or Linux, which are covered in related sections. For downloaded files, the filenames given here are current as of when we created this guide. In general, it should be ok to use a later update of the listed files. Step 1: Install Titanium and mobile SDK’s (Mac OS X) Appcelerator’s Developer Web site contains information you’ll need to configure your development system, and then begin development using the sample programs. Using your Web browser, navigate to http://developer.appcelerator.com/get_started Here’s the Web page you’ll see: At the bottom of the page, you’ll see several helpful getting started videos that you can watch. You can watch them now or later; when you’re ready, continue on with these instructions. In this section, you’ll install the components on the right that you’ll use to develop mobile applications with Tita- Components to Install nium, using Mac OS X. • Apple’s iOS SDK (for iPhone and iPad apps) • Google’s Android SDK (for Android apps) There are several API revision levels, and different ver- • Specific platform packages in the Android sions of the SDK’s that we’ll be navigating through in this SDK section. You’ll want to follow these installation steps in • Titanium Developer order. Release GSM, 8/17/10 5
  • 6. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK Install iOS (iPhone and iPad) SDK There are several steps along the way to installing the iOS SDK. To get started, go to: http://developer.apple.com/ Here are the steps you’ll need to complete. • Register as an Apple Developer, if you are not one already • Agree to the Apple iPhone developer license • Download and install XCode with the iOS SDK Once you’ve agreed to the iOS developer license, there is an approval process before you go to the next step. This approval generally takes only a few hours for individual developers, but can sometimes take several days for a corporate account. Additionally, you’ll need a paid membership in the iPhone Developer Program when it comes time for you to publish your app. The above steps are done with Apple through Apple’s Web site, and don’t involve Appcelerator or Titanium. It’s important to allow the SDK to install in the default location on your Mac. This is inside the “Developer” direc- tory at the top level of your startup drive. (This will be a sibling directory to “Users”.) Once installed, it’s impor- tant to avoid moving that directory – XCode will expect to see the various components in their default locations. The SDK will take up about 6 GB, so be sure you have enough space on your startup drive for it. Install Android SDK There is no login or approval process for Android development. However, there are numerous steps that you have to follow to download and install the Android SDK, and then register it for use in Titanium. In preparation, it’s helpful to read about the Android SDK here: http://developer.android.com/sdk/installing.html When you’re ready, go to the Android SDK download page: http://developer.android.com/sdk/index.html In the following steps, we’ll show you how to: • Download the Android SDK • Install the Android SDK to the root drive • Start the Android SDK and AVD Manager GUI • Download and install the proper Android APIs For development on the Mac, download android-sdk_r06-mac_86.zip, which should end up being automati- cally unzipped into your Downloads folder. The Android SDK folder will be called “android-sdk-mac_86”, and will take up about 1 GB. Using the Finder, drag the “android-sdk-mac_86” from your Downloads directory to your root (startup) drive – this is often called “Macintosh HD”. Rename the Android SDK folder to “android-sdk”. Our examples expect this configuration, but you can actually put the Android SDK folder any- where you like. Although not essential, you may want to use the Terminal application on your Mac to work with the Android tools. Here are the commands in Terminal that you could use to start up the Android SDK and AVD Manager GUI. $ cd /android-sdk/ $ tools/android 6 Release GSM, 8/17/10
  • 7. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK Alternatively, from the Finder, click on “android”, inside the tools folder, in your Android SDK folder. At this point, you have the Android SDK and AVD Manager environment, and you are able to download the specific Android SDK revision level that’s required for development using Titanium. Inside the Android SDK and AVD Manager GUI, click on “Available Packages” in the left panel. Expand the list in the right panel to see the various versions of the Android tools, and select the following items: • SDK Platform Android 1.6, API 4, revision 3 • Google APIs by Google Inc., Android API 4, revision 2 As you develop and test for other versions of Android, you’ll want to install additional SDK and API versions. But it will be easier for now to install only those listed above. Now, click on “Install Selected”, click “Accept All” and “Install” on the confirmation screen, and the selected components will be downloaded and installed. Release GSM, 8/17/10 7
  • 8. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK Once this has completed, click on “Installed Packages” in the left panel to see what got installed. Your display should look something like this: After the installation has finished, close the Installer. With these steps complete, all the tools needed by Titanium Developer are in place. When you create a Tita- nium Mobile application, Developer will be able to find the tools it needs to compile your application, run the emulator, and install your app. Install Titanium Developer In this section, you’ll install Titanium, and the Titanium Developer user interface. We’ll cover the following steps: • Download and install Titanium • Create an Appcelerator account for Titanium development • Connect your Android SDK with Titanium Developer • Use the “New Project” button to verify proper SDK installation Using your Web browser, again navigate to http://developer.appcelerator.com/get_started 8 Release GSM, 8/17/10
  • 9. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK You’ll be returning to the Getting Started page you saw earlier: Let’s install Titanium. First, click on the “Download and Install” link under Step 2 on the getting started page. This will download “Titanium Developer.tgz” to your Downloads folder. We’ll cover Step 3 on the getting started page a bit later, after we’ve finished installing Titanium, and after we build a “Hello World” app from Titanium’s default sample application. After the “Titanium Developer” disk image has mounted, open the “Titanium Developer” volume, and you’ll see the “Titanium Developer.app” icon: Copy “Titanium Developer.app” from the disk image to your Applications folder by dragging “Titanium Devel- oper.app” to the Applications folder icon. Then unmount the disk image by dragging it to the trash, or selecting “Eject” from the context menu when you click on the image icon. It’s convenient to place an alias to the Titanium Developer app in your development folder. Whether you do that or not, start Titanium Developer by double-clicking its icon. Release GSM, 8/17/10 9
  • 10. Getting Started with Appcelerator Titanium (Mac) Step 1: Installing Titanium And Your SDK The first time you start Titanium Developer, you’ll need to create an account with Appcelerator. This is free – just follow the instructions that appear on the screen in Developer. Be sure, of course, to remember the login credentials you create since you’ll use them to log in each time you use Titanium Developer. Titanium Developer will automatically find your iOS (iPhone) SDK installation, but you need to tell it where to find your Android SDK. After you’re logged in, click the Profile mini-icon in the Perspectives area, in the upper left corner of Titanium Developer’s main window. Your display will look like this: At the bottom of that window, you’ll see a field called “Android SDK” – click on the icon at the right of that field, and locate your Android SDK. If you followed our installation instructions above, you would enter the following pathname in the Android SDK field: /android-sdk Now select “Projects” from the Perspectives buttons at the top right corner of the Titanium Developer screen to begin development using Titanium. Let’s start with a New Project – click on the “New Project” button at the top of the screen. In the New Project panel, click on the “Project type” field and choose “Mobile” from the pop-up menu. In the lower part of the screen, you’ll see a line called “Installed Mobile Platforms”. After a few seconds 10 Release GSM, 8/17/10
  • 11. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications Titanium Developer should locate your iPhone and Android SDKs, and a green checkmark should appear for each one. If you followed all of these instructions, you installed both the iOS (iPhone) and Android SDK’s. However, you can use Titanium to develop for only one of these platforms if you like – you don’t have to install both iOS and Android. If you install only one, you’ll have one green checkmark and one red “X” in the “Installed Mobile Plat- forms” field in the New Project panel in Titanium Developer. Now you’ve successfully installed Titanium Developer, and at least one of the mobile SDK’s. Next, in Step 2, you’ll start working with a “Hello World” app, and the Titanium sample applications. Your Titanium account is available in several types, at different price points, with different support and training resources. To get started, we’ll continue to use a Community account, which is free. When you get ready to develop your own app using Titanium, you’ll want to consider upgrading your account to Titanium Professional or Titanium Enterprise to help speed up your work. Step 2: Running the Sample Applications This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titanium installed and working on your development system. This document is for development using a Macintosh. You can also develop using Windows or Linux, which are covered in related sections. Step 2: Run the sample mobile apps (Mac OS X) In this section, we’ll build a simple “HelloWorld” application in Titanium, and then we’ll run one of the sample apps available on the Appcelerator Web site. We’ll configure this sample app to run on both iPhone and Android to demonstrate how the same Titanium project can target both mobile platforms. Step-by-step, here are the topics we’ll cover. • Create a default project using Titanium — See Create the HelloWorld project on page 12 • Run the default project on the iPhone emulator — See Run the default project for iPhone on page 14 • Run the default project on the Android emulator — See Run the default project for Android on page 17 • Edit the default project’s source file (“Hello World”) — See Edit the default project, creating “Hello World” on the Android on page 18 Release GSM, 8/17/10 11
  • 12. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications • Download Titanium’s Kitchen Sink app — See Download the Kitchen Sink app on page 20 • Import the Kitchen Sink source code into Developer — See Import the Kitchen Sink project on page 20 • Run the Kitchen Sink app on the iPhone emulator — See Run KitchenSink on the iPhone emulator on page 21 • Run the Kitchen Sink app on the Android emulator — See Run KitchenSink on the Android emulator on page 22 Create the HelloWorld project Let’s start where we left of at the end of Step 1. You should have Titanium’s New Project window open, ready to enter the details of your first app. Before you enter things into Titanium Developer’s New Project window, decide on a directory somewhere where the app’s source files will live. (Expect this to take about 300 MB.) Perhaps you created an Appcelerator directory inside your $HOME directory. We’ll call our app “HelloWorld”, so for our example, we’ll let Titanium Developer create the HelloWorld directory inside our existing Appcelerator directory. Let’s assume that $HOME is actually the /Users/devon directory for this example. Let’s also assume that your company name is devoncompanyinc, so your company’s URL would be www.devoncompanyinc.com. Now make entries like these in the New Project window: Project type: Mobile Name: HelloWorld App Id: com.devoncompanyinc.helloworld Directory: /Users/devon/Appcelerator Company/Personal URL: www.devoncompanyinc.com Titanium SDK version: 1.4.0 12 Release GSM, 8/17/10
  • 13. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications When you’ve filled in the fields, click “Create Project” to have Titanium Developer create all the source files for your HelloWorld project. Titanium Developer will then open the HelloWorld project screen, which looks like this one: Using either Terminal or the Finder, you can explore the contents of the new HelloWorld directory. You’ll see various files that are used by Titanium, plus a Resources folder – that’s where your JavaScript code goes. With only a few exceptions which you’ll learn later, you should make all your changes in the Resources folder; the other files and folders are used by Titanium, and you should not change them. In the Resources folder, open app.js using your favorite text editor. You’ll see the JavaScript code for a simple default project. In the next section we’ll run this application so you can see what it does. Later you’ll learn how to deploy an app to a physical device; for now, we’ll run the HelloWorld app in an emulator on the Mac. Release GSM, 8/17/10 13
  • 14. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications Run the default project for iPhone To run the HelloWorld project we just created, click on the “Test & Package” tab at the top of the Titanium Developer window. That will bring up a screen like this: Click the iPhone tab if it’s not already selected to indicate that you’ll be using the iPhone emulator. (In the next section, we’ll repeat this process for Android.) If Titanium Developer has properly located the iPhone SDK, you’ll see the SDK field at the bottom of the screen populate with a pop-up list of available SDK versions. Select “3.1.3” from that list if it’s not already selected. Now, click on the “Launch” button to compile the JavaScript code and start the application in the iPhone emu- lator. You’ll see messages in the Titanium Developer window like these: It will take a couple of minutes for the application to build and for the emulator to launch. Eventually, you’ll see the emulated iPhone screen appear. This window looks just like an iPhone display. As the app starts executing in the emulated iPhone, it will automatically put up the Appcelerator logo. 14 Release GSM, 8/17/10
  • 15. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications Then the image will automatically flip to the “I am Window 1” display, with two tabs named (unsurprisingly) “Tab 1” and “Tab 2”. This application doesn’t do much, but you’ll see that if you click on “Tab 2” at the bottom of the screen, the text changes to “I am Window 2”. When you’re finished experimenting with the two tabs (which probably won’t be very long!), return to the Titanium Developer window and click the “Stop” button at the bottom of it. This will ter- minate the iPhone emulator. Edit the default project, creating “Hello World” on the iPhone Let’s change the message in the window to “Hello World!”. This requires only very simple edits to the app.js file in the Resources folder, in the application’s source folder. In our example, that’s the /Users/Devon/Appcelera- tor/HelloWorld source folder. Again using your favorite text editor, open app.js. Search for “I am Window 1” – you’ll find this in the first half of the app.js source file. Search also for “I am Window 2” which you’ll find in the second half of the app.js file. Make the following changes in the app.js file: • Change “I am Window 1” to “Hello World!” • Change “I am Window 2” to “Hello again” Look at the following code extracts from app.js to see exactly how to make these changes. Here’s the first sec- tion of code, before the change of “I am Window 1” to “Hello World!”: var label1 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 1', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); Release GSM, 8/17/10 15
  • 16. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications And here’s what it will look like after your change: var label1 = Titanium.UI.createLabel({ color:'#999', text:'Hello World!', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); Now, here’s the second section of code, before the change of “I am Window 2” to “Hello again”: var label2 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 2', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); And here’s what the second section will look like, after your change: var label2 = Titanium.UI.createLabel({ color:'#999', text:'Hello again', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); Save your changes to app.js, go back to the Titanium Developer window, and again click “Launch” to start the changed application. Again Titanium will compile the JavaScript code (because you changed it), and eventu- ally it will relaunch the iPhone emulator. You’ll see your HelloWorld app automatically run on the emulated iPhone, and the message on the iPhone’s screen will be “Hello World!”. If you click “Tab 2”, the message should change to “Hello again”. When you’re finished playing with the tabs, return again to Titanium Developer’s window and click the “Stop” button to terminate the iPhone emulator. 16 Release GSM, 8/17/10
  • 17. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications Run the default project for Android Development for Android is very similar to development for iPhone. If you did the iPhone steps above, you’ll find much of the following to be essentially the same as what you’ve already done. Keep in mind that this sec- tion is written comprehensively, so that it works for people who didn’t do the iPhone section. To run the HelloWorld project we just created, click on the “Test & Package” tab at the top of the Titanium Developer window. That will bring up this screen: Click the Android tab if it’s not already selected to indicate that you’ll be using the Android emulator. If Titanium Developer has properly located the Android SDK, you’ll see the SDK field at the bottom of the screen populate with a pop-up list of available SDK versions. Select “APIs 1.6” from that list if it’s not already selected. Now, click on the “Launch” button to compile the JavaScript code and start the application in the Android emu- lator. You’ll see messages in the Titanium Developer window like these: Release GSM, 8/17/10 17
  • 18. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications It will take several minutes for the application to build, and for the emulator to launch and start up the applica- tion. Compared with the iPhone emulator, it takes much more time for the Android emulator to launch, and for the Hello World app to start up on the emulator. There’s no user intervention needed here; you just have to wait for Titantium Developer and the Android emulator to eventually start the app. If the Android emulator shows the “Locked” screen, press the emulator's “Menu” button to unlock it. When you finally see the emulated Android screen appear, you’ll see that this window looks just like an Android display. As the app starts executing in the emulated Android, it will automatically put up the Appceler- ator logo: Then the image will automatically flip to the “I am Window 1” display, with two tabs named (unsurprisingly) “Tab 1” and “Tab 2”. This sample application doesn’t do much, but you’ll see that if you click on “Tab 2” at the bottom of the screen, the text changes to “I am Window 2”. When you’re finished experimenting with the two tabs (which probably won’t be very long!), return to the Titanium Developer window and click the “Stop” button at the bottom of it. This will terminate the Android emulator. If you don’t get the results you’re expecting, take a look at the Troubleshooting section below, and see if the suggestions there might help. Edit the default project, creating “Hello World” on the Android Let’s change the message in the window to “Hello World!”. This requires only very simple edits to the app.js file in the Resources folder, in the application’s source folder. In our example, that’s the /Users/Devon/Appcelera- tor/HelloWorld source folder. Again using your favorite text editor, open app.js. Search for “I am Window 1” – you’ll find this in the first half of the app.js source file. Search also for “I am Window 2” which you’ll find in the second half of the app.js file. Make the following changes in the app.js file: • Change “I am Window 1” to “Hello World!” • Change “I am Window 2” to “Hello again” 18 Release GSM, 8/17/10
  • 19. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications Look at the following code extracts from app.js to see exactly how to make these changes. Here’s the first sec- tion of code, before the change of “I am Window 1” to “Hello World!”: var label1 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 1', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); And here’s what it will look like after your change: var label1 = Titanium.UI.createLabel({ color:'#999', text:'Hello World!', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); Now, here’s the second section of code, before the change of “I am Window 2” to “Hello again”: var label2 = Titanium.UI.createLabel({ color:'#999', text:'I am Window 2', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); And here’s what the second section will look like, after your change: var label2 = Titanium.UI.createLabel({ color:'#999', text:'Hello again', font:{fontSize:20,fontFamily:'Helvetica Neue'}, textAlign:'center', width:'auto' }); Save your changes to app.js, go back to the Titanium Developer window, and again click “Launch” to start the changed application. Again Titanium will compile the JavaScript code (because you changed it), and eventu- ally it will relaunch the Android emulator. If you experience timing issues between Titanium Developer and the Android emulator, just click “Stop” and “Launch” to try again as described in the Troubleshooting section below. You’ll see your HelloWorld app automatically run on the emulated Android, and the message on the Android’s screen will be “Hello World!”. If you click “Tab 2”, the message should change to “Hello again”. When you’re fin- Release GSM, 8/17/10 19
  • 20. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications ished playing with the tabs, return again to Titanium Developer’s window and click the “Stop” button to termi- nate the Android emulator. Download the Kitchen Sink app Now that you’ve successfully built Titanium’s default project, let’s move on to build the much larger KitchenSink sample app. Appcelerator’s Kitchen Sink application demonstrates many of the APIs that are available in Tita- nium. You can adapt the code in the Kitchen Sink app to your own applications. The first step is to get the source code for the KitchenSink app, which you can download from Appcelerator’s Web site: http://developer.appcelerator.com/doc/kitchensink The source code repository lives on Github, and you can get the source code from there. Click on the link “Kitchen Sink on Github”, and from there, click on the “Download Source” button near the top of the Github page. The downloaded file will be an archive called something like “appcelerator-KitchenSink-1.3.3-1-g4d1c4f8.zip”. When you expand the archive (if it didn’t expand automatically), you’ll see KitchenSink and KitchenSink-iPad folders. Our examples assume that you’ll copy the KitchenSink folder into your existing Appcelerator folder – the Kitchen Sink source files would then live in /Users/Devon/Appcelerator/KitchenSink. Import the Kitchen Sink project Because the Kitchen Sink app is already a fully structured project, we’ll be importing this into Titanium Devel- oper. This contrasts with what we did earlier with the default project, where we created a new project from scratch. In that case, Titanium Developer created the default project, ready to edit. 20 Release GSM, 8/17/10
  • 21. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications To import the Kitchen Sink app’s source code, click the “Import Project” button at the top of Titanium Devel- oper’s window. You’ll see the following dialog appear: Click OK because we’re importing a mobile project. After a few moments, Titanium Developer will present the following project screen: Now the KitchenSink project is ready to go – the next step is to execute it on the iPhone and Android emula- tors. Run KitchenSink on the iPhone emulator Just as you did with the default project, you’ll click on the “Test & Package” tab in Titanium Developer’s window to run the KitchenSink app. Click the iPhone tab if it’s not already selected, and ensure that the SDK version is Release GSM, 8/17/10 21
  • 22. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications set to 3.1.3 just as you did with the default app. Then click “Launch” – your Titanium Developer screen should look like this: Notice that there are numerous warning and information messages that appear in Titanium Developer’s screen – these are expected. Eventually, the iPhone emulator should launch, and the app’s Kitchen Sink logo should automatically appear: After the logo flips, you’ll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. As you experiment with each of these, you’ll see that the Kitchen Sink app doesn’t “do” anything – it contains source code that illustrates how to incorporate lots of different elements into your own apps. Run KitchenSink on the Android emulator Just as you did with the default project, you’ll click on the “Test & Package” tab in Titanium Developer’s window to run the KitchenSink app. Click the Android tab if it’s not already selected, and ensure that the SDK version is 22 Release GSM, 8/17/10
  • 23. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications set to “APIs 1.6” just as you did with the default app. Then click the “Launch” button, and your Titanium Devel- oper screen should look like this: Eventually, the Android emulator should launch, and the app’s Kitchen Sink logo should automatically appear. After the logo flips, you’ll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. As you experiment with each of these, you’ll see that the Kitchen Sink app doesn’t “do” anything – it contains source code that illustrates how to incorporate lots of different elements into your own apps. Next steps Now that you’ve successfully built the default app and imported the Kitchen Sink app, you’re ready to start looking at the JavaScript code for these and other sample apps. Troubleshooting You may encounter timing issues with Titanium Developer and the emulator. The last message you should see in the Titanium Developer window is “[INFO] Deployed Hello World … Application should be running.” When using the Android emulator, Titanium Developer sometimes times out before the emulator is ready to accept Release GSM, 8/17/10 23
  • 24. Getting Started with Appcelerator Titanium (Mac) Step 2: Running the Sample Applications the new application as input. If that happens, try again by clicking “Launch” again. Generally, this works after two or three tries. But be sure to wait a minute or two after the “… Application should be running.” message appears in Titanium Developer before deciding that the sample app didn’t start properly on the emulator. When this works properly, the sample app should automatically start on the emulator – there’s nothing you have to do on the emulator to start up the sample app. If your app doesn’t start, there are several additional things you can try. When using the Android emulator, some of these issues are more common after you’ve started the emulator several times. 1. Read the messages in the Titanium Developer window to see if there are any clues to the problem. Also try changing the Filter to “Trace”, to view additional messages. 2. Make sure you have enough free disk space and available RAM. The RAM requirements are very modest, so that’s unlikely to be a problem, and you should have at least 1 GB of free disk space at all times. 3. When using the Android emulator, perhaps the adb server is stuck. In this case, you would restart the adb server like this: $ adb kill-server $ adb devices 4. When using the Android emulator, check to see that there is exactly one Android emulator running. If there are two, then kill one of them. 5. When using the Android emulator, in the Android SDK and AVD Manager, try killing any existing AVD’s, which will force Titanium to recreate them. This is not normally necessary, but can be needed if the AVD’s are out of order. 6. Perhaps you have added too many apps to your emulated mobile device. If that happens, just remove some of the apps. 7. Sometimes when importing Titanium projects, the build assets don’t import correctly, especially if you’re importing into a platform different from where the project was originally created. If this happens, you may need to copy the assets into a new project. To do this, create a new project and then replace its Resources directory with the Resources directory of the project that didn’t import successfully. Be aware that the TiApp.xml file includes the project id and other information, so it may have to be updated as well to reflect changes. 8. Check how long the path to your project directory is. This is the full name of your project directory, starting from the root. Some Titanium errors are caused by a path that’s too long. Try using a shorter path to your source directory by moving your sources higher in the directory hierarchy. 9. Titanium Developer has advanced proxy-detection capabilities, and will usually find a way to connect during authentica- tion when you log in. However, if you're in an unusual corporate network environment, you may require custom configu- ration of some environment variables. 10. Check out the help resources on Appcelerator’s Developer Web. Point your browser to: http://developer.appcelerator.com/ and click the Q&A tab. Many developers find answers to their questions here. 11. Submit a support request. Be sure to include the following information with your support request: • What problem you’re experiencing • The version of Titanium you’re using • Whether you’re building a mobile or desktop app • Trace messages from Titanium Developer • The version(s) of the mobile tools (emulator) you have • The JDK version you’re using • Your operating system and version (e.g., Windows 7) • Anything else you think might be helpful to understanding your issue 24 Release GSM, 8/17/10
  • 25. Getting Started with Appcelerator Titanium (Mac) Revision History 8/5/2010 Initial release 8/17/2010 Minor formatting changes Release GSM, 8/17/10 25
  • 26. Getting Started with Appcelerator Titanium (Mac) 26 Release GSM, 8/17/10