Upgrade to Pro — share decks privately, control downloads, hide ads and more …

An introduction to Sencha Cmd - Frankfurt Sencha Meetup

Lee Boonstra
February 28, 2013

An introduction to Sencha Cmd - Frankfurt Sencha Meetup

An introduction to Sencha Cmd - Frankfurt Sencha Meetup

Lee Boonstra

February 28, 2013
Tweet

More Decks by Lee Boonstra

Other Decks in Technology

Transcript

  1. Lee Boonstra
    Technical Trainer @ Sencha Inc.
    [email protected]
    ladysign
    leeboonstra
    http://www.ladysign-apps.com
    Wednesday, February 20, 13

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Wednesday, February 20, 13

    View full-size slide

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

    View full-size slide

  13. Wednesday, February 20, 13

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Wednesday, February 20, 13

    View full-size slide

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

    View full-size 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 full-size slide

  24. Lee Boonstra
    Technical Trainer @ Sencha Inc.
    [email protected]
    ladysign
    leeboonstra
    http://www.ladysign-apps.com
    Wednesday, February 20, 13

    View full-size slide