Sencha SDK Tools and Sencha Command

A brief introduction into the Sencha SDK Tools.

Transcript

1. SENCHA SDK TOOLS & SENCHA COMMAND ARTHUR KAY
2. WHO AM I? Arthur Kay •  Solutions Engineer @ Sencha, Inc. •  Web Developer ~ 15 years www.akawebdesign.com @arthurakay
3. SENCHA CHICAGO USER GROUP Get Involved! •  Speak •  Give stuff away •  Submit ideas @ChicagoSencha Oh, and Sencha is hiring…
4. August 13-15, 2012 Wisconsin Dells Kalahari Resort Mobile / Web / Cloud ~1000 devs $349 Water park! thatconference.com I’m speaking x2 THATCONFERENCE 2012
5. AGENDA Sencha SDK Tools Sencha “Command” Demos Questions
6. SENCHA SDK TOOLS
7. SENCHA SDK TOOLS
8. WHAT DO THE SDK TOOLS DO? Create/Build JSBuilder Create localization templates ExtJS 4.x theme slicer for older IE 6-8 Other manual steps included inside commands above
9. JSBUILDER Automated JS manifest creation (.jsb3) •  ExtJS 4.x •  Sencha Touch 2.x JS Concatination / Minification Uses: •  app.js – Models, Views, Controllers, Stores •  “requires” config
10. JSBUILDER sencha create jsb -a /path/to/index.html -p /path/to/project.jsb3 sencha build -p /path/to/project.jsb3 -d /path/to/output/
11. LOCALIZATION TEMPLATES Automated localization overrides (JS) •  ExtJS 4.x •  Sencha Touch 2.x //<locale> … //</locale>
12. LOCALIZATION sencha create locale -p /path/to/project.jsb3 -t /path/to/target.js
13. EXTJS 4.X THEME SLICER Takes custom ExtJS 4.x theme (CSS) and generates image sprites for legacy browsers. (*cough* IE<=7 *cough*)
14. THEME SLICER sencha slice theme -d /path/to/ext-4.x -c /path/to/css -o /path/to/output -v (for verbose)
15. SENCHA COMMAND
16. SENCHA “COMMAND”
17. WHAT DOES “COMMAND” DO? Create a Sencha Touch (2.x) application Build a ST2 app into various release stages •  Testing, Package, Production, Native Other manual steps included inside commands above •  Concat/Minify/Delta for files •  Cache Manifest •  Packaging tools
18. CREATING A SENCHA TOUCH APP sencha app create -n MyApp -p /path/to/app -l core (or all) Outputs: •  MVC Architecture •  Config files for depolyment/packaging
19. BUILDING AN APP sencha app build -e native -p /path/to/deploy Outputs: •  iOS Application Folder •  Launches simulator (on Mac)
20. QUESTIONS?
21. THANK YOU! @ARTHURAKAY