aprendiendo appcelerator® alloy™

Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc.

@ricardoalcocer

[email protected]

Aprendiendo Appcelerator® Alloy™

Silicon Valley Titanium User Group Meetup 11 de Diciembre de 2012

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

¿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

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

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

El patrón MVC

Modelo

Controlador Vista

Usuario

Routing, toma de decisiones

Lógica de negocios, manipulación de datos, etc

Lo que el usuario vé

¿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

Ejemplo 1

Click

El Vocabulario

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

Ejemplo 1 VIEWS/INDEX.XML

CONTROLLERS/INDEX.JS

STYLES/INDEX.TSS

function showWin2(e) { var w=Alloy.createController('win2').getView(); w.open(); } $.index.open();

<Alloy> <Window class="container"> <Label id="label" onClick="showWin2">I'm Window 1</Label> </Window>

</Alloy>

".container": { backgroundColor:"white"

}, "#label": {

width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000"

}

VISTA

CONTROLADOR

CONTROLLERS/INDEX.JS function showWin2(e) { var w=Alloy.createController('win2').getView(); w.open(); } $.index.open();

VIEWS/WIN2.XML STYLES/WIN2.TSS

"#container":{ backgroundColor: "#000"

}, "#thelabel":{

height: Ti.UI.SIZE, width: Ti.UI.SIZE, color: "#fff"

}

<Alloy> <Window id="container"> <Label id="thelabel"

onClick="closeme">I'm Window 2</Label> </Window>

</Alloy>

CONTROLLERS/WIN2.JS

function closeme(){ $.container.close();

}

Ejemplo 1

CONTROLLERS/INDEX.JS function showWin2(e) { var w=Alloy.createController('win2').getView(); w.open(); } $.index.open();

VIEWS/WIN2.XML STYLES/WIN2.TSS

"#container":{ backgroundColor: "#000"

}, "#thelabel":{

height: Ti.UI.SIZE, width: Ti.UI.SIZE, color: "#fff"

}

<Alloy> <Window id="container"> <Label id="thelabel"

onClick="closeme">I'm Window 2</Label> </Window>

</Alloy>

CONTROLLERS/WIN2.JS

function closeme(){ $.container.close();

}

En este punto, w es un Objeto Titanium Window

Ejemplo 1

Ejemplo 2

Click

Ejemplo 2 <Alloy>

<Window class="container" id="win"> <TableView id="itemsList" onClick="showItems"></TableView> </Window>

</Alloy>

“.container": { backgroundColor:"white"

}

function showItems(e) { var payload={

rowId:e.rowData.rowId, itemName:e.rowData.itemName

} 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();

VIEWS/INDEX.XML


STYLES/INDEX.TSS

Ejemplo 2 ... ...

var payload={ rowId:i, itemName:'Test' + i } var row=Alloy.createController('row',payload).getView(); rowData.push(row);

...

...


VIEWS/ROW.XML <Alloy>

<TableViewRow id="row" rowId="1" itemName="Test1"> <Label id="itemName">Test 1</Label> </TableViewRow>

</Alloy>

var args = arguments[0] || {}; $.row.rowId=args.rowId; $.row.itemName=args.itemName; $.itemName.text=args.itemName;

CONTROLLERS/ROW.JS

STYLES/ROW.TSS

"#row":{ height: "40dp", hasChild: true

}, "#itemName": {

width: Ti.UI.SIZE, height: Ti.UI.SIZE, color: "#000", left: 0

}

Ejemplo 2 CONTROLLERS/INDEX.JS

function showItems(e) { var payload={

rowId:e.rowData.rowId, itemName:e.rowData.itemName

} var w=Alloy.createController('detailwin',payload).getView(); w.open(); }

<Alloy> <Window id="win" class="container"> <Label id="itemName"></Label> <Label id="rowId"></Label> <Button id="closebtn" onClick="closeme">Close Me</Button> </Window>

</Alloy>

".container": { backgroundColor: "yellow", layout:"vertical"

}, "#itemName":{

height: Ti.UI.SIZE, left: 0

}, "#rowId":{

height: Ti.UI.SIZE, left: 0

}, "#closebtn":{

height: Ti.UI.SIZE, width: Ti.UI.SIZE

}

var args = arguments[0] || {}; $.rowId.text=args.rowId; $.itemName.text=args.itemName; function closeme(){

$.win.close(); }

CONTROLLERS/DETAILWIN.JS

STYLES/DETAILWIN.TSS

VIEWS/DETAILWIN.XML

Vamos a construir XML de Alloy

Hagámos esto con 57 líneas de XML

Comienzo <Alloy>

<Window class="container"> <View id="main"> </View> </Window>

</Alloy>

".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"

}

CONTROLLERS/INDEX.XML

CONTROLLERS/INDEX.TSS

Cortando los gráficos

Cortando los gráficos Sección 1

Sección 2

Sección 3

<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"></ImageView> <ImageView id="chatbtn"></ImageView>

</View>

