gettingstarted titanium mac

Upload: urlingo

Post on 09-Apr-2018

218 views

Category:

Documents


0 download

TRANSCRIPT

  • 8/8/2019 Gettingstarted Titanium Mac

    1/26

    Titanium Mobile: How-To

    Getting Started With Appcelerator Titanium

    August 17, 2010

    Release GSM

    For Mac

  • 8/8/2019 Gettingstarted Titanium Mac

    2/26

    Getting Started with Appcelerator Titanium (Mac)

    2 Release GSM, 8/17/10

    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 INACCURACYIN 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 ofimplied 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.

  • 8/8/2019 Gettingstarted Titanium Mac

    3/26

    3

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    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 SDKs (Mac OS X) ..............................................................5

    Install iOS (iPhone and iPad) SDK ........................................................................................6Install Android SDK ...............................................................................................................6Install 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 .............................................................................................12Run the default project for iPhone .......................................................................................14Edit the default project, creating Hello World on the iPhone .............................................15Run the default project for Android ......................................................................................17Edit the default project, creating Hello World on the Android ...........................................18Download the Kitchen Sink app ..........................................................................................20Import the Kitchen Sink project ...........................................................................................20Run KitchenSink on the iPhone emulator ............................................................................21Next steps ...........................................................................................................................23Troubleshooting ...................................................................................................................23

  • 8/8/2019 Gettingstarted Titanium Mac

    4/26

    Step 0: IntroductionGetting Started with Appcelerator Titanium (Mac)

    4 Release GSM, 8/17/10

    Step 0: Introduction

    This section is part of the Titanium Getting Started series, covering the Steps 0 through 2 of getting Titaniuminstalled and working on your development system.

    Youve heard that Appcelerator Titanium can help you build your next great app. Lets get started with the pro-cess of installing and using Titanium. This document series covers 0 to 2 along fyour way to using Titaniumfor application development.

    Step 0 covers your existing computer environment, specifying the supported operating systems that you canuse with Titanium.

    In Step 1, youll learn how to download and install Titanium and the Apple and/or Android SDKs so thatyoure ready to start building apps.

    And then in Step 2, youll use JavaScript to build your first HelloWorld app, and then run our Kitchen Sinkapp that demonstrates most of the APIs 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 forMac OS X, Windows, and Linux. This guide covers only the mobile platforms.

    In Step 1 and Step 2, well cover each of the mobile platforms, using each of the supported development envi-ronments. You dont have to read each section just skip over the sections that dont match your development

    environment or your intended target platform.

    Step 0: Development environment requirements

    Youre ready to go youve got your computer all set up,and ready to start working with Titanium. These are thedevelopment environments that are supported. You mayfind that slightly down-rev operating systems work fine aswell, but these are the versions that weve tested.

    If youre developing for iPhone or iPad, you must use MacOS 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.

    Weve 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, butwe havent fully tested them, and they arent supported.

    Linux

    Weve 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 thatwe test with and support. If you have trouble or success with another distribution, please let us know.

    Supported Environments

    Mac OS X 10.6.4 (Snow Leopard) Windows 7, XP and Vista Ubuntu 9.10 (Karmic Koala)

  • 8/8/2019 Gettingstarted Titanium Mac

    5/26

    Step 1: Installing Titanium And Your SDK

    5

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    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 Titaniuminstalled and working on your development system.

    This document is for development using a Macintosh. You can also develop using Windows or Linux, which arecovered in related sections.

    For downloaded files, the filenames given here are current as of when we created this guide. In general, itshould be ok to use a later update of the listed files.

    Step 1: Install Titanium and mobile SDKs (Mac OS X)

    Appcelerators Developer Web site contains information youll 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

    Heres the Web page youll see:

    At the bottom of the page, youll see several helpful getting started videos that you can watch. You can watchthem now or later; when youre ready, continue on with these instructions.

    In this section, youll install the components on the rightthat youll use to develop mobile applications with Tita-

    nium, using Mac OS X.

    There are several API revision levels, and different ver-sions of the SDKs that well be navigating through in thissection. Youll want to follow these installation steps inorder.

    Components to Install

    Apples iOS SDK (for iPhone and iPad apps) Googles Android SDK (for Android apps) Specific platform packages in the Android

    SDK Titanium Developer

  • 8/8/2019 Gettingstarted Titanium Mac

    6/26

    Step 1: Installing Titanium And Your SDKGetting Started with Appcelerator Titanium (Mac)

    6 Release GSM, 8/17/10

    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 youll 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 youve 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 daysfor a corporate account. Additionally, youll need a paid membership in the iPhone Developer Program when itcomes time for you to publish your app.

    The above steps are done with Apple through Apples Web site, and dont involve Appcelerator or Titanium.

    Its 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, its 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 youhave to follow to download and install the Android SDK, and then register it for use in Titanium. In preparation,its helpful to read about the Android SDK here:

    http://developer.android.com/sdk/installing.html

    When youre ready, go to the Android SDK download page:

    http://developer.android.com/sdk/index.html

    In the following steps, well 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 calledandroid-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 toandroid-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 Androidtools. Here are the commands in Terminal that you could use to start up the Android SDK and AVD ManagerGUI.

    $ cd /android-sdk/

    $ tools/android

    http://developer.android.com/sdk/installing.htmlhttp://developer.android.com/sdk/index.htmlhttp://developer.android.com/sdk/index.htmlhttp://developer.android.com/sdk/installing.html
  • 8/8/2019 Gettingstarted Titanium Mac

    7/26

    Step 1: Installing Titanium And Your SDK

    7

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    Alternatively, from the Finder, click on android, inside the tools folder, in your Android SDK folder. At thispoint, you have the Android SDK and AVD Manager environment, and you are able to download the specificAndroid SDK revision level thats required for development using Titanium.

    Inside the Android SDK and AVD Manager GUI, click on Available Packages in the left panel. Expand the listin 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, youll 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 selectedcomponents will be downloaded and installed.

  • 8/8/2019 Gettingstarted Titanium Mac

    8/26

    Step 1: Installing Titanium And Your SDKGetting Started with Appcelerator Titanium (Mac)

    8 Release GSM, 8/17/10

    Once this has completed, click on Installed Packages in the left panel to see what got installed. Your displayshould 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 theemulator, and install your app.

    Install Titanium Developer

    In this section, youll install Titanium, and the Titanium Developer user interface. Well cover the followingsteps:

    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/8/2019 Gettingstarted Titanium Mac

    9/26

    Step 1: Installing Titanium And Your SDK

    9

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    Youll be returning to the Getting Started page you saw earlier:

    Lets 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.

    Well cover Step 3 on the getting started page a bit later, after weve finished installing Titanium, and after webuild a Hello World app from Titaniums default sample application.

    After the Titanium Developer disk image has mounted, open the Titanium Developer volume, and youll seethe 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.

    Its convenient to place an alias to the Titanium Developer app in your development folder. Whether you do thator not, start Titanium Developer by double-clicking its icon.

  • 8/8/2019 Gettingstarted Titanium Mac

    10/26

    Step 1: Installing Titanium And Your SDKGetting Started with Appcelerator Titanium (Mac)

    10 Release GSM, 8/17/10

    The first time you start Titanium Developer, youll 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 logincredentials you create since youll 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 tofind your Android SDK. After youre logged in, click the Profile mini-icon in the Perspectives area, in the upperleft corner of Titanium Developers main window. Your display will look like this:

    At the bottom of that window, youll 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 followingpathname in the Android SDK field:

    Now select Projects from the Perspectives buttons at the top right corner of the Titanium Developer screen tobegin development using Titanium. Lets start with a New Project click on the New Project button at the topof the screen. In the New Project panel, click on the Project type field and choose Mobile from the pop-upmenu. In the lower part of the screen, youll see a line called Installed Mobile Platforms. After a few seconds

    /android-sdk

  • 8/8/2019 Gettingstarted Titanium Mac

    11/26

    Step 2: Running the Sample Applications

    11

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

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

    If you followed all of these instructions, you installed both the iOS (iPhone) and Android SDKs. However, youcan use Titanium to develop for only one of these platforms if you like you dont have to install both iOS andAndroid. If you install only one, youll have one green checkmark and one red X in the Installed Mobile Plat-forms field in the New Project panel in Titanium Developer.

    Now youve successfully installed Titanium Developer, and at least one of the mobile SDKs. Next, in Step 2,youll 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 trainingresources. To get started, well continue to use a Community account, which is free. When you get ready todevelop your own app using Titanium, youll want to consider upgrading your account to Titanium Professionalor 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 Titaniuminstalled and working on your development system.

    This document is for development using a Macintosh. You can also develop using Windows or Linux, which arecovered in related sections.

    Step 2: Run the sample mobile apps (Mac OS X)

    In this section, well build a simple HelloWorld application in Titanium, and then well run one of the sampleapps available on the Appcelerator Web site. Well 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 well 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 projects source file (Hello World) See Edit the default project, creating Hello World

    on the Android on page 18

  • 8/8/2019 Gettingstarted Titanium Mac

    12/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    12 Release GSM, 8/17/10

    Download Titaniums 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

    Lets start where we left of at the end of Step 1. You should have Titaniums New Project window open, readyto enter the details of your first app.

    Before you enter things into Titanium Developers New Project window, decide on a directory somewhere

    where the apps source files will live. (Expect this to take about 300 MB.) Perhaps you created an Appceleratordirectory inside your $HOME directory.

    Well call our app HelloWorld, so for our example, well let Titanium Developer create the HelloWorld directoryinside our existing Appcelerator directory. Lets assume that $HOME is actually the

    /Users/devon directory for this example. Lets also assume that your company name is devoncompanyinc, soyour companys 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/AppceleratorCompany/Personal URL: www.devoncompanyinc.com

    Titanium SDK version: 1.4.0

  • 8/8/2019 Gettingstarted Titanium Mac

    13/26

    Step 2: Running the Sample Applications

    13

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    When youve filled in the fields, click Create Project to have Titanium Developer create all the source files foryour HelloWorld project. Titanium Developer will then open the HelloWorld project screen, which looks like thisone:

    Using either Terminal or the Finder, you can explore the contents of the new HelloWorld directory. Youll seevarious files that are used by Titanium, plus a Resources folder thats where your JavaScript code goes. Withonly a few exceptions which youll learn later, you should make all your changes in the Resources folder; theother 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. Youll see the JavaScript code for a simpledefault project. In the next section well run this application so you can see what it does. Later youll learn howto deploy an app to a physical device; for now, well run the HelloWorld app in an emulator on the Mac.

  • 8/8/2019 Gettingstarted Titanium Mac

    14/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    14 Release GSM, 8/17/10

    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 TitaniumDeveloper window. That will bring up a screen like this:

    Click the iPhone tab if its not already selected to indicate that youll be using the iPhone emulator. (In the nextsection, well repeat this process for Android.) If Titanium Developer has properly located the iPhone SDK,youll 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 its not already selected.

    Now, click on the Launch button to compile the JavaScript code and start the application in the iPhone emu-lator. Youll 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, youll see the emulated iPhone screen appear. This window looks just like an iPhone display. Asthe app starts executing in the emulated iPhone, it will automatically put up the Appcelerator logo.

  • 8/8/2019 Gettingstarted Titanium Mac

    15/26

    Step 2: Running the Sample Applications

    15

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

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

    This application doesnt do much, but youll see that if you click on Tab 2 at the bottom of the screen, the textchanges to I am Window 2. When youre finished experimenting with the two tabs (which probably wont bevery 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

    Lets change the message in the window to Hello World!. This requires only very simple edits to the app.js filein the Resources folder, in the applications source folder. In our example, thats the /Users/Devon/Appcelera-tor/HelloWorld source folder.

    Again using your favorite text editor, open app.js. Search for I am Window 1 youll find this in the first half ofthe app.js source file. Search also for I am Window 2 which youll 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. Heres 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'

    });

  • 8/8/2019 Gettingstarted Titanium Mac

    16/26

  • 8/8/2019 Gettingstarted Titanium Mac

    17/26

    Step 2: Running the Sample Applications

    17

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    Run the default project for Android

    Development for Android is very similar to development for iPhone. If you did the iPhone steps above, youllfind much of the following to be essentially the same as what youve already done. Keep in mind that this sec-tion is written comprehensively, so that it works for people who didnt do the iPhone section.

    To run the HelloWorld project we just created, click on the Test & Package tab at the top of the TitaniumDeveloper window. That will bring up this screen:

    Click the Android tab if its not already selected to indicate that youll be using the Android emulator. If TitaniumDeveloper has properly located the Android SDK, youll see the SDK field at the bottom of the screen populatewith a pop-up list of available SDK versions. Select APIs 1.6 from that list if its not already selected.

    Now, click on the Launch button to compile the JavaScript code and start the application in the Android emu-

    lator. Youll see messages in the Titanium Developer window like these:

  • 8/8/2019 Gettingstarted Titanium Mac

    18/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    18 Release GSM, 8/17/10

    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 forthe Hello World app to start up on the emulator. Theres no user intervention needed here; you just have to waitfor Titantium Developer and the Android emulator to eventually start the app. If the Android emulator shows theLocked screen, press the emulator's Menu button to unlock it.

    When you finally see the emulated Android screen appear, youll 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) Tab1 and Tab 2.

    This sample application doesnt do much, but youll see that if you click on Tab 2 at the bottom of the screen,the text changes to I am Window 2. When youre finished experimenting with the two tabs (which probablywont 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 dont get the results youre 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

    Lets change the message in the window to Hello World!. This requires only very simple edits to the app.js filein the Resources folder, in the applications source folder. In our example, thats the /Users/Devon/Appcelera-tor/HelloWorld source folder.

    Again using your favorite text editor, open app.js. Search for I am Window 1 youll find this in the first half ofthe app.js source file. Search also for I am Window 2 which youll 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

  • 8/8/2019 Gettingstarted Titanium Mac

    19/26

    Step 2: Running the Sample Applications

    19

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    Look at the following code extracts from app.js to see exactly how to make these changes. Heres the first sec-tion of code, before the change of I am Window 1 to Hello World!:

    And heres what it will look like after your change:

    Now, heres the second section of code, before the change of I am Window 2 to Hello again:

    And heres what the second section will look like, after your change:

    Save your changes to app.js, go back to the Titanium Developer window, and again click Launch to start thechanged 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 theAndroid emulator, just click Stop and Launch to try again as described in the Troubleshooting section below.

    Youll see your HelloWorld app automatically run on the emulated Android, and the message on the Androidsscreen will be Hello World!. If you click Tab 2, the message should change to Hello again. When youre fin-

    var label1 = Titanium.UI.createLabel({

    color:'#999',

    text:'I am Window 1',

    font:{fontSize:20,fontFamily:'Helvetica Neue'},

    textAlign:'center',

    width:'auto'

    });

    var label1 = Titanium.UI.createLabel({

    color:'#999',

    text:'Hello World!',

    font:{fontSize:20,fontFamily:'Helvetica Neue'},

    textAlign:'center',

    width:'auto'});

    var label2 = Titanium.UI.createLabel({

    color:'#999',

    text:'I am Window 2',

    font:{fontSize:20,fontFamily:'Helvetica Neue'},

    textAlign:'center',

    width:'auto'

    });

    var label2 = Titanium.UI.createLabel({

    color:'#999',

    text:'Hello again',

    font:{fontSize:20,fontFamily:'Helvetica Neue'},

    textAlign:'center',

    width:'auto'

    });

  • 8/8/2019 Gettingstarted Titanium Mac

    20/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    20 Release GSM, 8/17/10

    ished playing with the tabs, return again to Titanium Developers window and click the Stop button to termi-nate the Android emulator.

    Download the Kitchen Sink app

    Now that youve successfully built Titaniums default project, lets move on to build the much larger KitchenSinksample app. Appcelerators 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 AppceleratorsWeb 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 linkKitchen 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 likeappcelerator-KitchenSink-1.3.3-1-g4d1c4f8.zip.

    When you expand the archive (if it didnt expand automatically), youll see KitchenSink and KitchenSink-iPadfolders. Our examples assume that youll 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, well be importing this into Titanium Devel-oper. This contrasts with what we did earlier with the default project, where we created a new project fromscratch. In that case, Titanium Developer created the default project, ready to edit.

  • 8/8/2019 Gettingstarted Titanium Mac

    21/26

    Step 2: Running the Sample Applications

    21

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    To import the Kitchen Sink apps source code, click the Import Project button at the top of Titanium Devel-opers window. Youll see the following dialog appear:

    Click OK because were importing a mobile project. After a few moments, Titanium Developer will present thefollowing 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, youll click on the Test & Package tab in Titanium Developers windowto run the KitchenSink app. Click the iPhone tab if its not already selected, and ensure that the SDK version is

  • 8/8/2019 Gettingstarted Titanium Mac

    22/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    22 Release GSM, 8/17/10

    set to 3.1.3 just as you did with the default app. Then click Launch your Titanium Developer screen shouldlook like this:

    Notice that there are numerous warning and information messages that appear in Titanium Developers screen these are expected.

    Eventually, the iPhone emulator should launch, and the apps Kitchen Sink logo should automatically appear:

    After the logo flips, youll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. Asyou experiment with each of these, youll see that the Kitchen Sink app doesnt do anything it containssource 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, youll click on the Test & Package tab in Titanium Developers windowto run the KitchenSink app. Click the Android tab if it s not already selected, and ensure that the SDK version is

  • 8/8/2019 Gettingstarted Titanium Mac

    23/26

    Step 2: Running the Sample Applications

    23

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    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 apps Kitchen Sink logo should automatically appear.

    After the logo flips, youll see five tabs on the screen: Base UI, Controls, Phone, Platform, and Mashups. Asyou experiment with each of these, youll see that the Kitchen Sink app doesnt do anything it containssource code that illustrates how to incorporate lots of different elements into your own apps.

    Next steps

    Now that youve successfully built the default app and imported the Kitchen Sink app, youre ready to startlooking 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 seein the Titanium Developer window is [INFO] Deployed Hello World Application should be running. Whenusing the Android emulator, Titanium Developer sometimes times out before the emulator is ready to accept

  • 8/8/2019 Gettingstarted Titanium Mac

    24/26

    Step 2: Running the Sample ApplicationsGetting Started with Appcelerator Titanium (Mac)

    24 Release GSM, 8/17/10

    the new application as input. If that happens, try again by clicking Launch again. Generally, this works aftertwo or three tries. But be sure to wait a minute or two after the Application should be running. messageappears in Titanium Developer before deciding that the sample app didnt start properly on the emulator. Whenthis works properly, the sample app should automatically start on the emulator theres nothing you have to doon the emulator to start up the sample app.

    If your app doesnt start, there are several additional things you can try. When using the Android emulator,

    some of these issues are more common after youve 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 changingthe 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 thatsunlikely 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:

    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 AVDs, which will force

    Titanium to recreate them. This is not normally necessary, but can be needed if the AVDs are out of order.

    6. Perhaps you have added too many apps to your emulated mobile device. If that happens, just remove some of theapps.

    7. Sometimes when importing Titanium projects, the build assets dont import correctly, especially if youre importing into aplatform different from where the project was originally created. If this happens, you may need to copy the assets into anew project. To do this, create a new project and then replace its Resources directory with the Resources directory ofthe project that didnt 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 thats too long. Try using a shorter path to your source directory by movingyour 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 Appcelerators 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 youre experiencing The version of Titanium youre using Whether youre building a mobile or desktop app Trace messages from Titanium Developer The version(s) of the mobile tools (emulator) you have The JDK version youre using Your operating system and version (e.g., Windows 7) Anything else you think might be helpful to understanding your issue

    $ adb kill-server

    $ adb devices

  • 8/8/2019 Gettingstarted Titanium Mac

    25/26

    25

    Getting Started with Appcelerator Titanium (Mac)

    Release GSM, 8/17/10

    Revision History

    8/5/2010 Initial release

    8/17/2010 Minor formatting changes

  • 8/8/2019 Gettingstarted Titanium Mac

    26/26

    Getting Started with Appcelerator Titanium (Mac)