anarchist guide to titanium ui
DESCRIPTION
Slide deck for a presentation during a JavaScript meetup in Atlanta, GA.This is an intro into titanium with a twist being that I focused on explaining some of the power titanium gives developers by allowing them to easily create their own UI versus using native graphics.TRANSCRIPT
![Page 1: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/1.jpg)
Anarchist Guide to Titanium UI
AN INTRODUCTION TO TITANIUM & PROTOTYPING
Wednesday, June 22, 2011
![Page 2: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/2.jpg)
Vince BaskervilleCo-Founder of TripLingo
VP of ProductionTripLingo@whoisvince
Wednesday, June 22, 2011
![Page 3: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/3.jpg)
TOPICSWhat is Titanium
Requirements
Tools
Quick Peek
Q&A
Wednesday, June 22, 2011
![Page 4: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/4.jpg)
What is TitaniumWednesday, June 22, 2011
![Page 5: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/5.jpg)
It’s a bad-ass framework
It’s a rapid application development platform
Use your base source to develop to multiple platforms & devices
iOS & Android currently for mobile
Wednesday, June 22, 2011
![Page 6: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/6.jpg)
What’s inside?300+ APIs
Full filesystem access
Internal SQLite database access
Built-in analytics
Use JavaScript, HTML5 & CSS3
Objective-C for modules
* more...Wednesday, June 22, 2011
![Page 7: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/7.jpg)
How does it work?Pre-compiler
Optimizes your .js code
Front-end compilerGenerates platform-specific native code
Platform compiler & packagerPackaged for runing on the native simulator, device &/or distribution
Wednesday, June 22, 2011
![Page 8: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/8.jpg)
RequirementsTitanium Developer sdk
http://www.appcelerator.com/products/download/
iOS sdk & Xcodehttp://developer.apple.com/
Java SDK & Android SDKhttp://developer.android.com/sdk/index.html
Wednesday, June 22, 2011
![Page 9: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/9.jpg)
ToolsKitchen Sink (sample app)
https://github.com/appcelerator/kitchensink
API Referenceshttp://developer.appcelerator.com/apidoc/mobile/latest
Community Q&Ahttp://developer.appcelerator.com/questions/newest
AppU Traininghttp://training.appcelerator.com/
Wednesday, June 22, 2011
![Page 10: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/10.jpg)
My Workflow
I <3 Codahttp://panic.com/coda/
Tower (git gui)http://www.git-tower.com/
CodaSet.comhttp://codaset.com/
Wednesday, June 22, 2011
![Page 11: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/11.jpg)
Quick PeekWednesday, June 22, 2011
![Page 12: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/12.jpg)
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Wednesday, June 22, 2011
![Page 13: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/13.jpg)
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Build directory per platform
Wednesday, June 22, 2011
![Page 14: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/14.jpg)
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Resource files;actual js code,
images, db files, etc
Wednesday, June 22, 2011
![Page 15: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/15.jpg)
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Project files
Wednesday, June 22, 2011
![Page 16: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/16.jpg)
Code InterfaceModule
Titanium.UIObject
Titanium.UI.LabelObject Factory
Titanium.UI.createLabel({})Properties / Methods
...({ top: 0, left: 44, text: ‘Spanish’ });Event Handling
Button.addEventListener(click)
Wednesday, June 22, 2011
![Page 17: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/17.jpg)
JSS vs InlineEach method ends with a semi-colon;
Words are seperated with a dash, ie: background-image:
file name needs to match .js document and be in same dir
Each except the last ends with a comma,
words are not seperated, ie: backgroundImage:
Wednesday, June 22, 2011
![Page 18: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/18.jpg)
Sooo... about that title
Wednesday, June 22, 2011
![Page 19: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/19.jpg)
Titanium does a great job at giving you access to native buttons, tabs, etc; but you don’t have
to use them
Wednesday, June 22, 2011
![Page 20: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/20.jpg)
Break the rules*Use the native controls for prototyping. Then if
you can, create your own UI. Go crazy!
*okay, so not really.. instead, you can bend & cheat some though.Wednesday, June 22, 2011
![Page 21: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/21.jpg)
TripLingo“This doesn't seem like it
would function better than an app designed with apples ios
guidelines in mind”
“I love this app! Very intuitive and beautiful. Very
cool idea. Good job”
Wednesday, June 22, 2011
![Page 22: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/22.jpg)
Drilldown95% custom UI
Prototype developed in 2 days
MVP in 2 weeks
v1.0 in 4 months
Possible because of Titanium (and a bad-ass team!)
Wednesday, June 22, 2011
![Page 23: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/23.jpg)
Code Demo
Wednesday, June 22, 2011
![Page 24: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/24.jpg)
Questions?
Wednesday, June 22, 2011
![Page 25: Anarchist guide to titanium ui](https://reader033.vdocument.in/reader033/viewer/2022052307/554f83e1b4c905d25b8b4b9a/html5/thumbnails/25.jpg)
Merci BeaucoupBy: Vince Baskerville
http://vincentjordan.com
Wednesday, June 22, 2011