Titanium Meetup Deck
-
Upload
sschwarzhoff -
Category
Documents
-
view
246 -
download
3
Transcript of Titanium Meetup Deck
![Page 1: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/1.jpg)
1
Native Mobile Applications USING Open Source
![Page 2: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/2.jpg)
2
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 3: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/3.jpg)
3
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 4: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/4.jpg)
4
About You
New To Mobile Development Mobile Dev Veteran
![Page 5: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/5.jpg)
5
Either way, you’ve come to the right place.
![Page 6: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/6.jpg)
6
Amazing Mobile Platforms
![Page 7: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/7.jpg)
7
Which is great and exciting!
![Page 8: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/8.jpg)
8
...only how do we target all these cool platforms?
![Page 9: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/9.jpg)
9
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 10: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/10.jpg)
10
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 11: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/11.jpg)
11
Ideally, we build cross-platform native apps...
![Page 12: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/12.jpg)
12
...but we don’t want to “write once, suck
everywhere”*
*Loren Brichter, creator “Twitter for iPhone”/Tweetie
![Page 13: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/13.jpg)
13
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 14: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/14.jpg)
14
Enter TitaniumTitanium is an open source framework for
building native mobile (or desktop) applications using open web technologies
(JavaScript - optionally HTML and CSS)
![Page 15: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/15.jpg)
15
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 16: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/16.jpg)
16
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 17: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/17.jpg)
17
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 18: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/18.jpg)
18
Who Uses Titanium?• NBC Universal• PayPal• MTV• Anheuser-Busch• Computer Sciences
Corporation• Intridea (Oil Reporter)• 1000s of Titanium apps
hitting the stores each month
![Page 19: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/19.jpg)
19
Titanium Architecture
• Desktop is HTML focused
• Can use other scripting languages
• Mobile: JavaScript interpreted at runtime
• JavaScript API >> native APIs
![Page 20: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/20.jpg)
20
What Titanium Mobile is not:
• Not a native wrapper around a web view (PhoneGap being an example of this approach)• 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 21: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/21.jpg)
21
Example
![Page 22: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/22.jpg)
22
Example
![Page 23: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/23.jpg)
23
Example
![Page 24: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/24.jpg)
24
Titanium Developer• Manage and run Titanium
applications• Package applications for
distribution• Run on a device for
testing• Manage Appcelerator
account
![Page 25: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/25.jpg)
25
Demo: Hello World!• Creating a mobile project• Mobile project structure• Editing code, adding UI
widgets to the app• Deploy to simulator
![Page 26: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/26.jpg)
26
Demo: Kitchen Sink• Example Code• Living Reference Document• Demonstrates API coverage
![Page 27: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/27.jpg)
27
Questions So Far?• Titanium as a product• Titanium capabilities• About Appcelerator
![Page 28: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/28.jpg)
28
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 29: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/29.jpg)
29
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 30: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/30.jpg)
30
Typical App Composition
• A single window or stack of windows• Tab Group
containing many windows• Windows
contain views
![Page 31: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/31.jpg)
31
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 32: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/32.jpg)
32
Demo: Contexts• New Project - Two Tabs with
“Lightweight” windows• Switch to contain urls and
contexts• Symbols not defined in
other contexts
![Page 33: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/33.jpg)
33
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 34: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/34.jpg)
34
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 35: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/35.jpg)
35
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 36: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/36.jpg)
36
Hey, what about layouts?We’ll demo that later in the tutorial...
![Page 37: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/37.jpg)
37
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 38: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/38.jpg)
38
Cross-Platform Tips• iPhone/Android
subdirectories• Ti.Platform.osname• Display height/width• OS version• Check Out Kitchen
Sink Platform example
10
![Page 39: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/39.jpg)
39
Questions?• App Composition• Runtime environment• UI Layouts
![Page 40: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/40.jpg)
40
“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 41: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/41.jpg)
41
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 42: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/42.jpg)
42
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 43: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/43.jpg)
43
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 44: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/44.jpg)
44
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 45: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/45.jpg)
45
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 46: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/46.jpg)
46
3: Select Media
• Open Photo Gallery• Show Camera• Dynamically update
ImageView source file
http://gist.github.com/481081
![Page 47: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/47.jpg)
47
4: Upload Image
• Create HTTPClient object• Open a POST
request• Upload image media
and Twitter update
http://gist.github.com/481111
![Page 48: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/48.jpg)
48
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 49: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/49.jpg)
49
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 50: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/50.jpg)
50
But wait, there’s more!
• Animation APIs• Social Networks• Custom Module
Development• iPad Development• HTML 5 and CSS 3• Explore Desktop!!!
![Page 51: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/51.jpg)
51
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 52: Titanium Meetup Deck](https://reader030.fdocuments.in/reader030/viewer/2022020218/55a916e41a28abfa2e8b46a1/html5/thumbnails/52.jpg)
52
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