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 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.
    [email protected]
    ladysign
    leeboonstra
    http://www.ladysign-apps.com
    Wednesday, February 20, 13

    View Slide