Slides for my presentation at the Silicon Valley Titanium User Group - December 11 2012

1. Learning Appcelerator® Alloy™
Silicon Valley Titanium User Group Meetup
December 11, 2012
Ricardo Alcocer
Platform Evangelist @ Appcelerator, Inc.
@ricardoalcocer
ralcocer@appcelerator.com

2. Presentation format
• Highly technical - We’ll be writing and
analyzing code!
• Less lecture/more step-by-step, hands-on
guide
• Slides and code will be made available for
future reference
• We will be testing on iOS, everything run on
Android with some minor adjustments to the
TSS

3. What is Alloy
• MVC Framework
• Declarative UI
• Free and Open Source
• Beta Stage and under heavy
development
• Makes writing Titanium Apps Super Easy
(it actually feels like building a website)
• Widgets and themes

4. Installing is easy
1. Install Titanium Studio
2. Install Node.js and NPM
3. Go to Terminal and type:
$sudo npm install alloy –g
More details at http://bit.ly/alloyqs

5. Start using it
1. Create a Titanium Mobile Project
2. Go to Terminal and type
$ alloy new
(future versions of Studio will allow you to create Alloy projects)
3. A new directory structure will be created

6. The MVC Pattern
Business logic, data
Model
manipulation, etc
What the user Routing, decision
sees
View
Controller
making
User

7. Why is MVC important
• Clear separation of roles
• Better code organization
• Easier to maintain and expand

8. Example 1
Click

9. The Vocabulary
• Visit the API reference:
http://docs.appcelerator.com/titanium/latest/

10. Example 1
VIEWS/INDEX.XML
VIEW
<Alloy>
<Window
class="container">
<Label
id="label"
onClick="showWin2">I'm
Window
1</Label>
</Window>
</Alloy>
STYLES/INDEX.TSS
".container":
{
backgroundColor:"white"
},
"#label":
{
width:
Ti.UI.SIZE,
height:
Ti.UI.SIZE,
color:
"#000"
}
CONTROLLERS/INDEX.JS
CONTROLLER
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();

11. Example 1
VIEWS/INDEX.XML
VIEW
<Alloy>
<Window
class="container">
<Label
id="label"
onClick="showWin2">I'm
Window
1</Label>
</Window>
</Alloy>
STYLES/INDEX.TSS
".container":
{
backgroundColor:"white"
},
"#label":
{
width:
Ti.UI.SIZE,
height:
Ti.UI.SIZE,
color:
"#000"
}
CONTROLLERS/INDEX.JS
CONTROLLER
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();

12. Example 1
CONTROLLERS/INDEX.JS
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();
VIEWS/WIN2.XML
STYLES/WIN2.TSS
CONTROLLERS/WIN2.JS
<Alloy>
"#container":{
function
closeme(){
<Window
id="container">
backgroundColor:
"#000"
$.container.close();
<Label
id="thelabel"
},
}
onClick="closeme">I'm
Window
2</Label>
"#thelabel":{
</Window>
height:
Ti.UI.SIZE,
</Alloy>
width:
Ti.UI.SIZE,
color:
"#fff"
}

13. Example 1
CONTROLLERS/INDEX.JS
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();
VIEWS/WIN2.XML
STYLES/WIN2.TSS
CONTROLLERS/WIN2.JS
<Alloy>
"#container":{
function
closeme(){
<Window
id="container">
backgroundColor:
"#000"
$.container.close();
<Label
id="thelabel"
},
}
onClick="closeme">I'm
Window
2</Label>
"#thelabel":{
</Window>
height:
Ti.UI.SIZE,
</Alloy>
width:
Ti.UI.SIZE,
color:
"#fff"
}

14. Example 1
CONTROLLERS/INDEX.JS
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();
At this point, w is a Titanium Window Object
VIEWS/WIN2.XML
STYLES/WIN2.TSS
CONTROLLERS/WIN2.JS
<Alloy>
"#container":{
function
closeme(){
<Window
id="container">
backgroundColor:
"#000"
$.container.close();
<Label
id="thelabel"
},
}
onClick="closeme">I'm
Window
2</Label>
"#thelabel":{
</Window>
height:
Ti.UI.SIZE,
</Alloy>
width:
Ti.UI.SIZE,
color:
"#fff"
}

15. Example 2
Click

16. Example 2
VIEWS/INDEX.XML
<Alloy>
<Window
class="container"
id="win">
<TableView
id="itemsList"
onClick="showItems"></TableView>
</Window>
</Alloy>
CONTROLLERS/INDEX.JS
function
showItems(e)
{
var
payload={
rowId:e.rowData.rowId,
STYLES/INDEX.TSS
itemName:e.rowData.itemName
“.container":
{
}
backgroundColor:"white"
var
w=Alloy.createController('detailwin',payload).getView();
}
w.open();
}
var
rowData=[];
for(var
i=1;i<=10;i++){
var
payload={
rowId:i,
itemName:'Test'
+
i
}
var
row=Alloy.createController('row',payload).getView();
rowData.push(row);
}
$.itemsList.data=rowData;
$.win.open();

