An introduction to Sencha Cmd - Frankfurt Sencha Meetup

An introduction to Sencha Cmd - Frankfurt Sencha Meetup

Transcript

1. Lee Boonstra
   Technical Trainer @ Sencha Inc.
   lee.boonstra@sencha.com
   ladysign
   leeboonstra
   http://www.ladysign-apps.com
   Wednesday, February 20, 13
   

   View Slide

2. I’m a technical trainer
   I teach Sencha Touch & Ext JS
   and I write documentation.
   Wednesday, February 20, 13
   

   View Slide

3. Sencha Europe
   Keizersgracht, Amsterdam
   Wednesday, February 20, 13
   

   View Slide

4. An Introduction to
   Sencha Cmd
   A tool to design, developer and deploy desktop & touch applications based on
   design standards with good performance.
   Wednesday, February 20, 13
   

   View Slide

5. • Scaffold MVC app
   • Create & slice themes
   • Minify JS files
   • Create builds
   • Upgrade framework
   • Native Packaging Touch apps
   Sencha Cmd
   What can you do with it?
   Wednesday, February 20, 13
   

   View Slide

6. • MVC Apps & Workspaces
   • Models
   • Controllers
   • Views (Ext only)
   • Forms (Touch only)
   • Profiles (Touch only)
   Generate
   Wednesday, February 20, 13
   

   View Slide

7. Where to start?
   • Download Sencha Cmd from:
   http://www.sencha.com/products/sencha-cmd/
   download
   JRE and Compass should be installed
   Wednesday, February 20, 13
   

   View Slide

8. Install Sencha Cmd
   add sencha to your classpath
   Wednesday, February 20, 13
   

   View Slide

9. Let’s generate some code...
   Wednesday, February 20, 13
   

   View Slide

10. Generate folder structure
    Lees-­‐MacBook-­‐Pro:extjs4  leeboonstra$
    sencha  generate  app  -­‐name  ZombieApp  
    -­‐path  ../zombieapp
    Wednesday, February 20, 13
    

    View Slide

11. Wednesday, February 20, 13
    

    View Slide

12. Generate folder structure
    Lees-­‐MacBook-­‐Pro:touch  leeboonstra$
    sencha  generate  app  -­‐name  -­‐path  
    ZombieApp  ../zombieapp
    Wednesday, February 20, 13
    

    View Slide

13. Wednesday, February 20, 13
    

    View Slide

14. TIP
    sencha  generate  app  ZombieApp  ../
    zombieapp
    sencha  g  a  ZombieApp  ../zombieapp
    You can use a prefix!
    Wednesday, February 20, 13
    

    View Slide

15. Generate view
    Lees-­‐MacBook-­‐Pro:zombieapp  leeboonstra$
    sencha  generate  view  SettingsView
    Ext.define("ZombieApp.view.SettingsView",  
    {
           extend:  'Ext.Component',
           html:  'Hello,  World!!'
    });
    app/view/SettingsView.js
    Wednesday, February 20, 13
    

    View Slide

16. Generate controller
    Lees-­‐MacBook-­‐Pro:zombieapp  leeboonstra$
    sencha  generate  controller  Settings
    Ext.define("ZombieApp.controller.Settings"
    ,  {
           extend:  'Ext.app.Controller',
    });
    app/controller/Settings.js
    Wednesday, February 20, 13
    

    View Slide

17. TIP
    sencha  generate  view  GalleryView  and  
    view  CarouselView  and  controller  
    Gallery  and  controller  Carousel
    You can chain!
    Wednesday, February 20, 13
    

    View Slide

18. Generate model
    sencha  generate  model  -­‐-­‐name  Zombie  -­‐-­‐fields  
    id:int,name,isInfected:boolean,dateOfDeath
    Ext.define('ZombieApp.model.Zombie',  {
           extend:  'Ext.data.Model',
           
           fields:  [
                   {  name:  'id',  type:  'int'  },
                   {  name:  'name',  type:  'auto'  },
                   {  name:  'isInfected',  type:  'boolean'  },
                   {  name:  'dateOfDeath',  type:  'auto'  }
           ]
    });
    app/model/Zombie.js
    Wednesday, February 20, 13
    

    View Slide

19. Let’s create a theme...
    Wednesday, February 20, 13
    

    View Slide

20. Generate a theme
    sencha  generate  theme  Zombie
    Wednesday, February 20, 13
    

    View Slide

21. Wednesday, February 20, 13
    

    View Slide

22. Ready to deploy?
    Wednesday, February 20, 13
    

    View Slide

23. Create a build package
    sencha  app  build  production
    sencha  app  build  testing
    * all framework classes + own classes concatenated.
    * sass file generated to css
    * all images sliced
    (production)
    * appcache
    * all script minified
    /build/ZombieApp/production/
    /build/ZombieApp/testing/
    Wednesday, February 20, 13
    

    View Slide

24. Lee Boonstra
    Technical Trainer @ Sencha Inc.
    lee.boonstra@sencha.com
    ladysign
    leeboonstra
    http://www.ladysign-apps.com
    Wednesday, February 20, 13
    

    View Slide