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

2. I’m a technical trainer I teach Sencha Touch & Ext

   JS and I write documentation. Wednesday, February 20, 13

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

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

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

6. • MVC Apps & Workspaces • Models • Controllers •

   Views (Ext only) • Forms (Touch only) • Profiles (Touch only) Generate Wednesday, February 20, 13

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

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

   20, 13

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

10. Generate folder structure Lees-­‐MacBook-­‐Pro:extjs4  leeboonstra$ sencha  generate  app  -­‐name  ZombieApp

      -­‐path  ../zombieapp Wednesday, February 20, 13

11. Wednesday, February 20, 13

12. Generate folder structure Lees-­‐MacBook-­‐Pro:touch  leeboonstra$ sencha  generate  app  -­‐name  -­‐path

      ZombieApp  ../zombieapp Wednesday, February 20, 13

13. Wednesday, February 20, 13

14. TIP sencha  generate  app  ZombieApp  ../ zombieapp sencha  g  a

     ZombieApp  ../zombieapp You can use a prefix! Wednesday, February 20, 13

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

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

17. TIP sencha  generate  view  GalleryView  and   view  CarouselView  and

     controller   Gallery  and  controller  Carousel You can chain! Wednesday, February 20, 13

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

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

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

    13

21. Wednesday, February 20, 13

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

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

24. Lee Boonstra Technical Trainer @ Sencha Inc. lee.boonstra@sencha.com ladysign leeboonstra

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