The Mobile Conference (Sencha Touch Workshop) Part III

The Mobile Conference (Sencha Touch Workshop) Part III

Transcript

1. Sencha Touch Workshop Finalize the app • Objectives – Add a stylesheet – Build your app for production Wednesday, June 5, 13
2. Sencha Touch Workshop Using the Out of the Box Themes • /touch2/resources/css – iOS – Android – Blackberry 6 – Blackberry 10 – Microsoft IE 10 – Sencha Touch Wednesday, June 5, 13
3. Sencha Touch Workshop Using Compass and SASS • Sencha recommends that you use SASS and Compass to theme your application • SASS – Syntactically Awesome Style Sheets • A style sheet compiler – Interprets SCSS (Sassy CSS) meta language – Outputs production-ready CSS – Extends CSS3 by adding nested rules, variables, mixins, selector inheritance, and other useful features. • Available under an MIT license from http://sass-lang.com Wednesday, June 5, 13
4. Sencha Touch Workshop Using Sencha Cmd to Optimize your Distribution • Sencha Cmd combines and minifies your source files – Your application should be built using Sencha's microloader framework – All dependent classes should be declared using either Ext.require() or the requires config attribute. Wednesday, June 5, 13
5. Sencha Touch Workshop Creating a Build • Type the following from the root of your project: sencha app build • Creates a production build folder • Moves resources • Generates a production version of index.html • Generates a cache manifest file • Stores changes in archive folder • Caches your app's JavaScript in localstorage Wednesday, June 5, 13
6. Sencha Touch Workshop Finalize the app • Objectives – Add a stylesheet – Build your app for production Wednesday, June 5, 13
7. Sencha Touch Workshop THE END! Wednesday, June 5, 13
8. Lee Boonstra Technical Trainer lee.boonstra@sencha.com ladysign leeboonstra http://www.ladysign-apps.com Wednesday, June 5, 13
9. Dive Deep With Sencha ✓ Join 1000+ developers to learn, network and collaborate on all things HTML5 and Sencha ✓ 60+ sessions covering Fastbook, WebRTC, Ext JS optimization, testing & debugging, ECMAScript 6 and more ✓ Cutting-edge product and technology announcements ✓ 1:1 time with Sencha engineers ✓ An all day hackathon to put your coding skills to the test and win great prizes! www.senchacon.com Wednesday, June 5, 13