Este documento presenta una introducción al framework Alloy de Appcelerator para desarrollo de aplicaciones móviles en Titanium. Explica brevemente qué es Alloy, cómo instalarlo y comenzar a usarlo. Luego muestra dos ejemplos básicos de cómo crear interfaces con Alloy usando un patrón MVC, incluyendo vistas, estilos y controladores. El objetivo es analizar código paso a paso para familiarizarse con los conceptos y estructura básicos de Alloy.

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

2. Formato de la presentación
• Altamente técnica. Estaremos analizando
código
• Menos discurso/más guía paso a paso
• La presentación y el código se harán
disponibles para futura referencia
• Estaremos probando en iOS, pero todo corre
en Android con algunos cambios menores al
TSS

3. ¿Qué es Alloy?
• MVC Framework
• Declarative UI
• Libre y Open Source
• Beta y en desarrollo activo
• Hace que la programación en Titanium
sea súper fácil (se siente como hacer un
Website)
• Widgets y themes

4. Instalarlo es fácil
1. Instala Titanium Studio
2. Instala Node.js and NPM
3. Vé a Terminal y escribe:
$sudo npm install alloy –g
Más detalles en http://bit.ly/alloyqs

5. Comienza a usarlo
1. Crea un Titanium Mobile Project
2. Vé al Terminal y escribe
$ alloy new
(versiones futuras de Studio permitiran la creación de proyectos de Alloy)
3. Se creará una nueva estructura de directorios

6. El patrón MVC
Lógica de negocios,
Modelo
manipulación de datos, etc
Lo que el Routing, toma de
usuario vé
Vista
Controlador
decisiones
Usuario

7. ¿Por qué es importante MVC?
• Provee una clara separación de roles
• Mejor organización del código
• Más fácil de mantener y expandir

8. Ejemplo 1
Click

9. El Vocabulario
• Visita el API reference:
http://docs.appcelerator.com/titanium/latest/

10. Ejemplo 1
VIEWS/INDEX.XML
VISTA
<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
CONTROLADOR
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();

11. Ejemplo 1
VIEWS/INDEX.XML
VISTA
<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
CONTROLADOR
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();

12. Ejemplo 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. Ejemplo 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. Ejemplo 1
CONTROLLERS/INDEX.JS
function
showWin2(e)
{
var
w=Alloy.createController('win2').getView();
w.open();
}
$.index.open();
En este punto, w es un Objeto Titanium Window
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. Ejemplo 2
Click

16. Ejemplo 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. Ejemplo 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. Ejemplo 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. Vamos a construir XML de Alloy

20. Hagámos esto con 57 líneas de XML

21. Comienzo
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. Cortando los gráficos

23. Cortando los gráficos
Sección
1
Sección
2
Sección
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. El Controlador
CONTROLLERS/INDEX.JS
$.index.open();

29. El proyecto compelto
Demo en vivo

30. Agregando el “Menú”
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. Recursos
Esta presentación
http://slideshare.net/ricardoalcocer
http://speakerdeck.com/ricardoalcocer
Repositorio de Github con los ejemplos
http://bit.ly/SVTUG1212-code
Repositorio oficial de Alloy en Github
https://github.com/appcelerator/alloy <- Busca bajo /test/apps
Presentación de Alloy en el CodeStrong 2012
http://www.slideshare.net/TonyLukasavage/alloy-codestrong-2012-15179451

32. ¿Preguntas?
Gracias
Ricardo Alcocer
ralcocer@appcelerator.com
@ricardoalcocer