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

An introduction to Sencha Cmd - Frankfurt Sench...

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
  2. I’m a technical trainer I teach Sencha Touch & Ext

    JS and I write documentation. Wednesday, February 20, 13
  3. 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
  4. • 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
  5. • MVC Apps & Workspaces • Models • Controllers •

    Views (Ext only) • Forms (Touch only) • Profiles (Touch only) Generate Wednesday, February 20, 13
  6. 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
  7. TIP sencha  generate  app  ZombieApp  ../ zombieapp sencha  g  a

     ZombieApp  ../zombieapp You can use a prefix! Wednesday, February 20, 13
  8. 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
  9. 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
  10. TIP sencha  generate  view  GalleryView  and   view  CarouselView  and

     controller   Gallery  and  controller  Carousel You can chain! Wednesday, February 20, 13
  11. 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
  12. 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
  13. Lee Boonstra Technical Trainer @ Sencha Inc. [email protected] ladysign leeboonstra

    http://www.ladysign-apps.com Wednesday, February 20, 13