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
Anarchist Guide to Titanium UI
AN INTRODUCTION TO TITANIUM & PROTOTYPING
Wednesday, June 22, 2011
Vince BaskervilleCo-Founder of TripLingo
VP of ProductionTripLingo@whoisvince
Wednesday, June 22, 2011
TOPICSWhat is Titanium
Requirements
Tools
Quick Peek
Q&A
Wednesday, June 22, 2011
What is TitaniumWednesday, June 22, 2011
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
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
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
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
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
My Workflow
I <3 Codahttp://panic.com/coda/
Tower (git gui)http://www.git-tower.com/
CodaSet.comhttp://codaset.com/
Wednesday, June 22, 2011
Quick PeekWednesday, June 22, 2011
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Wednesday, June 22, 2011
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Build directory per platform
Wednesday, June 22, 2011
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Resource files;actual js code,
images, db files, etc
Wednesday, June 22, 2011
Project Structurebuild
iphoneInfo.plistResources
app.jsanotherView.js
manifesttiapp.xml
Project files
Wednesday, June 22, 2011
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
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
Sooo... about that title
Wednesday, June 22, 2011
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
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
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
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
Code Demo
Wednesday, June 22, 2011
Questions?
Wednesday, June 22, 2011
Merci BeaucoupBy: Vince Baskerville
http://vincentjordan.com
Wednesday, June 22, 2011