Learning Appcelerator® Alloy™

  • 2,793 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,793
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
72
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Learning Appcelerator® Alloy™ Silicon Valley Titanium User Group Meetup December 11, 2012 Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com
  • 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 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. 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. The MVC Pattern Business logic, data Model   manipulation, etcWhat the user Routing, decisionsees View   Controller   making User  
  • 7. Why is MVC important•  Clear separation of roles•  Better code organization•  Easier to maintain and expand
  • 8. Example 1Click
  • 9. The Vocabulary•  Visit the API reference:http://docs.appcelerator.com/titanium/latest/
  • 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. 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. 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. 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. 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. Example 2Click
  • 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. 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. 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. Let’s build some Alloy XML
  • 20. Let’s build this with 57 lines of XML Markup
  • 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. Cutting the assets
  • 23. Cutting the assets Sec/on  1   Sec/on  2   Sec/on  3  
  • 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. 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. 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. 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. The Controller CONTROLLERS/INDEX.JS   $.index.open();  
  • 29. Putting it all together Live Demo
  • 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. 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. Questions?Thank you Ricardo Alcocerralcocer@appcelerator.com @ricardoalcocer