View
592
Download
1
Category
Preview:
DESCRIPTION
Introduction workshop on Titanium and Alloy where attendees make a basic app in just a few hours.
Citation preview
Building mobile apps with Titanium and Alloy
Boydlee Pollentine & Christian
Brousseau
@TheBrousse @Boydleep
What is Titanium
How does it work?
Native Application
Native components
JavaScript Runtime
JavaScript Code
Titanium Code
(JavaScript)
Native Code
Objective-CJavaOther
TitaniumCompiler
NativeCompiler
Under the hood
Operating System
JavaScript - Native Bridge
UI API Phone API Modules
Your Application
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();
Hello World
Alloy
How does “that” work
TitaniumCode
NativeCode
TitaniumCompiler
NativeCompiler
Alloy Code
JavaScriptXMLTSS
AlloyPre-compiler
Same Hello World
“Window”: {backgroundColor:
“white”}
“Label”: {color: “black”
}
styles/index.tss
<Alloy><Window>
<Label onClick=”open”>Hello World</Label>
</Window></Alloy>
views/index.xml
function open() {require(“windowTwo”);
}
$.index.open();
controllers/index.js
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, "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 } } ]}
Let’s get to work
There are books for that
Recommended