"#iconBar":{ backgroundImage: "iconBarBG.png", width: Ti.UI.FILL, height: "54"

}, "#topActions":{

width:"150", height:"50", layout:"horizontal"

}, ".topActionButton":{

height:"50", width:"50"

}, "#friendsBtn":{

image:"friendsbtn.png" }, "#messagesBtn":{

image:"messagesbtn.png" }, "#notificationsBtn":{

image:"notificationsbtn.png" }, "#menubtn":{

left: 0, width: "55", height: "54", image:"menubtn.png"

}, "#chatbtn":{

width: "55", height: "54", right: 0, image:"chatbtn.png"

}

VIEWS/INDEX.XML

STYLES/INDEX.TSS

<View id="menuBar"> <View class="tbButton"> <ImageView id="statusBtn"></ImageView> </View> <View class="tbButton"> <ImageView id="photoBtn"></ImageView> </View> <View class="tbButton"> <ImageView id="checkinBtn"></ImageView> </View>

</View>

"#menuBar":{ backgroundColor: "#f5f6f9", width: Ti.UI.FILL, height: "50", layout: "horizontal"

}, ".tbButton":{

width: "33%", height: "50"

}, "#statusBtn":{

width: "73", height: "19", image: "statusbtn.png"

}, "#photoBtn":{

width: "73", height: "19", image: "photobtn.png"

}, "#checkinBtn":{

width: "73", height: "19", image: "checkinbtn.png"

}

VIEWS/INDEX.XML STYLES/INDEX.TSS

<TableView id="mainList"> <TableViewRow id="listRow"> <View id="rowContainer">

<ImageView id="profilePic"></ImageView> <Label id="profileName">Ricardo Alcocer</Label> <Label id="timeAgo">10 minutes ago</Label> <Label id="status">This is my status update.</Label> <View id="grayLine" bottom="51"></View> <View id="bottomActions"> <View class="itemActionButton"> <ImageView id="likeBtn"></ImageView> </View> <View class="itemActionButton"> <ImageView id="commentBtn"></ImageView> </View> </View> </View>

</TableViewRow> </TableView>

"#mainList":{ backgroundColor: "#c4cde0", separatorStyle: "NONE"

}, "#listRow":{

height: "200", selectionStyle: "NONE"

}, "#rowContainer":{

borderColor: "#cacdd8", borderRadius: 5, borderWidth: 1, left: "5", right: "5", top: "5", bottom: "5", height: Ti.UI.FILL, width: Ti.UI.FILL, backgroundColor: "#fff"

}, "#profilePic":{

width:"66", height:"66", image:"profilepic.png", top:"5", left:"5"

}, "#profileName":{

top: "5", left: "80", color: "#576b95", font: { fontSize : "16", fontWeight: "bold" }

}

VIEWS/INDEX.XML

STYLES/INDEX.TSS

"#timeAgo":{ top: "25", left: "80", color: "#bbbbbb", font: { fontSize : "16" }

}, "#status":{

width: Ti.UI.SIZE, left: 5, right: 5, font: { fontSize : "16" }

}, "#bottomActions":{

bottom: 0, height: "50", width: Ti.UI.FILL, backgroundColor: "#eff2f5", layout: "horizontal"

}, ".itemActionButton":{

width: "50%", height: "50"

}, "#likeBtn":{

width: "76", height: "20", image: "likebtn.png"

}, "#commentBtn":{

width: "76", height: "20", image: "commentbtn.png"

}

<TableView id="mainList"> <TableViewRow id="listRow"> <View id="rowContainer">

<ImageView id="profilePic"></ImageView> <Label id="profileName">Ricardo Alcocer</Label> <Label id="timeAgo">10 minutes ago</Label> <Label id="status">This is my status update.</Label> <View id="grayLine" bottom="51"></View> <View id="bottomActions"> <View class="itemActionButton"> <ImageView id="likeBtn"></ImageView> </View> <View class="itemActionButton"> <ImageView id="commentBtn"></ImageView> </View> </View> </View>

</TableViewRow> </TableView>

VIEWS/INDEX.XML

STYLES/INDEX.TSS

El Controlador

$.index.open(); CONTROLLERS/INDEX.JS

El proyecto compelto

Demo en vivo

Agregando el “Menú” <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>

VIEWS/INDEX.XML

CONTROLLERS/INDEX.JS function showmenu(e){

$.main.width=Ti.Platform.displayCaps.platformWidth; $.main.animate({ left:300, duration:100 });

} function hidemenu(e){

$.main.width=Ti.Platform.displayCaps.platformWidth; $.main.animate({ left:0, duration:100 });

} $.index.open();

"#menu":{ height: Ti.UI.FILL, width: Ti.UI.FILL, backgroundColor: "#2c323f", left: 0

}

STYLES/INDEX.TSS

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

¿Preguntas?

Gracias

Ricardo Alcocer

[email protected] @ricardoalcocer

aprendiendo appcelerator® alloy™

Technology