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