Getting Started with Titanium & Alloy

January 6, 2016

Fokke Zandbergen Developer Evangelist

Appcelerator

@FokkeZB

Pierre van de Velde CTO

TheSmiths

@PierreVdeV

Nice to meet you!

Program

!" 1. The Big Picture 2. Signup & Setup !

3. Titanium !

4. Alloy !

5. Ten More Things (we wish we’d known) !

The Big Picture

Signup & Setup

www.appcelerator.org

• 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

www.appcelerator.com/signup

web.appcelerator.com

Prerequisites

Break

Titanium

NO!

HTML apps

$ %#

JS2Native

Architecture

Alloy Codebase Development

JavaScript

PackageRun-time

TitaniumModule APIs

TitaniumCore APIs

HyperloopAPIs

Kroll(iOS/Android)

HAL (Windows)

3P APIs OS Device & UI APIs Platform

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

Ti.createMyFartApp()

Ti.UI.createX() // Cross-platform UI View factoriesTi.UI.X // The UI View proxy the factory creates

Ti.UI.iOS.createX() // Platform specific UI View factories

Ti.X // Cross-platform device APIsTi.Android.X // Platform specific device APIs

require(“ti.map”).X // CommonJS & Titanium Modules

docs.appcelerator.com

File Structure

▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml config

code

DEMO

Break

Alloy MVC

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

<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

▸ app▾ Resources ▾ alloy ▾ controllers index.js backbone.js CFG.js underscore.js ▾ images logo.png alloy.js app.js utils.jstiapp.xml

▾ Resources ▾ images logo.png app.js main.js utils.jstiapp.xml

▾ app▾ assets ▾ images logo.png▾ controllers index.js▾ lib utils.js▾ styles index.tss▾ views index.xml▾ widgetsalloy.jsconfig.json

tiapp.xml

File Structure

Pro Tip: Unhide Resources

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” });

app

controllers

views

styles

assets

widgets

controllers

views

styles

assets

themes

styles

assets

Themes & Widgets

☁COLLECTIONSYNC ADAPTERSTORAGE BINDINGS VIEWS

Ti.UI

⚡EVENTS

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

DEMO

Break

Ten More Things (we wish we’d known)

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

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

BESTPRACTICE

Use the Alloy CLI

$ [appc] alloy generate controller foo

$ alloy copy foo bar/zoo

$ alloy move foo bar/zoo

$ alloy remove bar/zoo

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

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

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

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

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

Platform specificsPhones 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

www.tislack.org