Alloy #DMC13
•
0 likes•255 views
Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.
Report
Share
Alloy #DMC13
- 1. June 8th, 2013 www.fokkezb.nl Titanium Alloy FOKKE ZANDBERGEN
- 3. • Recap • Titanium • Appcelerator • Alloy • Components • Benefits • Compiler • Compared • Highlights • Q&A Titanium Alloy
- 4. Titanium != HTML JavaScript UI output Machine compilation Objective-C / Java interpretation 100% NATIVE
- 5. Titanium != HTML JavaScript UI output Machine compilation Objective-C / Java interpretation input Objective-C / Java Machine compilation output UI HTML/JS/CSS ?
- 9. Alloy Benefits • 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
- 15. Alloy Code 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();
- 16. Alloy Code 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
- 17. Alloy Structure compared > Resources app.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
- 18. Alloy Conditional 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
- 19. Alloy Classes & 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
- 20. Alloy Themes “Label”: { color: “black” } styles/index.tss “Label”: { color: “red” } themes/demo/styles/index.tss “Label”: { color: “green” } themes/demo/styles/app.tss
- 21. Alloy Require & 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
- 22. Alloy Models 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”);
- 23. Alloy Data 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
- 24. 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
- 26. www.amsterdam-titanium.nl meeting every 2 months talks • discussion • beer