55
1 Before You Begin •Prerequisite Software – Latest iPhone SDK – Android SDK with 1.6 and any later SDKs installed – Titanium Developer •Getting Started Guide http://developer.appcelerator.com/doc/mobi le/get_started –Linked in tutorial notes at http://oscon.com

OSCON Titanium Tutorial

Embed Size (px)

DESCRIPTION

A Titanium Mobile tutorial given at OSCON 2010.

Citation preview

Page 1: OSCON Titanium Tutorial

1

Before You Begin• Prerequisite Software– Latest iPhone SDK– Android SDK with 1.6 and any later SDKs

installed– Titanium Developer

• Getting Started Guide–http://developer.appcelerator.com/doc/mobile/get

_started–Linked in tutorial notes at http://oscon.com

Page 2: OSCON Titanium Tutorial

2

Native Mobile Applications USING

Open Source

Page 3: OSCON Titanium Tutorial

3

Want to give this talk?

• Your local user group• Your company• To your wife and kids• Package includes:– Slides in various formats– Example code– Resources for presenters

http://github.com/kwhinnery/MeetupPack

Page 4: OSCON Titanium Tutorial

4

Today’s Agenda• Titanium Mobile Overview• Hello World and Project

Walkthrough• Building Titanium Apps:

Fundamentals• Code By Numbers: Oh

Snap!• Where To Go From Here• Questions and Answers• Independent Hacking

Page 5: OSCON Titanium Tutorial

5

About Me

Kevin WhinneryEngineer/Platform Evangelist

http://kevinwhinnery.com

Twitter: @kevinwhinnery

Web developer by trade and training, lover of JavaScript and open web technologies in general

Page 6: OSCON Titanium Tutorial

6

About Appcelerator• Open Source

Software Company based in Mountain View• ~25 employees and

growing• Developing Titanium

for about two years, with Mobile coming in the last year• 95% Developers

Page 7: OSCON Titanium Tutorial

7

About You

New To Mobile Development Mobile Dev Veteran

Page 8: OSCON Titanium Tutorial

8

Either way, you’ve come to the right place.

Page 9: OSCON Titanium Tutorial

9

Amazing Mobile Platforms

Page 10: OSCON Titanium Tutorial

10

Which is great and exciting!

Page 11: OSCON Titanium Tutorial

11

...only how do we target all these cool platforms?

Page 12: OSCON Titanium Tutorial

12

Well, you could build native, but...

• Which platforms do you choose?• How many codebases do you want to (or

even can you) support?• How long will it take to build native on N

platforms?• How much effort will be duplicated?• What if you bet on the wrong platform?• Who writes the code? Hire out?

Retrain/retool yourself or your devs?

Page 13: OSCON Titanium Tutorial

13

The Web Is An Option...• ...and should be preferred when

feasible• Mobile browsers are progressing

fast and converging around WebKit• But there are limitations• Native apps are inherently more

capable than web apps• Native apps run faster and

smoother on resource constrained devices

Page 14: OSCON Titanium Tutorial

14

Ideally, we build cross-platform native apps...

Page 15: OSCON Titanium Tutorial

15

...but we don’t want to “write once, suck

everywhere”*

*Loren Brichter, creator “Twitter for iPhone”/Tweetie

Page 16: OSCON Titanium Tutorial

16

X-Platform Requirements

• Target multiple platforms from a single codebase• Apps must feel like they belong on the platform• Apps need to perform like native• Bonus: Open source and extensible• Bonus: Use skills we already have

Hmmm, I wonder if he has a specific technology in mind...

Page 17: OSCON Titanium Tutorial

17

Enter TitaniumTitanium is an open source framework for building native mobile (or desktop)

applications using open web technologies (JavaScript - optionally

HTML and CSS)

Page 18: OSCON Titanium Tutorial

18

Titanium Key Facts• Open Source (Apache 2.0)• Professional Services, SLA

Support, Training, and Analytics available from Appcelerator

Titanium Platforms• Desktop: Win32, OS X, Linux• Mobile: iOS, Android,

BlackBerry, webOS (soon)

Page 19: OSCON Titanium Tutorial

19

Titanium Projects

• Titanium Developer (1.2.1)• Titanium Mobile SDK (1.3.0)• Titanium Desktop SDK (1.0.0)• Versioned separately,

different release schedules• We will focus on Developer

and the Mobile SDK

Page 20: OSCON Titanium Tutorial

