Anarchist Guide to                  Titanium UI                           AN INTRODUCTION TO TITANIUM &                   ...
Vince Baskerville    Co-Founder of TripLingo    VP of Production    TripLingo    @whoisvinceWednesday, June 22, 2011
TOPICS                           What is Titanium                           Requirements                           Tools  ...
What is TitaniumWednesday, June 22, 2011
It’s a bad-ass framework                           It’s a rapid application                           development platform...
What’s inside?                           300+ APIs                           Full filesystem access                        ...
How does it work?                           Pre-compiler                            Optimizes your .js code               ...
Requirements                           Titanium Developer sdk                            http://www.appcelerator.com/produ...
Tools             Kitchen Sink (sample app)                   https://github.com/appcelerator/kitchensink             API ...
I <3 Coda                                             My               http://panic.com/coda/           Tower (git gui)   ...
Quick PeekWednesday, June 22, 2011
Project Structure                           build                             iphone                           Info.plist ...
Project Structure                           build              Build directory                             iphone         ...
Project Structure                           build                             iphone                           Info.plist ...
Project Structure                           build                             iphone                           Info.plist ...
Code Interface                           Module                             Titanium.UI                           Object  ...
JSS vs Inline                           Each method ends                           with a semi-colon;                     ...
Sooo... about that titleWednesday, June 22, 2011
Titanium does a great job at giving you access             to native buttons, tabs, etc; but you don’t have               ...
Break the rules*             Use the native controls for prototyping. Then if               you can, create your own UI. G...
TripLingo        “This doesnt seem like it    would function better than an    app designed with apples ios             gu...
Drilldown                           95% custom UI                           Prototype developed in 2 days                 ...
Code DemoWednesday, June 22, 2011
Questions?Wednesday, June 22, 2011
Merci Beaucoup                                        By: Vince Baskerville                                   http://vince...
Upcoming SlideShare
Loading in...5
×

Anarchist guide to titanium ui

3,965
-1

Published on

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.

Published in: Technology, News & Politics
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,965
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
38
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Anarchist guide to titanium ui

  1. 1. Anarchist Guide to Titanium UI AN INTRODUCTION TO TITANIUM & PROTOTYPINGWednesday, June 22, 2011
  2. 2. Vince Baskerville Co-Founder of TripLingo VP of Production TripLingo @whoisvinceWednesday, June 22, 2011
  3. 3. TOPICS What is Titanium Requirements Tools Quick Peek Q&AWednesday, June 22, 2011
  4. 4. What is TitaniumWednesday, June 22, 2011
  5. 5. 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 mobileWednesday, June 22, 2011
  6. 6. 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
  7. 7. How does it work? Pre-compiler Optimizes your .js code Front-end compiler Generates platform-specific native code Platform compiler & packager Packaged for runing on the native simulator, device &/or distributionWednesday, June 22, 2011
  8. 8. Requirements Titanium Developer sdk http://www.appcelerator.com/products/download/ iOS sdk & Xcode http://developer.apple.com/ Java SDK & Android SDK http://developer.android.com/sdk/index.htmlWednesday, June 22, 2011
  9. 9. Tools Kitchen Sink (sample app) https://github.com/appcelerator/kitchensink API References http://developer.appcelerator.com/apidoc/ mobile/latest Community Q&A http://developer.appcelerator.com/ questions/newest AppU Training http://training.appcelerator.com/Wednesday, June 22, 2011
  10. 10. I <3 Coda My http://panic.com/coda/ Tower (git gui) Workflow http://www.git-tower.com/ CodaSet.com http://codaset.com/Wednesday, June 22, 2011
  11. 11. Quick PeekWednesday, June 22, 2011
  12. 12. Project Structure build iphone Info.plist Resources app.js anotherView.js manifest tiapp.xmlWednesday, June 22, 2011
  13. 13. Project Structure build Build directory iphone per platform Info.plist Resources app.js anotherView.js manifest tiapp.xmlWednesday, June 22, 2011
  14. 14. Project Structure build iphone Info.plist Resource files; actual js code, Resources images, db files, etc app.js anotherView.js manifest tiapp.xmlWednesday, June 22, 2011
  15. 15. Project Structure build iphone Info.plist Resources app.js Project files anotherView.js manifest tiapp.xmlWednesday, June 22, 2011
  16. 16. Code Interface Module Titanium.UI Object Titanium.UI.Label Object Factory Titanium.UI.createLabel({}) Properties / Methods ...({ top: 0, left: 44, text: ‘Spanish’ }); Event Handling Button.addEventListener(click)Wednesday, June 22, 2011
  17. 17. JSS vs Inline Each method ends with a semi-colon; Each except the last Words are ends with a comma, seperated with a dash, ie: words are not background-image: seperated, ie: backgroundImage: file name needs to match .js document and be in same dirWednesday, June 22, 2011
  18. 18. Sooo... about that titleWednesday, June 22, 2011
  19. 19. Titanium does a great job at giving you access to native buttons, tabs, etc; but you don’t have to use themWednesday, June 22, 2011
  20. 20. 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
  21. 21. TripLingo “This doesnt 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
  22. 22. Drilldown 95% 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
  23. 23. Code DemoWednesday, June 22, 2011
  24. 24. Questions?Wednesday, June 22, 2011
  25. 25. Merci Beaucoup By: Vince Baskerville http://vincentjordan.comWednesday, June 22, 2011
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×