Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Alloy #DMC13

Alloy #DMC13

Overview of the Alloy MVC framework for Appcelerator's Titanium platform, delivered at the Dutch Mobile Conference 2013 in Amsterdam from June 6 - 8th.

Fokke Zandbergen

June 08, 2013
Tweet

More Decks by Fokke Zandbergen

Other Decks in Technology

Transcript

  1. • Recap • Titanium • Appcelerator • Alloy • Components

    • Benefits • Compiler • Compared • Highlights • Q&A Titanium Alloy
  2. Titanium != HTML JavaScript UI output Machine compilation Objective-C /

    Java interpretation input Objective-C / Java Machine compilation output UI HTML/JS/CSS ?
  3. 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
  4. 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();
  5. 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.js styles/index.tss
  6. 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
  7. 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.js styles/index.tss
  8. 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.js styles/index.tss
  9. Alloy Themes “Label”: { color: “black” } styles/index.tss “Label”: {

    color: “red” } themes/demo/styles/index.tss “Label”: { color: “green” } themes/demo/styles/app.tss
  10. 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
  11. 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”);
  12. 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
  13. 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