20

Titanium FeaturesNative UI

Location APIs

Local and Remote Data

Social APIs

Rich Media APIs

Open Source and Extensible

Integrated Analytics

Development Tools

Real native tables, tabs, sliders,and views

Native Maps, Compass, and Geolocation

Local SQL Database, LightweightKey/Value Store, XHR

Integrated Facebook Connectand YQL

Local and streaming audio andvideo, media recording

Extend Titanium with custommodules in native code

Baked-in analytics APIs to measureresults and behavior

Develop and distribute your app formultiple platforms from a single tool

Page 21: OSCON Titanium Tutorial

21

Who Uses Titanium?• NBC Universal• PayPal• MTV• Anheuser-Busch• Computer Sciences

Corporation• Intridea (Oil Reporter)• 100s of Titanium apps

hitting the stores each month (should soon eclipse 1000/month)

Page 22: OSCON Titanium Tutorial

22

Titanium Architecture

• Desktop is HTML focused

• Can use other scripting languages

• Mobile: JavaScript interpreted at runtime

• JavaScript API >> native APIs

Page 23: OSCON Titanium Tutorial

23

What Titanium Mobile is not:

• Not a native wrapper around a web view • However, you do have a web view

component for HTML/CSS UI if that is your preference• Your JavaScript code is invoking native APIs

for UI and other native functions• Think MacRuby/Hot Cocoa on the desktop

or some AAA mobile games which ship with a Lua interpreter

Page 24: OSCON Titanium Tutorial

24

Example

Page 25: OSCON Titanium Tutorial

25

Example

Page 26: OSCON Titanium Tutorial

26

Example

Page 27: OSCON Titanium Tutorial

27

Titanium Developer• Manage and run

Titanium applications• Package applications

for distribution• Run on a device for

testing• Manage Appcelerator

account

Page 28: OSCON Titanium Tutorial

28

Demo: Hello World!• Creating a mobile project• Mobile project structure• Editing code, adding UI

widgets to the app• Deploy to simulator

Page 29: OSCON Titanium Tutorial

29

Demo: Kitchen Sink• Example Code• Living Reference Document• Demonstrates API coverage

Page 30: OSCON Titanium Tutorial

30

Questions So Far?• Titanium as a product• Titanium capabilities• About Appcelerator

Page 31: OSCON Titanium Tutorial

31

Titanium Fundamentals• A Titanium application is a

JavaScript program that is interpreted at runtime on the device• app.js defines the root

execution context of the app• Note that we are not

running in a browser • We use the WebKit KJS

JavaScript engine (iOS) or Rhino (Android/BB)

Page 32: OSCON Titanium Tutorial

32

Titanium JavaScript API• Organized into logical namespaces• “Titanium” (or just “Ti” for short) is the root

namespace for all Titanium functionality• A few other odds and ends in the global space– setTimeout/setInterval– alert– JSON

Page 33: OSCON Titanium Tutorial

33

Typical App Composition

• A single window or stack of windows• Tab Group

containing many windows• Windows

contain views

Page 34: OSCON Titanium Tutorial

34

Windows and Contexts• Windows are the top level container for

Titanium applications• Applications usually consist of one window or

several windows in a tab group• Windows usually create new execution

contexts• Execution context == A unique JavaScript

symbol space• Such windows are “Heavyweight” windows• Can also create “Lightweight” windows (for

apps that run in a single context)

3

Page 35: OSCON Titanium Tutorial

35

Demo: Contexts• New Project - Two Tabs with

“Lightweight” windows• Switch to contain urls and

contexts• Symbols not defined in

other contexts

Page 36: OSCON Titanium Tutorial

36

The View Hierarchy• Views are the building

blocks of Titanium UIs– Specialized views: table

views, image views, map views, etc.

• Views can contain child views, which are positioned relative to the parent• Layout Options: Absolute,

vertical, or horizontal (currently iPhone only)• Vertical layouts require

height to be set

Page 37: OSCON Titanium Tutorial

37

Custom Events• Use for cross-context messaging• Events are received across all ACTIVE

contexts• Windows not yet open do not receive events• Use also as an inversion of control mechanism– Publish message when the database has been

updated– Publish message when contacting a server– Using pub/sub messaging is very useful in a

component-oriented framework like Titanium

Page 38: OSCON Titanium Tutorial

38

Demo: Custom Events• Now lets use custom events in

