Your SlideShare is downloading. ×
0
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Multi platform development using titanium + alloy
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Multi platform development using titanium + alloy

3,182

Published on

Learn how Titanium works and how to use Alloy and platform-specific directives to properly target multiple devices from a single source code.

Learn how Titanium works and how to use Alloy and platform-specific directives to properly target multiple devices from a single source code.

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Multi-platform mobile development with Titanium + Alloy
  • 2. About me Have been using Titanium since late 2009 Former Titanium trainer in the Caribbean and Latin America Obsessed with cross-platform mobile develoment Love Javascript hacking and technology startups I'm a hacker in constant training
  • 3. About Appcelerator and Titanium JavaScript SDK to develop native, cross-platform mobile apps 500,000+ developers worldwide Titanium is free and Open Source Supports iOS, Android, Blackberry 10, Tizen and Windows in the works The Appcelerator Platform is the enterprise-grade suite of products based on Titanium
  • 4. What do I mean by cross- platform? To understand the power of Titanium, we first need to understand the problem Titanium solves
  • 5. Is a Web-app cross-platform? Let's use Facebook® as example
  • 6. Is a Web-app cross-platform? A web-app is cross-platform only if we define a cross-platform app as an app that can run on multiple platforms
  • 7. Cross-platform is much more than running on different platforms All platforms have their own set of NATIVE UI elements and UX patterns
  • 8. Building native mobile apps the traditional way is not trivial
  • 9. Objective-C (iOS) UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [myButton setTitle:@"Click Me!" forState:UIControlStateNormal];
  • 10. Java (Android) Button myButton = new Button(this); myButton.setText("Click Me!");
  • 11. Titanium solves this problem by offering a JavaScript SDK that normalizes the underlying SDKs
  • 12. Titanium/JavaScript (iOS, Android) var myButton=Ti.UI.createButton({ title:'Click Me!' })
  • 13. Alloy is Titanium's MVC framework that uses XML, TSS (like CSS) and JavaScript
  • 14. Titanium/Alloy (iOS, Android) <Alloy> <Button>Click Me!</Button> </Alloy>
  • 15. Alloy App Folder Structure
  • 16. Sample Two-tab App
  • 17. UI DEFINITION: INDEX.XML <alloy> <tabgroup id="win"> <tab title="Tab 1" icon="KS_nav_ui.png"> <window title="Tab 1"> <label class="mylabel">I am Window 1</label> </window> </tab> <tab title="Tab 2" icon="KS_nav_views.png"> <window title="Tab 2"> <label class="mylabel">I am Window 2</label> </window> </tab> </tabgroup> </alloy>
  • 18. UI STYLING: INDEX.TSS "Window": { backgroundColor: "#fff" }, "Label": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000", font: { fontSize: 20, fontFamily: 'Helvetica Neue' }, textAlign: 'center' }, "#win":{ top: 0, left: 0 }, ".mylabel":{ color: "#000" }
  • 19. Running on iOS 6
  • 20. Running on iOS 7
  • 21. Running on Android 2.x
  • 22. Running on Android ICS - Holo Dark
  • 23. Running on Android ICS - Holo Light
  • 24. Dealing with native UI elements from the same code- base
  • 25. Simple single-window app
  • 26. INDEX.XML
  • 27. INDEX.TSS
  • 28. INDEX.JS
  • 29. The vocabulary is well documented http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window
  • 30. View the Source https://github.com/appcelerator/KitchenSink/tree/master/Resources
  • 31. Built into Alloy Backbone Data-binding Synchronization adapters Underscore.js Moment.js Widgets Themes
  • 32. More cool stuff from Appcelerator ACS - Appcelerator Cloud Services Node.ACS Command-line interface (CLI)
  • 33. Get started today! Runs on Mac, Windows and Linux iOS development requires a Mac Requires installation and configuration of all native tools (Xcode, Android SDK manager, etc) Download Titanium Studio from my.appcelerator.com Start hacking!
  • 34. Thank you! Questions? Follow me on Twitter: @ricardoalcocer Github: /ricardoalcocer

×