alloy #dmc13
TRANSCRIPT
June 8th, 2013www.fokkezb.nlTitanium Alloy
FOKKEZANDBERGEN
• Recap
• Titanium
• Appcelerator
• Alloy
• Components
• Benefits
• Compiler
• Compared
• Highlights
• Q&A
Titanium Alloy
Titanium!= HTML
JavaScript
UIoutput
Machine
compilation
Objective-C / Java
interpretation
100%NATIVE
Titanium!= HTML
JavaScript
UIoutput
Machine
compilation
Objective-C / Java
interpretation
input
Objective-C / Java
Machine
compilation
output
UI
HTML/JS/CSS
?
Appcelerator Platform
Titanium
Alloy
AppceleratorMobile first platform
Test
Analytics
Cloud
FREE
Support
AlloyComponents
AlloyBenefits
• Write up to 50% less code
• Re-style apps using themes
• Re-use code using widgets
• Bind abstracted data models
• Separate concerns, e.g. design
• Fully integrated in Studio
• Widget marketplace coming
AlloyCompiler
TSS
XML
Views
+
=Definition
=
Models Controllers
Assets
AlloyCompiler
Definition=
Models ControllersCommonJS
Assets
AlloyCompiler
Collections
Sync
Store
Models ControllersCommonJS
Assets
AlloyCompiler
Collections
Sync
Store
Models ControllersCommonJS
Assets
AlloyCompiler
Collections
Sync
Store
Models ControllersCommonJS
Assets
AlloyCode compared
var window = Ti.UI.createWindow({backgroundColor: “white”
});
var label = Ti.UI.createLabel({color: “black”
});
label.addEventListener(“click”,function() {
require(“windowTwo”);}
);
window.add(label);window.open();
AlloyCode compared
<Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window></Alloy>
“Window”: {backgroundColor: “white”
}
“Label”: {color: “black”
}
function open() {require(“windowTwo”);
}
$.index.open();
views/index.xml
controllers/index.jsstyles/index.tss
AlloyStructure compared
> Resourcesapp.js> images appicon.png
> tiapp.xml
> app> assets> images appicon.png
> controllers index.js> models> styles index.tss> views index.xml> widgets alloy.js config.json
> tiapp.xml
AlloyConditional code
<Alloy> <Window> <Label platform=”ios” formFactor=”tablet”>Hi!</Label> </Window></Alloy>
“Window[platform=ios]”:{backgroundColor: “white”
}
“Label[formFactor=tablet]”:{color: “black”
}
if (ENV_TEST) {alert(“Bye!”);
}
$.index.open();
views/index.xml
controllers/android/index.jsstyles/index.tss
AlloyClasses & IDs
<Alloy> <Window> <Label class=”text”>Hello</Label> <Label class=”text” id=”world”>World</Label> </Window></Alloy> views/index.xml
“.text”:{ shadowColor: “#000”}
“#world”:{color: “green”
}
$.world.text = “DMC13”
$.index.open();
controllers/index.jsstyles/index.tss
AlloyThemes
“Label”: { color: “black”}
styles/index.tss
“Label”: { color: “red”}
themes/demo/styles/index.tss
“Label”: { color: “green”}
themes/demo/styles/app.tss
AlloyRequire & Widgets
<Alloy> <Window> <Require src=”hello” /> <Widget src=”bye” /> </Window></Alloy> views/index.xml
<Alloy> <Label onClick=”open”>Hello World</Label></Alloy> views/hello.xml
<Alloy> <Label onClick=”close”>Bye World</Label></Alloy> widgets/bye/views/widget.xml
AlloyModels
exports.definition = { config: { columns: { "title": "String", "subject": "String" }, adapter: { "type": "sql", "collection_name": "books" } }} models/book.js
controllers/index.js
var books = Alloy.Collections.instance(“book”);
AlloyData binding
<Alloy> <Collection src=”book” /> <Window> <TableView dataCollection=”book” dataFilter=”filter”> <TableViewRow title=”{title}” /> </TableView> </Window></Alloy> views/index.xml
function filter(collection) {return collection.where({subject:”Alloy”});
}
$.index.open(); controllers/index.js
How to get Alloy?
1.Install Titanium Studio 3.x
2.Go File > New > Mobile Project
3.Select an Alloy project template
4.Go Run > Run
5.Read the Alloy docs:http://bit.ly/alloydocs
6.Read the BackBone 0.9.2 docs:http://bit.ly/bb092
[email protected] @FokkeZB
www.amsterdam-titanium.nlmeeting every 2 monthstalks • discussion • beer