Getting Started with Titanium & Alloy
0 likes516 views
An introduction the big picture of the Appcelerator Platform and the architecture and principles behind Titanium and Alloy to get you started. Created and presented by myself and Pierre van de Velde at meetup.com/TitaniumNL.
![• Titanium CLI
/appcelerator/titanium
[sudo] npm install -g titanium && ti setup
• Titanium SDK *
/appcelerator/titanium_mobile
ti sdk install -b 5_1_X -d
• Alloy CLI
/appcelerator/alloy
[sudo] npm install -g alloy](https://image.slidesharecdn.com/gettingstartedwithtitaniumandalloy-160119074245/85/Getting-Started-with-Titanium-Alloy-12-320.jpg)
![Protect the Global Scope
var uuid = Ti.Platform.createUUID(); // wrong
(function(global) {
var version = Ti.Platform.version; // safe
Alloy.Globals.iOS8 = version.split(“.”)[0] === ”8”;
global.started = Ti.Platform.createUUID(); // avoid
Alloy.Globals.seed = Ti.Platform.createUUID(); // better
})(this);
alloy.js / app.js
module.exports = {
seed: Ti.Platform.createUUID(); // best
};
utils.js](https://image.slidesharecdn.com/gettingstartedwithtitaniumandalloy-160119074245/85/Getting-Started-with-Titanium-Alloy-43-320.jpg)
![Use the Alloy CLI
$ [appc] alloy generate controller foo
$ alloy copy foo bar/zoo
$ alloy move foo bar/zoo
$ alloy remove bar/zoo](https://image.slidesharecdn.com/gettingstartedwithtitaniumandalloy-160119074245/85/Getting-Started-with-Titanium-Alloy-45-320.jpg)
![Use Conditional Code
<Alloy>
<Label platform=”ios,!android”>iOS, Windows</Label>
<Label formFactor=”handheld”>Handheld</Label>
<Label if=”Alloy.Globals.iOS8”>iOS 8</Label>
</Alloy>
”Label[platform=ios,!android formFactor=tablet]”: {
color: “red”
}
”Label[if=Alloy.Globals.iOS8]”: {
backgroundColor: “green”
}
if (OS_IOS && ENV_PRODUCTION && DIST_STORE) {
alert(“iOS App Store, not Ad Hoc”);
}
index.xml
index.tss
index.js](https://image.slidesharecdn.com/gettingstartedwithtitaniumandalloy-160119074245/85/Getting-Started-with-Titanium-Alloy-46-320.jpg)
![Platform specifics
Phones are not fixed size, use layouts
<View class="container" layout="vertical"> view.xml
Use platform specific styling
"ActivityIndicator[platform=android]":{
style: Ti.UI.ActivityIndicatorStyle.DARK
}
"ActivityIndicator[platform=ios]":{
style: Ti.UI.iPhone.ActivityIndicatorStyle.DARK
}
style.tss
Specifics folders for platform & density](https://image.slidesharecdn.com/gettingstartedwithtitaniumandalloy-160119074245/85/Getting-Started-with-Titanium-Alloy-51-320.jpg)
Ad
More Related Content
What's hot (20)
Viewers also liked (17)
Ad
Similar to Getting Started with Titanium & Alloy (20)
Ad
More from Fokke Zandbergen (20)
Getting Started with Titanium & Alloy
- 1. Getting Started with Titanium & Alloy January 6, 2016
- 2. Fokke Zandbergen Developer Evangelist Appcelerator @FokkeZB Pierre van de Velde CTO TheSmiths @PierreVdeV
- 3. Nice to meet you!
- 4. Program !" 1. The Big Picture 2. Signup & Setup ! 3. Titanium ! 4. Alloy ! 5. Ten More Things (we wish we’d known) !
- 10. Signup & Setup
- 12. • Titanium CLI /appcelerator/titanium [sudo] npm install -g titanium && ti setup • Titanium SDK * /appcelerator/titanium_mobile ti sdk install -b 5_1_X -d • Alloy CLI /appcelerator/alloy [sudo] npm install -g alloy
- 15. Prerequisites
- 16. Break
- 17. Titanium
- 18. NO!
- 20. HTML apps #
- 21. JS2Native
- 22. Architecture Alloy Codebase Development JavaScript Package Run-time Titanium Module APIs Titanium Core APIs Hyperloop APIs Kroll (iOS/Android) HAL (Windows) 3P APIs OS Device & UI APIs Platform
- 23. Hello World var window = Ti.UI.createWindow({ backgroundColor: “white" }); var label = Ti.UI.createLabel({ text: “Hello World” }); label.addEventListener(“click”, function open() { alert(“Hello World”); } ); window.add(label); window.open(); Ti API
- 24. Ti.createMyFartApp() Ti.UI.createX() // Cross-platform UI View factories Ti.UI.X // The UI View proxy the factory creates Ti.UI.iOS.createX() // Platform specific UI View factories Ti.X // Cross-platform device APIs Ti.Android.X // Platform specific device APIs require(“ti.map”).X // CommonJS & Titanium Modules
- 26. File Structure ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml config code
- 27. DEMO
- 28. Break
- 30. Alloy MVC
- 31. Classic Spaghetti var window = Ti.UI.createWindow({ backgroundColor: “white" }); var label = Ti.UI.createLabel({ text: “Hello World” }); label.addEventListener(“click”, function open() { alert(“Hello World”); } ); window.add(label); window.open(); style logic markup
- 32. <Alloy> <Window> <Label onClick=”open”>Hello World</Label> </Window> </Alloy> ”Window”: { backgroundColor: “white” } function open() { alert(“Hello World”); } $.index.open(); index.xml index.tss index.js Alloy
- 33. ▸ app ▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.js tiapp.xml ▾ Resources ▾ images logo.png app.js main.js utils.js tiapp.xml ▾ app ▾ assets ▾ images logo.png ▾ controllers index.js ▾ lib utils.js ▾ styles index.tss ▾ views index.xml ▾ widgets alloy.js config.json tiapp.xml File Structure
- 34. Pro Tip: Unhide Resources
- 36. What happens to your XML and TSS? <Foo> <Foo ns=“Ti.bar”> <Foo module=“bar”> <Require src=“foo”> <Widget src=“foo”> <Foo id=“bar”> <Foo bar=“zoo”> “#bar”: { color: “white” } Ti.UI.createFoo(); Ti.bar.createFoo(); require(“bar”).createFoo(); Alloy.createController(“foo”) .getView(); Alloy.createWidget(“foo”) .getView(); $.bar = Ti.UI.createFoo(); Ti.UI.createFoo({ bar: “zoo” }); $.bar = Ti.UI.createFoo({ color: “white” });
- 38. ☁COLLECTIONSYNC ADAPTERSTORAGE BINDINGS VIEWS Ti.UI ⚡EVENTS
- 39. Data binding <Alloy> <Collection src=”album” /> <TableView dataCollection=”album” dataTransform=”transformer” dataFilter=”filter”> <TableViewRow title=”{title} by {artist}” /> </TableView> </Alloy> index.xml function filter(collection) { return collection.where({artist:”Beatles”}); } function transformer(model) { var transformed = model.toJSON(); transformed.title = transformed.title.toUpperCase(); return transformed; } index.js
- 40. DEMO
- 41. Break
- 42. Ten More Things (we wish we’d known)
- 43. Protect the Global Scope var uuid = Ti.Platform.createUUID(); // wrong (function(global) { var version = Ti.Platform.version; // safe Alloy.Globals.iOS8 = version.split(“.”)[0] === ”8”; global.started = Ti.Platform.createUUID(); // avoid Alloy.Globals.seed = Ti.Platform.createUUID(); // better })(this); alloy.js / app.js module.exports = { seed: Ti.Platform.createUUID(); // best }; utils.js
- 45. Use the Alloy CLI $ [appc] alloy generate controller foo $ alloy copy foo bar/zoo $ alloy move foo bar/zoo $ alloy remove bar/zoo
- 46. Use Conditional Code <Alloy> <Label platform=”ios,!android”>iOS, Windows</Label> <Label formFactor=”handheld”>Handheld</Label> <Label if=”Alloy.Globals.iOS8”>iOS 8</Label> </Alloy> ”Label[platform=ios,!android formFactor=tablet]”: { color: “red” } ”Label[if=Alloy.Globals.iOS8]”: { backgroundColor: “green” } if (OS_IOS && ENV_PRODUCTION && DIST_STORE) { alert(“iOS App Store, not Ad Hoc”); } index.xml index.tss index.js
- 47. Use Conditional Config { "global": {"foo":1}, "env:development": {"foo":2}, "env:test":{"foo":3}, "env:production":{"foo":4}, "os:ios env:production": {"foo":5}, "os:ios env:development": {"foo":6}, "os:ios env:test": {"foo":7}, "os:android":{"foo":8}, "os:mobileweb":{"foo":9}, "dependencies": { “com.foo.widget":"1.0" } } if (OS_IOS && ENV_TEST && Alloy.CFG.foo !== 7) { alert(“Wrong!”); } config.json > CFG.js index.js
- 48. Get your code organised You can organise controllers in subfolders. Use CommonJS modules module.exports = { property: value, util: function() {} }; module.js Drop modules .zip files in root directory
- 49. Don’t repeat yourself Use Alloy.CFG to get your config in one place "global": { "COLORS": { "WHITE": “#fff" }, "FONTS": { "FONT_FAMILY_LIGHT": “Montserrat-Light" }, "SIZES": { "MARGIN_XSMALL": “5” } } config.json ".container": { top: Alloy.CFG.SIZES.MARGIN_XSMALL, backgroundColor: Alloy.CFG.COLORS.WHITE } style.tss
- 50. Use global styling Create Global styling to be applied everywhere ".Compact": { height: Ti.UI.SIZE, width: Ti.UI.SIZE } ".Left" : { left: 0 } ".Top" : { top: 0 } ".Error" : { backgroundColor: Alloy.CFG.COLORS.WHITE, color: Alloy.CFG.COLORS.RED, } app.tss <Label class="Bottom Hidden Error" /> view.xml
- 51. Platform specifics Phones are not fixed size, use layouts <View class="container" layout="vertical"> view.xml Use platform specific styling "ActivityIndicator[platform=android]":{ style: Ti.UI.ActivityIndicatorStyle.DARK } "ActivityIndicator[platform=ios]":{ style: Ti.UI.iPhone.ActivityIndicatorStyle.DARK } style.tss Specifics folders for platform & density
- 53. www.tislack.org