Download - An introduction to Titanium
![Page 1: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/1.jpg)
An introduction to TitaniumEnough to get you into trouble
![Page 2: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/2.jpg)
Graham Weldon
PHP developer for 11 years
CakePHP core contributor
Open source public speaker
Love developing/teaching
@predominant
http://grahamweldon.com
http://cakedc.com
![Page 3: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/3.jpg)
The rise of mobile
Making, distributing and selling mobiles apps can be a lucrative business
Well designed, available apps are sought after
Users prefer a service or product if it comes with a mobile counterpart
Mobile
Available
Accessible
Offline
![Page 4: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/4.jpg)
Mobile history
PDA’s
Original Netbooks
Symbian (Nokia domination)
iMode (Success in Japan)
WAP
Java ME
Android, iOS, Windows Phone, Meego, and more
![Page 5: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/5.jpg)
Building for mobile
Google Android
Java
Apple iOS
Objective C
Windows Phone
.NET platform (C#, primarily)
Blackberry
Java
![Page 6: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/6.jpg)
Abstraction Layers
![Page 7: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/7.jpg)
An abstraction layer is a way of hiding the implementation details of a particular set of functionality.
![Page 8: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/8.jpg)
What is an abstraction layer?
![Page 9: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/9.jpg)
Why use anabstraction layer?
Simpler maintenance
Only working with business logic and custom code
One codebase, many platforms
Quicker development
Re-use existing knowledge
Less re-training
![Page 10: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/10.jpg)
I’m convinced!What can I use?
NimbleKit (iOS)
Adobe PhoneGap (Web container)
Adobe Flex / Flash
Appcelerator Titanium (Compiled to native)
Corona (Lua)
Rhomobile
Web
jQuery Mobile
Sencha Touch
Custom
![Page 11: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/11.jpg)
Appcelerator Titanium
![Page 12: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/12.jpg)
Appcelerator Titanium
![Page 13: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/13.jpg)
![Page 14: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/14.jpg)
Wait... Free?
The platform and studio environment cost nothing
You have all the tools you need to build applications
Its also Open Source! http://github.com/appcelerator
Whats the catch?
Appcelerator is a company for profit
Support
Premium modules / extensions
Custom development
![Page 15: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/15.jpg)
Take advantage ofexisting skills
Web Developers
Use Javascript
Learn and extend their knowledge
Benefit their web skills
Only the Titanium specific calls are different
![Page 16: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/16.jpg)
Key advantages
Write once
Deploy everywhere
Cut down on maintenance
Simplify deployment to new platforms
![Page 17: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/17.jpg)
The Titanium Platform
![Page 18: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/18.jpg)
Titanium Studio
Build apps
Debug
Profile
Code hinting
Easy device testing
Easy deployment
![Page 19: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/19.jpg)
How does it work?
Pre-Compiler
Optimise, Analyse code
Find and resolve dependencies
Front End Compiler
Convert to native code
Package in JS engine for other stuff
Platform Compiler
Compiled with native tools
Xcode + iOS SDK, Java + Android SDK
![Page 20: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/20.jpg)
What does that mean?
Its optimising your code
Converting what it can to native device code
Anything it can’t gets run through the JS Engine
Makes it super fast
Makes it super portable no matter the code
![Page 21: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/21.jpg)
Javascript!
![Page 22: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/22.jpg)
![Page 23: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/23.jpg)
A perfect match
Titanium is
View driven
Event based
Perfect for Javascript
Layered view hierarchy
Similar to iOS
![Page 24: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/24.jpg)
Organising and building your app
![Page 25: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/25.jpg)
Resources
The resources folder
Holds all the important stuff
Code
Assets
Platform specific whatsits
![Page 26: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/26.jpg)
Platforms
Sometimes platforms have differences
You need to occasionally provide a different implementation
Maybe some images for just that platform
![Page 27: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/27.jpg)
iPhone folder
appicon.png
Icon for home screen
*-Landscape.png
Landscape splash image
*-Portrait.png
Portrait splash image
Default.png
Standard resolution
Double resolution (iPhone4+)
![Page 28: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/28.jpg)
and of course... Android
![Page 29: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/29.jpg)
Code ContextSeparate context to keep things tidy and manageable
‘myVar’ in app.js
Not accessible in win1.js
Use globals sparingly
app.js
win1.js
![Page 30: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/30.jpg)
But I want global data, configs, etc..
Define configuration files
Use the Titanium Include
Ti.include(...);
Separate different information
Only include what you need
![Page 31: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/31.jpg)
UI Structure
![Page 32: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/32.jpg)
Tabbed Layout
Very common
iOS Examples: Twitter app, Foursquare, Commbank, Phone
One window per tab
Tab windows can open sub-windows
Naturally they get a “< back” option
Easy to use and understand
No effort required!
![Page 33: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/33.jpg)
![Page 34: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/34.jpg)
![Page 35: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/35.jpg)
![Page 36: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/36.jpg)
Doh! Platform differences
iOS has tabs at the bottom
Android has tabs at the top
iOS has a title by default for tabGroups
Android doesn’t have a title for tabGroups
More than likely your creative director wants everything to look the same on all platforms
Disregarding previous user epxerience on specific platforms.
![Page 37: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/37.jpg)
![Page 38: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/38.jpg)
There are workarounds!
![Page 39: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/39.jpg)
![Page 40: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/40.jpg)
Custom InterfacesPossible.
But requires some real work.
![Page 41: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/41.jpg)
Manage your UIInterface stacking
Order, and backtracking
![Page 42: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/42.jpg)
![Page 43: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/43.jpg)
Exciting! But scary...
![Page 44: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/44.jpg)
Titanium makes it easy
![Page 45: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/45.jpg)
Ti.Accelerometer
addEventListener
removeEventListener
fireEvent
Simulate accelerometer events
![Page 46: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/46.jpg)
Ti.Geolocation
Quick and easy Geo
Current Position
forwardGeocoder
Address -> Coords
reverseGeocoder
Coords -> Address
Add/remove listeners
![Page 47: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/47.jpg)
Ti.Map
Common interface for all devices
Simple map integration
Use with information from Ti.Geolocation
Add custom pins / locations
Switch map types
Satellite / Standard / Hybrid
![Page 48: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/48.jpg)
Ti.Analytics
Monitor events
Report on them later
Gather info about behaviour
Improve your application
Challenge users
![Page 49: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/49.jpg)
Ti.Contacts
Access the Address Book
Works on all devices
One interface
Integrate contacts
Simplify information sharing
Read only on Android :(
![Page 50: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/50.jpg)
Ti.Database
A simple to use database
SQL compliant
Install and update DBs
Store local data
Great for offline storage
Sync later
![Page 51: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/51.jpg)
Ti.Filesystem
Read files
Write files
iOS restricted to sandbox
(everyone is...)
Android allows access to external media
![Page 52: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/52.jpg)
Ti.Facebook
Simple Facebook integration
REST API (Deprecated)
Graph API
Login
Store authorization
Simple configuration
Works everywhere
![Page 53: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/53.jpg)
Ti.Gesture
Track gestures
add event listeners
customise your app UX
Events
shake
orientation change
![Page 54: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/54.jpg)
Ti.Network
Protocols
TCP
HTTP
Bonjour
Implement any protocol you like on TCP
Connect your app
Create a server
![Page 55: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/55.jpg)
Ti.XML
Easy to use parser
Produce XML too
Makes consuming services easy
Includes things like
rss
atom
oData
![Page 56: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/56.jpg)
Yahoo! YQL
My personal favourite
Grab data from anywhere on the internet
Query using XPATH
Scrape websites (responsibly)
http://developer.yahoo.com/yql/
![Page 57: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/57.jpg)
Commercial Components
There are a heap on the marketplace
Some are reasonably priced
Great way to get things done quickly
You can sell your own components on the marketplace
http://www.appcelerator.com/products/open-mobile-marketplace/
![Page 58: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/58.jpg)
Also checkGithub
Search repos for ‘Titanium’
Currently 706 results
Components
Full projects
http://goo.gl/R69Ck
![Page 59: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/59.jpg)
JSS
![Page 60: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/60.jpg)
JSS: CSS style rules
Not much information about it
But very easy to use
app.js
app.jss
Set almost any property
Always clean before running your app!
![Page 61: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/61.jpg)
app.js
app.jss
![Page 62: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/62.jpg)
app.js
app.jss
![Page 63: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/63.jpg)
Building your appMultiple platform support
![Page 64: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/64.jpg)
Optionally selecta template
![Page 65: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/65.jpg)
![Page 66: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/66.jpg)
< insert coding montage >
![Page 67: An introduction to Titanium](https://reader038.vdocuments.net/reader038/viewer/2022110306/5554601bb4c905a5798b48be/html5/thumbnails/67.jpg)
Thats it! Thanks!
Graham Weldon
http://grahamweldon.com
@predominant
Cake Development Corporation
http://cakedc.com
@cakedc