Getting Started with Titanium & Alloy

Getting Started with Titanium & Alloy

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.

C056051a062fb1054cb45d98177384aa?s=128

Fokke Zandbergen

January 06, 2016
Tweet

Transcript

  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) !
  5. The Big Picture

  6. None
  7. None
  8. None
  9. None
  10. Signup & Setup

  11. www.appcelerator.org

  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
  13. www.appcelerator.com/signup

  14. web.appcelerator.com

  15. Prerequisites

  16. Break

  17. Titanium

  18. NO!

  19. None
  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
  25. docs.appcelerator.com

  26. File Structure ▾ Resources ▾ images logo.png app.js main.js utils.js

    tiapp.xml config code
  27. DEMO

  28. Break

  29. None
  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

  35. None
  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”
 });
  37. app 
 controllers views styles assets widgets controllers views styles

    assets themes styles assets Themes & Widgets
  38. ‘ COLLECTION SYNC ADAPTER STORAGE 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
  44. Share/Re-Use Images assets/iphone/images/image@2x.png assets/iphone/images/image@3x.png assets/images/image.png assets/android/images/res-mdpi/image.png assets/android/images/res-xhdpi/image.png assets/android/images/res-xxhdpi/image.png assets/android/images/res-xhdpi/some.file platform/android/res/drawable-xhdpi/some.file

    platform/android/res/drawable-nl-port-xhdpi/some.file assets/some_dir/some.file assets/android/some_dir/some.file assets/iphone/some_dir/some.file BEST PRACTICE
  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
  52. None
  53. www.tislack.org