Learning Appcelerator® Alloy™

3,699 views

Published on

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

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,699
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
89
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

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

×