TiAppCamp Alloy Overview

JAMIL HASSAN SPAIN,
SOLUTIONS ARCHITECT
@JAMILSPAIN
SKYPE: JAMIL.HASSAN.SPAIN

© 2011 Appcelerat...
Little Bit About Me
•  Career software Engineer
• From North Carolina, home of
RedHat ( Big Fedora Fan )
• Started with PH...
Alloy Overview

UIF-3
© 2011 Appcelerator, Inc.!
Overview & Goals
•  Titanium Classic was the de facto standard
• Resulted in many different implementations ( code generat...
Alloy MVC Components
•  Everything from Titanium Classic +
• 
• 
• 
• 
• 

Views
Styles
Controllers
Models
Widgets

Alloy ...
View – Index.xml
Alloy View != Ti.UI.View ( that <div> like thing). We’re
talking MVC View here.

<Alloy>
<Window class="c...
Styles – Fugitives.tss
".container": {
backgroundColor: "white"
},
"Tab" : {
icon: '/images/fugitives.png',
},
"Window": {...
Controllers
function doClick(e) {
alert($.label.text);
}
$.index.open();

© 2011 Appcelerator, Inc.!
Models
exports.definition = {
config : {
"columns" : {
"name" : "string",
"captured" : "integer",
"url" : "string",
"captu...
Convention Over Configuration
File/Directory

Contents & Purpose

/app/config.json

Specify global values, conditional env...
Controllers
in Depth

UIF-11
© 2011 Appcelerator, Inc.!
Controllers
•  Contain the application logic
•  Communicate between Views and Models
•  Handle user interaction and dynami...
Views Without IDs
// index.xml
<Alloy>
<Window class="container">
<Label id="label"
onClick="doClick">Hello, World</Label>...
Event Handling
/* listening for an event on a Ti object with id of 'button' */
$.button.addEventListener('click', function...
Dynamically Creating Views
Alloy.createController – factory method for instantiating
controller

Controller.getView – retu...
Controllers as Factories
Using custom rows in a tableview

var rows = [];
// arr is some array of data to show in a table
...
Passing Arguments
Pass arguments when initializing a controller
// controller row.js
var args = arguments[0] || {};
$.rowV...
Controller Communication “into”
Publish public methods for controllers

// Controller index.js
var web = Alloy.createContr...
Controller Communication “outside”
Trigger Events outside controllers

// Controller index.js( index.xml )
<Require id=“bo...
Controller Communication “outside”
Trigger Events outside controllers
// Controller index.js( index.xml )
<Require id=“bot...
Alloy Views &
Styles in Detail

UIF-21
© 2011 Appcelerator, Inc.!
View Tag Require
// From other file like TabGroup/Window
<Require type="view" src="fugitives" id="fugitivetab"/>
// view f...
NameSpaces “View Language”
•  Imagine a create with <View, <NavigationGroup
•  Defaults to the “Ti.UI” namespace
* Create ...
Style Files
•  Component, class, and ID
•  Global app.tss
•  Constants
•  i18n functions
•  Alloy Globals

© 2011 Appceler...
Style Files
•  Component, class, and ID
•  Global app.tss
•  Constants
•  i18n functions
•  Alloy Globals

".activeButton"...
Platform
Handling

UIF-26
© 2011 Appcelerator, Inc.!
Platform & Form Factor
•  Conditional Code
•  App assets
•  Platform Build-time Folders
•  Markup-based Techniques
•  TSS-...
Conditional Code
•  OS_IOS, OS_Android, OS_MOBILEWEB
•  ENV_DEV, ENV_TEST, ENV_PRODUCTION

if (ENV_DEV && OS_IOS) {
alert(...
Asset Folders

© 2011 Appcelerator, Inc.!
Platform Overrides
Work for Views, styles, and controllers.. Let me explain

© 2011 Appcelerator, Inc.!
Platform and Device Markup
<Alloy>
<Window class="container">
<View formFactor="handheld">
<Label>I'm a handheld!</Label>
...
TSS-Based Qualifiers
"#mybutton[platform=android]" : {
height:'40dp',
},
"#mybutton[platform=ios]" : {
height:50,
},
"#osL...
Configurations
// config.json file
{
"global": { "foo": 1},
"env:development": {},
"env:test": {},
"env:production": {},
"...
Themes
•  Named collection of styles and assets
•  Applied via setting in the config.json file ( can be
platform-specific ...
Themes Example
// file system structure
app/
assets/
appicon.png
background.png
styles/
app.tss
index.tss
themes/
mytheme/...
Alloy vs. “Traditional”
•  It’s not all or nothing – Ti.UI.createView() and its
brethren still are valid
•  API techniques...
Cool Utilities

UIF-37
© 2011 Appcelerator, Inc.!
TiShadow
•  Historically, we had to build an app and wait about 20
or so seconds for it to build.. Iterative dev process
•...
TiShadow Install Steps
•  Npm install –g tishadow
•  Download git repo, import the project into Studio,
build project to i...
Introducing LiveView
•  Feature of our Appcelerator Studio which comes with
Appcelerator Platform
•  Based on TiShadow the...
Other Enterprise Features
•  App Analytics for all your applications
•  Appcelerator Studio which includes LiveView, Code
...
Appcelerator Test
•  Integrated Functional Test Automation to improve the
workflow of your QA process

© 2011 Appcelerator...
Appcelerator Performance Management
•  Captures data in real-time to provide actionable
information about user, device and...
Thank you
JAMIL HASSAN SPAIN
@JAMILSPAIN
SKYPE: JAMIL.HASSAN.SPAIN
JSPAIN@APPCELERATOR.COM

© 2011 Appcelerator, Inc.!
Upcoming SlideShare
Loading in …5
×

TiAppCamp Atlanta 2013: Alloy Overview

5,102 views

Published on

Published in: Technology
1 Comment
9 Likes
Statistics
Notes
No Downloads
Views
Total views
5,102
On SlideShare
0
From Embeds
0
Number of Embeds
1,767
Actions
Shares
0
Downloads
132
Comments
1
Likes
9
Embeds 0
No embeds

No notes for slide

TiAppCamp Atlanta 2013: Alloy Overview

  1. 1. TiAppCamp Alloy Overview JAMIL HASSAN SPAIN, SOLUTIONS ARCHITECT @JAMILSPAIN SKYPE: JAMIL.HASSAN.SPAIN © 2011 Appcelerator, Inc.!
  2. 2. Little Bit About Me •  Career software Engineer • From North Carolina, home of RedHat ( Big Fedora Fan ) • Started with PHP in early days 3.x or PHP F/I • Few years in Education, Cisco, open consulting market, entrepreneur to AppC in 2011 • Started career as Training Instructor for Titanium Certifications • Currently Solutions Architect for Enterprise Sales UIF-2 © 2011 Appcelerator, Inc.!
  3. 3. Alloy Overview UIF-3 © 2011 Appcelerator, Inc.!
  4. 4. Overview & Goals •  Titanium Classic was the de facto standard • Resulted in many different implementations ( code generation ) • Projects passed had learning curves, “learn my style” ( business ) • Many community solutions popped up.. Extanium •  MVC separates form and function • Speed and simplify development • Improve maintainability •  Alloy is Appcelerator’s MVC-like framework for Titanium UIF-4 © 2011 Appcelerator, Inc.!
  5. 5. Alloy MVC Components •  Everything from Titanium Classic + •  •  •  •  •  Views Styles Controllers Models Widgets Alloy acts as a Pre-Compiler to convert MVC output to Titanium Classic Code in Resources Folder. UIF-5 © 2011 Appcelerator, Inc.!
  6. 6. View – Index.xml Alloy View != Ti.UI.View ( that <div> like thing). We’re talking MVC View here. <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> UIF-6 © 2011 Appcelerator, Inc.!
  7. 7. Styles – Fugitives.tss ".container": { backgroundColor: "white" }, "Tab" : { icon: '/images/fugitives.png', }, "Window": { backgroundColor:'transparent', backgroundImage: 'images/grain.png', title: 'Fugitives', barColor: '#6d0a0c', }, '#table' : { backgroundColor: 'transparent' } © 2011 Appcelerator, Inc.!
  8. 8. Controllers function doClick(e) { alert($.label.text); } $.index.open(); © 2011 Appcelerator, Inc.!
  9. 9. Models exports.definition = { config : { "columns" : { "name" : "string", "captured" : "integer", "url" : "string", "capturedLat" : "real", "capturedLong" : "real" }, "adapter" : { "type" : "sql", "collection_name" : "fugitives" } }, } © 2011 Appcelerator, Inc.!
  10. 10. Convention Over Configuration File/Directory Contents & Purpose /app/config.json Specify global values, conditional environment and operating system values, and widget dependencies. /app/views XML View files /app/styles TSS Style Files /app/controllers JavaScript Controller Files /app/models JavaScript Model Files /app/migrations JSON files that describe incremental changes in your database, in the format DATETIME_modelname.json /app/assets Graphic, data file, and other app assets; not created by default /app/lib App-specific library files; not created by default. /app/themes Theme files and assets to customize your UI; not created by default /app/widgets Files and assets associated with widgets ( selfcontained app components ) © 2011 Appcelerator, Inc.!
  11. 11. Controllers in Depth UIF-11 © 2011 Appcelerator, Inc.!
  12. 12. Controllers •  Contain the application logic •  Communicate between Views and Models •  Handle user interaction and dynamic UI updates •  Access components via their id attribute: $.idstring © 2011 Appcelerator, Inc.!
  13. 13. Views Without IDs // index.xml <Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> * Controller name determines controller open() unless you assign an ID for root element ( window ) // index.xml <Alloy> <Window class="container" id="mainwin"> <Label id="label" onClick="doClick">Hello, World</Label> </Window> </Alloy> // in index.js // Window tag has an id, so $.index.open() would fail! $.mainwin.open(); © 2011 Appcelerator, Inc.!
  14. 14. Event Handling /* listening for an event on a Ti object with id of 'button' */ $.button.addEventListener('click', function(e){ // do something }); // firing an event $.button.fireEvent('click', {foo: 'bar'}); // adding and removing an event var listener = function() { Ti.API.info("Event listener called."); } $.win.addEventListener('click', listener); $.win.removeEventListener('click', listener); © 2011 Appcelerator, Inc.!
  15. 15. Dynamically Creating Views Alloy.createController – factory method for instantiating controller Controller.getView – return the view associated with the controller Controller.#element – allows access directly to view elements // controller file something like index.js // we're dynamically loading and showing some other view var foo = Alloy.createController('foo').getView(); foo.open(); var foo = Alloy.createController(‘foo’); foo.mainwin.open(); © 2011 Appcelerator, Inc.!
  16. 16. Controllers as Factories Using custom rows in a tableview var rows = []; // arr is some array of data to show in a table for (var i = 0; i < arr.length; i++) { var row = Alloy.createController('CustomRow', arr[i].toJSON()).getView(); rows.push(row); } // set the table $.table.setData(rows); © 2011 Appcelerator, Inc.!
  17. 17. Passing Arguments Pass arguments when initializing a controller // controller row.js var args = arguments[0] || {}; $.rowView.title = args.title || ''; $.rowView.url = args.url || ''; // Controller index.js var data[]; for (var i=0; i < source.length; i++) { var arg = { title: source[i].postTitle, url: source[i].postLink }; var row = Alloy.createController('row', arg).getView(); data.push(row); } $.tableView.setData(data); © 2011 Appcelerator, Inc.!
  18. 18. Controller Communication “into” Publish public methods for controllers // Controller index.js var web = Alloy.createController(“index2”); web.updateWebView(‘google.com’); // Controller index2.js exports.updateWebView = function(webpage){ $.web.setUrl(webpage); } © 2011 Appcelerator, Inc.!
  19. 19. Controller Communication “outside” Trigger Events outside controllers // Controller index.js( index.xml ) <Require id=“bottom” onClick=“bottomBarClick” src=“index2” /> // Controller index2.js $.button.addEventListener(‘click’, function() { $.trigger(‘click’, { action: “show”, menu: “events” }); }); © 2011 Appcelerator, Inc.!
  20. 20. Controller Communication “outside” Trigger Events outside controllers // Controller index.js( index.xml ) <Require id=“bottom” onClick=“bottomBarClick” src=“index2” /> // Controller index2.js $.button.addEventListener(‘click’, function() { $.trigger(‘click’, { action: “show”, menu: “events” }); }); © 2011 Appcelerator, Inc.!
  21. 21. Alloy Views & Styles in Detail UIF-21 © 2011 Appcelerator, Inc.!
  22. 22. View Tag Require // From other file like TabGroup/Window <Require type="view" src="fugitives" id="fugitivetab"/> // view file - fugitives.xml <Alloy> <ImageView id='foo' image='foo.png'/> </Alloy> // style file – fugitives.tss "#foo": { height:Ti.UI.SIZE, width: Ti.UI.SIZE } © 2011 Appcelerator, Inc.!
  23. 23. NameSpaces “View Language” •  Imagine a create with <View, <NavigationGroup •  Defaults to the “Ti.UI” namespace * Create Elements not in the Ti.UI namespace: // for objects not in Ti.UI namespace, such as Ti.Map.View: <View ns="Ti.Map" id="map"/> // for objects in sub-namespaces, such as Ti.UI.iOS.NavigationGroup: <NavigationGroup platform="ios,mobileweb"/> © 2011 Appcelerator, Inc.!
  24. 24. Style Files •  Component, class, and ID •  Global app.tss •  Constants •  i18n functions •  Alloy Globals © 2011 Appcelerator, Inc.!
  25. 25. Style Files •  Component, class, and ID •  Global app.tss •  Constants •  i18n functions •  Alloy Globals ".activeButton": { backgroundColor:"blue" }, "Button": { width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000" }, "#iosBtn": { color: "#999", systemButton: Titanium.UI.iPhone.SystemButton.DISCLOSURE, title: L('iosbutton'), left: Alloy.Globals.computedWidth } © 2011 Appcelerator, Inc.!
  26. 26. Platform Handling UIF-26 © 2011 Appcelerator, Inc.!
  27. 27. Platform & Form Factor •  Conditional Code •  App assets •  Platform Build-time Folders •  Markup-based Techniques •  TSS-based Qualifiers © 2011 Appcelerator, Inc.!
  28. 28. Conditional Code •  OS_IOS, OS_Android, OS_MOBILEWEB •  ENV_DEV, ENV_TEST, ENV_PRODUCTION if (ENV_DEV && OS_IOS) { alert("You are running iOS in the simulator"); } © 2011 Appcelerator, Inc.!
  29. 29. Asset Folders © 2011 Appcelerator, Inc.!
  30. 30. Platform Overrides Work for Views, styles, and controllers.. Let me explain © 2011 Appcelerator, Inc.!
  31. 31. Platform and Device Markup <Alloy> <Window class="container"> <View formFactor="handheld"> <Label>I'm a handheld!</Label> </View> <View formFactor="tablet"> <Label>I'm a tablet!</Label> </View> <View height="50" width="200" bottom="10" backgroundColor="#cdcdcd"> <Label class="platformLbl" platform="android" formFactor="tablet">android tablet</Label> <Label class="platformLbl" platform="android" formFactor="handheld">android handset</ Label> <Label class="platformLbl" platform="ios" formFactor="tablet">ios tablet</Label> <Label class="platformLbl" platform="ios" formFactor="handheld">ios handset</Label> </View> </Window> </Alloy> © 2011 Appcelerator, Inc.!
  32. 32. TSS-Based Qualifiers "#mybutton[platform=android]" : { height:'40dp', }, "#mybutton[platform=ios]" : { height:50, }, "#osLabel[platform=ios formFactor=tablet]": { text: "iPad" }, "#osLabel[platform=ios formFactor=handheld]": { text: "iPhone" }, © 2011 Appcelerator, Inc.!
  33. 33. Configurations // config.json file { "global": { "foo": 1}, "env:development": {}, "env:test": {}, "env:production": {}, "os:ios": { "foo": 2 }, "os:android": {}, "dependencies": {} } // in your code alert(Alloy.CFG.foo); // value is 1 or 2 depending on OS © 2011 Appcelerator, Inc.!
  34. 34. Themes •  Named collection of styles and assets •  Applied via setting in the config.json file ( can be platform-specific ) •  Theme settings override base styles and assets •  Overrides are made on an attribute by attribute basis, not whole files © 2011 Appcelerator, Inc.!
  35. 35. Themes Example // file system structure app/ assets/ appicon.png background.png styles/ app.tss index.tss themes/ mytheme/ assets/ background.png styles/ app.tss green/ ... // config.json { "global": { "theme":"mytheme" }, "env:development": {}, "env:test": {}, "env:production": {}, "os:ios": { "theme":"green" }, "os:android": { "theme":"blue" }, "dependencies": {} } © 2011 Appcelerator, Inc.!
  36. 36. Alloy vs. “Traditional” •  It’s not all or nothing – Ti.UI.createView() and its brethren still are valid •  API techniques used withing controllers, in helper libraries ( network, database, etc ) •  Alloy is essentially a pre-compiler •  In the end, Alloy creates traditional “classic” code for you – Check out the Resources Folder!!! © 2011 Appcelerator, Inc.!
  37. 37. Cool Utilities UIF-37 © 2011 Appcelerator, Inc.!
  38. 38. TiShadow •  Historically, we had to build an app and wait about 20 or so seconds for it to build.. Iterative dev process •  Community Member David Bankier created TiShadow • https://github.com/dbankier/TiShadow •  Works as a way to cache the app build process and through command line, allow you to speed your workflow. •  Involves installing NPM package, downloading Github Package, starting the server, and running command line to build each project individually. © 2011 Appcelerator, Inc.!
  39. 39. TiShadow Install Steps •  Npm install –g tishadow •  Download git repo, import the project into Studio, build project to install on simulator. https://github.com/dbankier/TiShadow •  Start the tishadow server component. Should be available to http://localhost:3000 •  Command line to project your are working on and run: To Start: Tishadow run ( in root of project ) After updates, run this command: alloy compile --config platform=ios && tishadow run © 2011 Appcelerator, Inc.!
  40. 40. Introducing LiveView •  Feature of our Appcelerator Studio which comes with Appcelerator Platform •  Based on TiShadow theory, allows you to rapidly prototype your application UI. •  Quick Demo of the power .. Included with Appcelerator Platform subscription •  Other Enterprise Features are here: •  http://docs.appcelerator.com/platform/latest/#!/ guide/Enterprise_Features © 2011 Appcelerator, Inc.!
  41. 41. Other Enterprise Features •  App Analytics for all your applications •  Appcelerator Studio which includes LiveView, Code Analysis, and Code Profiler. http://docs.appcelerator.com/platform/latest/#!/ guide/Enterprise_Features •  More information about the Platofrm •  http://www.appcelerator.com/products/ © 2011 Appcelerator, Inc.!
  42. 42. Appcelerator Test •  Integrated Functional Test Automation to improve the workflow of your QA process © 2011 Appcelerator, Inc.!
  43. 43. Appcelerator Performance Management •  Captures data in real-time to provide actionable information about user, device and application problems © 2011 Appcelerator, Inc.!
  44. 44. Thank you JAMIL HASSAN SPAIN @JAMILSPAIN SKYPE: JAMIL.HASSAN.SPAIN JSPAIN@APPCELERATOR.COM © 2011 Appcelerator, Inc.!

×