Multi-platform
mobile
development
with Titanium +
Alloy
About me
Have been using Titanium since late 2009
Former Titanium trainer in the Caribbean and Latin America
Obsessed with...
About Appcelerator and
Titanium
JavaScript SDK to develop native, cross-platform mobile apps
500,000+ developers worldwide...
What do I mean by cross-
platform?
To understand the power of Titanium, we
first need to understand the problem
Titanium s...
Is a Web-app cross-platform?
Let's use Facebook® as example
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 ...
Cross-platform is much more
than running on different
platforms
All platforms have their own set of
NATIVE UI elements and...
Building native mobile apps
the traditional way is not trivial
Objective-C (iOS)
UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
[myButton setTitle:@"Click Me!" ...
Java (Android)
Button myButton = new Button(this);
myButton.setText("Click Me!");
Titanium solves this problem
by offering a JavaScript SDK
that normalizes the underlying
SDKs
Titanium/JavaScript (iOS,
Android)
var myButton=Ti.UI.createButton({
title:'Click Me!'
})
Alloy is Titanium's MVC
framework that uses XML, TSS
(like CSS) and JavaScript
Titanium/Alloy (iOS, Android)
<Alloy>
<Button>Click Me!</Button>
</Alloy>
Alloy App Folder Structure
Sample Two-tab App
UI DEFINITION: INDEX.XML
<alloy>
<tabgroup id="win">
<tab title="Tab 1" icon="KS_nav_ui.png">
<window title="Tab 1">
<labe...
UI STYLING: INDEX.TSS
"Window": {
backgroundColor: "#fff"
},
"Label": {
width: Ti.UI.SIZE,
height: Ti.UI.SIZE,
color: "#00...
Running on iOS 6
Running on iOS 7
Running on Android 2.x
Running on Android ICS - Holo
Dark
Running on Android ICS - Holo
Light
Dealing with native UI
elements from the same code-
base
Simple single-window app
INDEX.XML
INDEX.TSS
INDEX.JS
The vocabulary is well
documented
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window
View the Source
https://github.com/appcelerator/KitchenSink/tree/master/Resources
Built into Alloy
Backbone
Data-binding
Synchronization adapters
Underscore.js
Moment.js
Widgets
Themes
More cool stuff from
Appcelerator
ACS - Appcelerator Cloud Services
Node.ACS
Command-line interface (CLI)
Get started today!
Runs on Mac, Windows and Linux
iOS development requires a Mac
Requires installation and configuration o...
Thank you!
Questions?
Follow me on
Twitter: @ricardoalcocer
Github: /ricardoalcocer
Upcoming SlideShare
Loading in …5
×

Multi platform development using titanium + alloy

4,008 views

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.

  • Be the first to comment

Multi platform development using titanium + alloy

  1. 1. Multi-platform mobile development with Titanium + Alloy
  2. 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. 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. 4. What do I mean by cross- platform? To understand the power of Titanium, we first need to understand the problem Titanium solves
  5. 5. Is a Web-app cross-platform? Let's use Facebook® as example
  6. 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. 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. 8. Building native mobile apps the traditional way is not trivial
  9. 9. Objective-C (iOS) UIButton *myButton = [UIButton buttonWithType:UIButtonTypeRoundedRect]; [myButton setTitle:@"Click Me!" forState:UIControlStateNormal];
  10. 10. Java (Android) Button myButton = new Button(this); myButton.setText("Click Me!");
  11. 11. Titanium solves this problem by offering a JavaScript SDK that normalizes the underlying SDKs
  12. 12. Titanium/JavaScript (iOS, Android) var myButton=Ti.UI.createButton({ title:'Click Me!' })
  13. 13. Alloy is Titanium's MVC framework that uses XML, TSS (like CSS) and JavaScript
  14. 14. Titanium/Alloy (iOS, Android) <Alloy> <Button>Click Me!</Button> </Alloy>
  15. 15. Alloy App Folder Structure
  16. 16. Sample Two-tab App
  17. 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. 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. 19. Running on iOS 6
  20. 20. Running on iOS 7
  21. 21. Running on Android 2.x
  22. 22. Running on Android ICS - Holo Dark
  23. 23. Running on Android ICS - Holo Light
  24. 24. Dealing with native UI elements from the same code- base
  25. 25. Simple single-window app
  26. 26. INDEX.XML
  27. 27. INDEX.TSS
  28. 28. INDEX.JS
  29. 29. The vocabulary is well documented http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.Window
  30. 30. View the Source https://github.com/appcelerator/KitchenSink/tree/master/Resources
  31. 31. Built into Alloy Backbone Data-binding Synchronization adapters Underscore.js Moment.js Widgets Themes
  32. 32. More cool stuff from Appcelerator ACS - Appcelerator Cloud Services Node.ACS Command-line interface (CLI)
  33. 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. 34. Thank you! Questions? Follow me on Twitter: @ricardoalcocer Github: /ricardoalcocer

×