Appcelerator® Alloy™ in 10 minutes

Presentation for the San Francisco Javascript Meetup group - January 7 2013

Transcript

1. Ricardo Alcocer Platform Evangelist @ Appcelerator, Inc. @ricardoalcocer ralcocer@appcelerator.com Appcelerator® Alloy™ in 10 minutes SFJS #33 January 7, 2013
2. What  is  Alloy?   •  Official  MVC  Framework  for  Titanium   •  Free  and  Open  Source   •  DeclaraAve  UI   •  Widgets   •  Themes      
3. How  to  start?   •  Download  Titanium  Studio  from  appcelerator.com   Create  a  new  project   A  new  directory  structure  will  be  created  
4. Titanium  Classic   App.js  
5. Alloy   Index.xml   Index.tss  
6. Example   Click
7. 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  
8. 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  
9. 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  
10. 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  
11. 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  
12.     Quick  live  demo  
13. There’s  much  more!   Official  Alloy  Github  Repository   hRps://github.com/appcelerator/alloy      <-­‐  Look  under  /test/apps     Appcelerator  CLI   hRp://goo.gl/msMwC     Some  more  code  samples   hRp://github.com/ricardoalcocer  
14. QuesAons?     Thank  you     Ricardo  Alcocer   ralcocer@appcelerator.com   @ricardoalcocer