Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Sencha Europe Keizersgracht, Amsterdam Wednesday, February 20, 13

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

• 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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Wednesday, February 20, 13

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Wednesday, February 20, 13

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

Wednesday, February 20, 13

Slide 22

Slide 22 text

Ready to deploy? Wednesday, February 20, 13

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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