Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc.

@ricardoalcocer

ralcocer@appcelerator.com

Learning Appcelerator® Alloy™ Silicon Valley Titanium User Group Meetup

December 11, 2012

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

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

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

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

!e MVC Pattern

Model  

Controller  View  

User  

Routing, decision making

Business logic, data manipulation, etc

What the user sees

Why is MVC important

•  Clear separation of roles •  Better code organization •  Easier to maintain and expand

Example 1

Click

!e Vocabulary

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

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

}    

VIEW  

CONTROLLER  

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

}    

VIEW  

CONTROLLER  

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

}  

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

}  

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

}  

At this point, w is a Titanium Window Object

Example 1

Example 2

Click

Example 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  

CONTROLLERS/INDEX.JS  

STYLES/INDEX.TSS  

Example 2 ...  ...  

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

...  

...      

CONTROLLERS/INDEX.JS  

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  

}  

Example 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  

Let’s build some Alloy XML

Let’s build this with 57 lines of XML Markup

Start <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  

Cutting the assets

Cutting the assets Sec/on  1  

Sec/on  2  

Sec/on  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  

!e Controller

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

Putting it all together

Live Demo

Adding the “Menu” View <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  

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

Questions?

Thank you

Ricardo Alcocer

ralcocer@appcelerator.com @ricardoalcocer