our new app• Events can have a data

payload• Remember that events are only

received in active contexts

Page 39: OSCON Titanium Tutorial

39

Hey, what about layouts?We’ll demo that later in the tutorial...

Page 40: OSCON Titanium Tutorial

40

Cross-Platform Development

• Not all UI is available across platforms• Titanium != “Write Once, Run Everywhere”• We try to enable native apps that look and feel

like they were created in Objective-C or Java• Also note that even cross-platform UI

components (like table views) will render differently cross platform• Cross Platform testing is critical during dev cycle

Page 41: OSCON Titanium Tutorial

41

Cross-Platform Tips• iPhone/Android

subdirectories• Ti.Platform.osname• Display

height/width• OS version• Check Out Kitchen

Sink Platform example

10

Page 42: OSCON Titanium Tutorial

42

Questions?• App Composition• Runtime environment• UI Layouts

Page 43: OSCON Titanium Tutorial

43

“Code By Numbers”• Demo App: Oh Snap!• Condensed version of Snapost– Source: http://github.com/kwhinnery/Snapost

• App Features:– Multiple Window/Tabbed UI– Properties API– Camera and Local Photo Gallery– Upload to remote web service (TwitPic)

• Want to develop and deploy to a device in the space of a few minutes

Page 44: OSCON Titanium Tutorial

44

A Nicer Version...• Our example will be

somewhat basic• For a nicer example

with better styling and slightly more robust handling of images, check out Snapost• 3D iPhone transitions,

laser noises!

http://github.com/kwhinnery/Snapost

Page 45: OSCON Titanium Tutorial

45

iPhone SDK Users• Will need to download build to address iOS

4 issues that is not in basic 1.3.0 release• Nightly Builds:– http://builds.appcelerator.com.s3.amazonaws.com/index.html

• Let’s go through install of “latest and greatest” build...

Page 46: OSCON Titanium Tutorial

46

0: Create “Oh Snap!”

• New Project via Titanium Developer• Grab new icons

from Glyphish• Configure tab

icons, new windows/execution contexts

http://gist.github.com/481044

Page 47: OSCON Titanium Tutorial

47

1: Arrange Basic UI

• Create necessary buttons, image placeholders, text labels• Arrange using

vertical layout• Check out styling

options

http://gist.github.com/481058

Page 48: OSCON Titanium Tutorial

48

2: Persist Un/Pw Combo

• Pre-populate text fields with Properties• Persist un/pw

combo• Add event listener

to save button

http://gist.github.com/481078

Page 49: OSCON Titanium Tutorial

49

3: Select Media

• Open Photo Gallery• Show Camera• Dynamically

update ImageView source file

http://gist.github.com/481081

Page 50: OSCON Titanium Tutorial

50

4: Upload Image

• Create HTTPClient object• Open a POST

request• Upload image

media and Twitter update

http://gist.github.com/481111

Page 51: OSCON Titanium Tutorial

51

5: Deploy to a device• Demo: Deploy via Titanium Developer• On your own, provision your system for

development on device• Android == super easy• iPhone... not so much• Video Tutorial:– http://vimeo.com/10278960

• All Appcelerator Videos:– http://vimeo.com/appcelerator

Page 52: OSCON Titanium Tutorial

52

Recapping Oh Snap!• < 200 Lines of code• Persistent App Preferences• Fully native UI (ugly, but

see Snapost for the pretty...)• Integrated camera/photo

gallery• XHR Upload to remote

server• 100% Cross-Platform

Page 53: OSCON Titanium Tutorial

53

But wait, there’s more!

• Animation APIs• Social Networks• Custom Module

Development• iPad Development• HTML 5 and CSS 3• Explore Desktop!!!

Page 54: OSCON Titanium Tutorial

54

Resources• Community Q&A• Reference Docs (new getting started guides

just finished)• Premium Support (Pro Subscribers)• Kitchen Sink and Demo Apps• Dev Blog: Tutorials, Updates from dev

team, developer-focused content• Follow @appcelerator for news and updates

Page 55: OSCON Titanium Tutorial

55

You Call It• Questions? Comments?• Need Help? Let’s hack your project!• Want to get in contact with someone regarding

X, Y, or Z? I’ll direct you to the right folks.• Anything else at all

Kevin Whinneryhttp://kevinwhinnery.com

http://twitter.com/kevinwhinnery

IRC (irc.freenode.net): #titanium_app