TiLon Alloy

8/22/2019 TiLon Alloy

1/17

MVC in TitaniumOr: How I Learned to Stop Worrying and Love Alloy


2/17

What is Alloy?

Appcelerators MVC framework for Titanium

Open Source

Built on Node.js

Code apps faster and more scalable

Keep more of your hair! X


3/17

What is MVC?

M

odel - V

iew - C

ontroller

Separates Logic from UI from Data

Change look-and-feel without affecting logic

Change data without touching UI

Model - logical data structure

View - UI and all its elements

Controller - logic connecting model to view


4/17

Classic Titanium Development

Everything in one place - spaghetti codeRoll-your-own abstraction

Everybody rolls differently, no standards

Harder to maintain, not easily scalable


5/17

Classic Titanium Development

Create Window

Create Label

Add Event Listener

Add Label to Window

Open Window


6/17

Alloy: Views

Represents the UI of the app

XML defines structure of controls

Parameters assign ID, class, style properties,

arguments, event listeners and platform

Easy to visualize the layout of UI elements with app and

relationships to one another

Easier to add, remove or change UI elements without

breaking app


7/17

Alloy: Styles

TSS: CSS-like structure familiar for web developers

Keeps all styling separate from logic and layout

Allows for platform specific styling making cross-

platform development easier


8/17

Alloy: Controllers

Javascript code handling the business logic

Interact with UI element declared in XML

Access view elements with $.[id]

Platform SpecificOS_IOS, OS_ANDROID, OS_MOBILEWEB

Environment SpecificENV_DEV, ENV_TEST, ENV_PRODUCTION

Handle arguments

var args = arguments[0] || {};


9/17

Alloy Development

Images, App Icons, etc

Controllers

Styles

Views


10/17

Alloy Development

Window Styling

Label Styling


11/17

Alloy Development

Open Window

Event Listener Function

Simples!


12/17

Alloy.CFG (config.json)

JSON config file resides in app directory

Hard coded values needed in the appFacebook ID, API keys, XHR urls, etc.

Environment specific values"env:development": {},

"env:production": {}

Platform specific values"os:ios": {},

"os:android": {}


13/17

Alloy.Globals

Standardized global variable namespace

Alloy.Globals.myObject

Alloy.Globals.myString

Accessible anywhere in the app

Keeps global scope clean


14/17

Global Styles (app.tss)

TSS file resides in app/styles directory

Styles defined are accessible from anywhere in the app

Class and UI element global styling

.classid for classes (eg .redText)

ElementName for Ti.UI elements (eg Label)

Does not override non-global styles or attributes in

views XML


15/17

Conditional Code

Conditional code can be in Views, Styles and

Controllers

Views

Styles"#map[platform=ios]": {mapType: Ti.Map.STANDARD_TYPE }"#map[platform=android]": {mapType: Alloy.Globals.Map.NORMAL_TYPE}

Controllersif (OS_IOS) { // some ios specific code} else if (OS_ANDROID) { // some android specific code

}

if (ENV_DEV) { // dev environment code} else if (ENV_PRODUCTION) { // production environment code

}


16/17

Getting Started

Alloy Quick Start Guide

http://docs.appcelerator.com/titanium/latest/#!/guide/Alloy_Quick_Start

Alloy Google Grouphttps://groups.google.com/forum/?fromgroups=#!forum/appc-ti-alloy

Alloy on Githubhttps://github.com/appcelerator/alloy


17/17

Julian [email protected]

@movilmobil

Documents

TiLon Alloy