17. Example 2
CONTROLLERS/INDEX.JS
...
...
var
payload={
rowId:i,
itemName:'Test'
+
i
}
var
row=Alloy.createController('row',payload).getView();
rowData.push(row);
...
...
VIEWS/ROW.XML
STYLES/ROW.TSS
<Alloy>
"#row":{
<TableViewRow
id="row"
rowId="1"
itemName="Test1">
height:
"40dp",
<Label
id="itemName">Test
1</Label>
hasChild:
true
</TableViewRow>
},
</Alloy>
"#itemName":
{
width:
Ti.UI.SIZE,
height:
Ti.UI.SIZE,
color:
"#000",
CONTROLLERS/ROW.JS
left:
0
}
var
args
=
arguments[0]
||
{};
$.row.rowId=args.rowId;
$.row.itemName=args.itemName;
$.itemName.text=args.itemName;

18. Example 2
CONTROLLERS/INDEX.JS
STYLES/DETAILWIN.TSS
function
showItems(e)
{
var
payload={
".container":
{
rowId:e.rowData.rowId,
backgroundColor:
"yellow",
itemName:e.rowData.itemName
layout:"vertical"
}
},
var
w=Alloy.createController('detailwin',payload).getView();
"#itemName":{
w.open();
height:
Ti.UI.SIZE,
}
left:
0
},
"#rowId":{
VIEWS/DETAILWIN.XML
height:
Ti.UI.SIZE,
left:
0
<Alloy>
},
<Window
id="win"
class="container">
"#closebtn":{
<Label
id="itemName"></Label>
height:
Ti.UI.SIZE,
<Label
id="rowId"></Label>
width:
Ti.UI.SIZE
<Button
id="closebtn"
onClick="closeme">Close
Me</Button>
}
</Window>
</Alloy>
CONTROLLERS/DETAILWIN.JS
var
args
=
arguments[0]
||
{};
$.rowId.text=args.rowId;
$.itemName.text=args.itemName;
function
closeme(){
$.win.close();
}

19. Let’s build some Alloy XML

20. Let’s build this with 57 lines of XML
Markup

21. Start
CONTROLLERS/INDEX.XML
<Alloy>
<Window
class="container">
<View
id="main">
</View>
</Window>
</Alloy>
CONTROLLERS/INDEX.TSS
".container":
{
backgroundColor:"white",
orientationModes:
[Ti.UI.PORTRAIT,Ti.UI.LANDSCAPE_LEFT,Ti.UI.LANDSCAPE_RIGHT,Ti.UI.UPSIDE_PORTRAIT]
},
"#main":{
height:
Ti.UI.FILL,
width:
Ti.UI.FILL,
backgroundColor:
"#c4cde0",
left:
0,
layout:
"vertical"
}

22. Cutting the assets

23. Cutting the assets
Sec/on
1
Sec/on
2
Sec/on
3

24. STYLES/INDEX.TSS
"#iconBar":{
backgroundImage:
"iconBarBG.png",
width:
Ti.UI.FILL,
height:
"54"
},
"#topActions":{
width:"150",
height:"50",
layout:"horizontal"
},
".topActionButton":{
VIEWS/INDEX.XML
height:"50",
width:"50"
<View
id="iconBar">
},
<View
id="topActions">
<ImageView
class="topActionButton"
id="friendsBtn"></ImageView>
"#friendsBtn":{
<ImageView
class="topActionButton"
id="messagesBtn"></ImageView>
image:"friendsbtn.png"
<ImageView
class="topActionButton"
id="notificationsBtn"></ImageView>
},
</View>
"#messagesBtn":{
<ImageView
id="menubtn"></ImageView>
image:"messagesbtn.png"
<ImageView
id="chatbtn"></ImageView>
},
</View>
"#notificationsBtn":{
image:"notificationsbtn.png"
},
"#menubtn":{
left:
0,
width:
"55",
height:
"54",
image:"menubtn.png"
},
"#chatbtn":{
width:
"55",
height:
"54",
right:
0,
image:"chatbtn.png"
}

25. VIEWS/INDEX.XML
STYLES/INDEX.TSS
<View
id="menuBar">
"#menuBar":{
<View
class="tbButton">
backgroundColor:
"#f5f6f9",
<ImageView
id="statusBtn"></ImageView>
width:
Ti.UI.FILL,
</View>
height:
"50",
<View
class="tbButton">
layout:
"horizontal"
<ImageView
id="photoBtn"></ImageView>
},
</View>
".tbButton":{
<View
class="tbButton">
width:
"33%",
<ImageView
id="checkinBtn"></ImageView>
height:
"50"
</View>
},
</View>
"#statusBtn":{
width:
"73",
height:
"19",
image:
"statusbtn.png"
},
"#photoBtn":{
width:
"73",
height:
"19",
image:
"photobtn.png"
},
"#checkinBtn":{
width:
"73",
height:
"19",
image:
"checkinbtn.png"
}

