Building mobile apps with
Titanium and Alloy
Boydlee Pollentine & Christian Brousseau
@TheBrousse

@Boydleep
What is Titanium
How does it work?
Native Application
Native components

Native Code
Titanium Code
(JavaScript)

Objective-C
Java
Other

Ti...
Under the hood
Your Application
UI API

Phone API

JavaScript - Native Bridge
Operating System

Modules
Hello World
Resources/app.js
var window = Ti.UI.createWindow({
backgroundColor: „white‟
});
var label = Ti.UI.createLabel(...
Alloy
How does “that” work

Alloy Code
Titanium
Code

JavaScript
XML
TSS
Alloy
Pre-compiler

Native
Code

Titanium
Compiler

Nat...
Same Hello World
views/index.xml
<Alloy>
<Window>
<Label onClick=”open”>Hello World</Label>
</Window>
</Alloy>

“Window”: ...
This is our App
We need data

URL:
http://developer.rottentomatoes.com

API Key:
fuvfpegjuuqtrdj5wm6sg2x5
What does it return?
{

}

"total": 37,
"movies": [
{
"id": "769959054",
"title": "The Dark Knight",
"year": 2008,
"releas...
Let’s get to work
There are books for that
Upcoming SlideShare
Loading in …5
×

Titanium Workshop - [Sainté Mobile Days]

959 views

Published on

Introduction workshop on Titanium and Alloy where attendees make a basic app in just a few hours.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
959
On SlideShare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Titanium Workshop - [Sainté Mobile Days]

  1. 1. Building mobile apps with Titanium and Alloy Boydlee Pollentine & Christian Brousseau
  2. 2. @TheBrousse @Boydleep
  3. 3. What is Titanium
  4. 4. How does it work? Native Application Native components Native Code Titanium Code (JavaScript) Objective-C Java Other Titanium Compiler JavaScript Runtime Native Compiler JavaScript Code
  5. 5. Under the hood Your Application UI API Phone API JavaScript - Native Bridge Operating System Modules
  6. 6. Hello World Resources/app.js var window = Ti.UI.createWindow({ backgroundColor: „white‟ }); var label = Ti.UI.createLabel({ color: „black‟, text: „Hello World‟ }); label.addEventListener(„click‟, function() { require(„windowTwo‟); } ); window.add(label); window.open();
  7. 7. Alloy
  8. 8. How does “that” work Alloy Code Titanium Code JavaScript XML TSS Alloy Pre-compiler Native Code Titanium Compiler Native Compiler
  9. 9. Same Hello World views/index.xml <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy> “Window”: { backgroundColor: “white” } controllers/index.js function open() { require(“windowTwo”); } $.index.open(); “Label”: { color: “black” } styles/index.tss
  10. 10. This is our App
  11. 11. We need data URL: http://developer.rottentomatoes.com API Key: fuvfpegjuuqtrdj5wm6sg2x5
  12. 12. What does it return? { } "total": 37, "movies": [ { "id": "769959054", "title": "The Dark Knight", "year": 2008, "release_dates": { "theater": "2008-07-18", "dvd": "2008-12-09" }, "ratings": { "critics_rating": "Certified Fresh", "critics_score": 94 } }, { "id": "10483", "title": "Batman", "year": 1989, "release_dates": { "theater": "1989-06-23", "dvd": "1997-03-25" }, "ratings": { "critics_rating": "Fresh", "critics_score": 71 } } ]
  13. 13. Let’s get to work
  14. 14. There are books for that

×