Aprendiendo Appcelerator® Alloy™
5 recomendaciones5,510 vistas
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.
![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();](https://image.slidesharecdn.com/appcmeetupdec112012-es-121211231044-phpapp02/85/Aprendiendo-Appcelerator-Alloy-16-320.jpg)
![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;](https://image.slidesharecdn.com/appcmeetupdec112012-es-121211231044-phpapp02/85/Aprendiendo-Appcelerator-Alloy-17-320.jpg)
![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();
}](https://image.slidesharecdn.com/appcmeetupdec112012-es-121211231044-phpapp02/85/Aprendiendo-Appcelerator-Alloy-18-320.jpg)
![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"
}](https://image.slidesharecdn.com/appcmeetupdec112012-es-121211231044-phpapp02/85/Aprendiendo-Appcelerator-Alloy-21-320.jpg)
Aprendiendo Appcelerator® 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
- 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" }
- 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