Mais conteúdo relacionado Semelhante a Learning Appcelerator® Alloy™ (20) Learning Appcelerator® Alloy™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
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"
}
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();
}
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"
}
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"
}
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();