26. STYLES/INDEX.TSS
"#mainList":{
backgroundColor:
"#c4cde0",
separatorStyle:
"NONE"
},
"#listRow":{
height:
"200",
selectionStyle:
"NONE"
},
"#rowContainer":{
borderColor:
"#cacdd8",
borderRadius:
5,
borderWidth:
1,
VIEWS/INDEX.XML
left:
"5",
<TableView
id="mainList">
right:
"5",
<TableViewRow
id="listRow">
top:
"5",
<View
id="rowContainer">
bottom:
"5",
<ImageView
id="profilePic"></ImageView>
height:
Ti.UI.FILL,
<Label
id="profileName">Ricardo
Alcocer</Label>
width:
Ti.UI.FILL,
<Label
id="timeAgo">10
minutes
ago</Label>
backgroundColor:
"#fff"
<Label
id="status">This
is
my
status
update.</Label>
},
<View
id="grayLine"
bottom="51"></View>
"#profilePic":{
<View
id="bottomActions">
width:"66",
<View
class="itemActionButton">
height:"66",
<ImageView
id="likeBtn"></ImageView>
image:"profilepic.png",
</View>
top:"5",
<View
class="itemActionButton">
left:"5"
<ImageView
id="commentBtn"></ImageView>
},
</View>
"#profileName":{
</View>
top:
"5",
</View>
left:
"80",
</TableViewRow>
color:
"#576b95",
</TableView>
font:
{
fontSize
:
"16",
fontWeight:
"bold"
}
}

27. STYLES/INDEX.TSS
"#timeAgo":{
top:
"25",
left:
"80",
color:
"#bbbbbb",
font:
{
fontSize
:
"16"
}
},
"#status":{
width:
Ti.UI.SIZE,
left:
5,
right:
5,
VIEWS/INDEX.XML
font:
{
<TableView
id="mainList">
fontSize
:
"16"
<TableViewRow
id="listRow">
}
<View
id="rowContainer">
},
<ImageView
id="profilePic"></ImageView>
"#bottomActions":{
<Label
id="profileName">Ricardo
Alcocer</Label>
bottom:
0,
<Label
id="timeAgo">10
minutes
ago</Label>
height:
"50",
<Label
id="status">This
is
my
status
update.</Label>
width:
Ti.UI.FILL,
<View
id="grayLine"
bottom="51"></View>
backgroundColor:
"#eff2f5",
<View
id="bottomActions">
layout:
"horizontal"
<View
class="itemActionButton">
},
<ImageView
id="likeBtn"></ImageView>
".itemActionButton":{
</View>
width:
"50%",
<View
class="itemActionButton">
height:
"50"
<ImageView
id="commentBtn"></ImageView>
},
</View>
"#likeBtn":{
</View>
width:
"76",
</View>
height:
"20",
</TableViewRow>
image:
"likebtn.png"
</TableView>
},
"#commentBtn":{
width:
"76",
height:
"20",
image:
"commentbtn.png"
}

28. The Controller
CONTROLLERS/INDEX.JS
$.index.open();

29. Putting it all together
Live Demo

30. Adding the “Menu” View
VIEWS/INDEX.XML
<Window
class="container">
<View
id="menu"
onClick="hidemenu"></View>
<View
id="main">
<View
id="iconBar">
<View
id="topActions">
<ImageView
class="topActionButton"
id="friendsBtn"></ImageView>
<ImageView
class="topActionButton"
id="messagesBtn"></ImageView>
<ImageView
class="topActionButton"
id="notificationsBtn"></ImageView>
</View>
<ImageView
id="menubtn"
onClick="showmenu"></ImageView>
<ImageView
id="chatbtn"></ImageView>
</View>
CONTROLLERS/INDEX.JS
STYLES/INDEX.TSS
function
showmenu(e){
"#menu":{
$.main.width=Ti.Platform.displayCaps.platformWidth;
height:
Ti.UI.FILL,
$.main.animate({
width:
Ti.UI.FILL,
left:300,
backgroundColor:
"#2c323f",
duration:100
left:
0
});
}
}
function
hidemenu(e){
$.main.width=Ti.Platform.displayCaps.platformWidth;
$.main.animate({
left:0,
duration:100
});
}
$.index.open();

31. Resources
This deck
http://slideshare.net/ricardoalcocer
http://speakerdeck.com/ricardoalcocer
Code Samples Github Repository
http://bit.ly/SVTUG1212-code
Official Alloy Github Repository
https://github.com/appcelerator/alloy <- Look under /test/apps
Alloy App Framework Overview from CodeStrong 2012
http://www.slideshare.net/TonyLukasavage/alloy-codestrong-2012-15179451

32. Questions?
Thank you
Ricardo Alcocer
ralcocer@appcelerator.com
@ricardoalcocer