Learning Appcelerator® Alloy™

49345ea4af9a9432c1f4bf2cde34c736?s=47 Alco
December 11, 2012

Learning Appcelerator® Alloy™

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

49345ea4af9a9432c1f4bf2cde34c736?s=128

Alco

December 11, 2012
Tweet

Transcript

  1. Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com Learning

    Appcelerator® Alloy™ Silicon Valley Titanium User Group Meetup December 11, 2012
  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. 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. 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
  5. 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
  6. e MVC Pattern Model   Controller   View   User

      Routing, decision making Business logic, data manipulation, etc What the user sees
  7. Why is MVC important •  Clear separation of roles • 

    Better code organization •  Easier to maintain and expand
  8. Example 1 Click

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

  10. 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  
  11. 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  
  12. 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
  13. 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
  14. 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
  15. Example 2 Click

  16. 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  
  17. 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   }  
  18. 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  
  19. Let’s build some Alloy XML

  20. Let’s build this with 57 lines of XML Markup

  21. 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  
  22. Cutting the assets

  23. Cutting the assets Sec/on  1   Sec/on  2   Sec/on

     3  
  24. <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  
  25. <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  
  26. <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  
  27. "#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  
  28. e Controller $.index.open();   CONTROLLERS/INDEX.JS  

  29. Putting it all together Live Demo

  30. 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  
  31. 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
  32. Questions? Thank you Ricardo Alcocer ralcocer@appcelerator.com @ricardoalcocer