Successfully reported this slideshow.
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...
What is Alloy•  MVC Framework•  Declarative UI•  Free and Open Source•  Beta Stage and under heavy   development•  Makes w...
Installing is easy1.  Install Titanium Studio2.  Install Node.js and NPM3.  Go to Terminal and type:       $sudo npm insta...
Start using it1.  Create a Titanium Mobile Project2.  Go to Terminal and type       $ alloy new         (future versions o...
The MVC Pattern                                       Business logic, data                           Model	     manipulati...
Why is MVC important•  Clear separation of roles•  Better code organization•  Easier to maintain and expand
Example 1Click
The Vocabulary•  Visit the API reference:http://docs.appcelerator.com/titanium/latest/
Example 1   VIEWS/INDEX.XML	                                                                                              ...
Example 1   VIEWS/INDEX.XML	                                                                                              ...
Example 1CONTROLLERS/INDEX.JS	  function	  showWin2(e)	  {	  	  	  	  	  	  	  var	  w=Alloy.createController(win2).getVie...
Example 1CONTROLLERS/INDEX.JS	  function	  showWin2(e)	  {	  	  	  	  	  	  	  var	  w=Alloy.createController(win2).getVie...
Example 1CONTROLLERS/INDEX.JS	  function	  showWin2(e)	  {	  	  	  	  	  	  	  var	  w=Alloy.createController(win2).getVie...
Example 2Click
Example 2     VIEWS/INDEX.XML	  <Alloy>	       	  <Window	  class="container"	  id="win">	       	       	  <TableView	  i...
Example 2CONTROLLERS/INDEX.JS	  ...	  ...	            	  var	  payload={	            	          	  rowId:i,	            	 ...
Example 2CONTROLLERS/INDEX.JS	                                                                                            ...
Let’s build some Alloy XML
Let’s build this with 57 lines of XML               Markup
Start CONTROLLERS/INDEX.XML	  <Alloy>	       	  <Window	  class="container">	       	       	  <View	  id="main">	       	...
Cutting the assets
Cutting the assets                 Sec/on	  1	                   Sec/on	  2	                       Sec/on	  3	  
STYLES/INDEX.TSS	                                                                                                         ...
VIEWS/INDEX.XML	                                                    STYLES/INDEX.TSS	  <View	  id="menuBar">	             ...
STYLES/INDEX.TSS	                                                                                                       "#...
STYLES/INDEX.TSS	                                                                                                       "#...
The Controller  CONTROLLERS/INDEX.JS	   $.index.open();	  
Putting it all together      Live Demo
Adding the “Menu” View      VIEWS/INDEX.XML	  <Window	  class="container">	        	      	  <View	  id="menu"	  onClick="...
ResourcesThis deckhttp://slideshare.net/ricardoalcocerhttp://speakerdeck.com/ricardoalcocerCode Samples Github Repositoryh...
Questions?Thank you      Ricardo Alcocerralcocer@appcelerator.com      @ricardoalcocer
Upcoming SlideShare
Loading in …5
×

Learning Appcelerator® Alloy™

12,206 views

Published on

Slides for my presentation at the Silicon Valley Titanium User Group - December 11 2012

Published in: Technology

Learning Appcelerator® Alloy™

  1. 1. Learning Appcelerator® Alloy™ Silicon Valley Titanium User Group Meetup December 11, 2012 Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com
  2. 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. 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. 4. Installing is easy1.  Install Titanium Studio2.  Install Node.js and NPM3.  Go to Terminal and type: $sudo npm install alloy –gMore details at http://bit.ly/alloyqs
  5. 5. Start using it1.  Create a Titanium Mobile Project2.  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. 6. The MVC Pattern Business logic, data Model   manipulation, etcWhat the user Routing, decisionsees View   Controller   making User  
  7. 7. Why is MVC important•  Clear separation of roles•  Better code organization•  Easier to maintain and expand
  8. 8. Example 1Click
  9. 9. The Vocabulary•  Visit the API reference:http://docs.appcelerator.com/titanium/latest/
  10. 10. Example 1 VIEWS/INDEX.XML   VIEW  <Alloy>    <Window  class="container">        <Label  id="label"  onClick="showWin2">Im  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. 11. Example 1 VIEWS/INDEX.XML   VIEW  <Alloy>    <Window  class="container">        <Label  id="label"  onClick="showWin2">Im  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. 12. Example 1CONTROLLERS/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">Im  Window  2</Label>   "#thelabel":{    </Window>    height:  Ti.UI.SIZE,  </Alloy>    width:  Ti.UI.SIZE,    color:  "#fff"   }  
  13. 13. Example 1CONTROLLERS/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">Im  Window  2</Label>   "#thelabel":{    </Window>    height:  Ti.UI.SIZE,  </Alloy>    width:  Ti.UI.SIZE,    color:  "#fff"   }  
  14. 14. Example 1CONTROLLERS/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">Im  Window  2</Label>   "#thelabel":{    </Window>    height:  Ti.UI.SIZE,  </Alloy>    width:  Ti.UI.SIZE,    color:  "#fff"   }  
  15. 15. Example 2Click
  16. 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. 17. Example 2CONTROLLERS/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. 18. Example 2CONTROLLERS/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. 19. Let’s build some Alloy XML
  20. 20. Let’s build this with 57 lines of XML Markup
  21. 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"  }  
  22. 22. Cutting the assets
  23. 23. Cutting the assets Sec/on  1   Sec/on  2   Sec/on  3  
  24. 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. 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. 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. 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. 28. The Controller CONTROLLERS/INDEX.JS   $.index.open();  
  29. 29. Putting it all together Live Demo
  30. 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();  
  31. 31. ResourcesThis deckhttp://slideshare.net/ricardoalcocerhttp://speakerdeck.com/ricardoalcocerCode Samples Github Repositoryhttp://bit.ly/SVTUG1212-codeOfficial Alloy Github Repositoryhttps://github.com/appcelerator/alloy <- Look under /test/appsAlloy App Framework Overview from CodeStrong 2012http://www.slideshare.net/TonyLukasavage/alloy-codestrong-2012-15179451
  32. 32. Questions?Thank you Ricardo Alcocerralcocer@appcelerator.com @ricardoalcocer

×