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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Sencha Touch Workshop
   Finalize the app
   • Objectives
   – Add a stylesheet
   – Build your app for production
   Wednesday, June 5, 13
   

   View Slide

7. Sencha Touch Workshop
   THE END!
   Wednesday, June 5, 13
   

   View Slide

8. Lee Boonstra
   Technical Trainer
   lee.boonstra@sencha.com
   ladysign
   leeboonstra
   http://www.ladysign-apps.com
   Wednesday, June 5, 13
   

   View Slide

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
   

   View Slide