FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps
-
Upload
nathaniel-b -
Category
Technology
-
view
1.987 -
download
0
description
Transcript of FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps
![Page 1: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/1.jpg)
Using the Sencha Touch for Building Cross-Platform HTML5 Mobile
Applications
Presenters:Mukul Seth
Nathaniel Bagnell
![Page 2: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/2.jpg)
Agenda
› Who we are and what we do › The Current HTML5/CSS3 Landscape› Why Sencha Touch?
› Getting Started › Working with Views and Data- Demo› Theming in Sencha Touch - Demo
› Q/A
![Page 3: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/3.jpg)
Introductions
![Page 4: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/4.jpg)
Who we are
Mukul Seth Nathaniel Bagnell
Interactive Developer, Digiflare Inc.
Interactive Developer, Digiflare Inc.
![Page 5: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/5.jpg)
What we do
› Browser - HTML5, Branded Websites› iOS – Mobile and Tablet› Android – Mobile and Tablet› Windows Phone 7, Windows Tablet› BB6, BB7, PlayBook, WebKit, AIR, QNX› Microsoft Xbox Kinect› Google TV› more…
![Page 6: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/6.jpg)
What we do
In other words..
›Everything!
![Page 7: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/7.jpg)
Some of our clients
![Page 8: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/8.jpg)
MSN Video Portal (Win7 Slate)
![Page 9: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/9.jpg)
CBC Elections Map (iPad)
![Page 10: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/10.jpg)
McCain Menu Advantage (PlayBook)
![Page 11: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/11.jpg)
›What do these apps have in common?
Ans. __________
![Page 12: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/12.jpg)
›What do these apps have in common?
Ans. HTML5/CSS3
![Page 13: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/13.jpg)
HTML5/CSS3
![Page 14: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/14.jpg)
HTML5/CSS3
![Page 15: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/15.jpg)
Enter: Sencha Touch
![Page 16: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/16.jpg)
Why Sencha Touch?
Cross-platformFaster, cheaper, easierHighly customizable
![Page 17: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/17.jpg)
Getting Started
› What makes a Sencha Touch Application?› index.html› App.js› sencha touch libs (js files)› sencha touch resources (images/css/etc…)› Your js/css files and other assets(images, fonts,
etc…)
![Page 18: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/18.jpg)
index.html
![Page 19: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/19.jpg)
App.js
![Page 20: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/20.jpg)
Sencha Touch Libs and CSS
![Page 21: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/21.jpg)
Demo Application
http://github.com/Digiflare/foosbrawl
![Page 22: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/22.jpg)
Working with Views
› Basic Sencha Touch Controls› View/Control Creation› View/Control Definitions› View/Control Customization› Layout Types› Method overrides› Sencha Touch Kitchen Sink (Sample App)
› will be one of your best friends
![Page 23: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/23.jpg)
Basic Sencha Touch Controls
› Component – Essentially an HTML Container› Panel – Complex container, supports child items› List – Most commonly used DataView control› Button – pretty self-explanatory› TabPanel – A specialized panel, allows to easily
switch between child items using Tabs› Carousel – A specialized panel, allows to easily
switch between child items using swipe gestures
![Page 24: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/24.jpg)
View/Control Creation
Ext.create Shorthand equivalent
![Page 25: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/25.jpg)
View/Control Definition
![Page 26: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/26.jpg)
View/Control Customization
![Page 27: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/27.jpg)
Layout Types
fit card
![Page 28: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/28.jpg)
Card-based Controls
TabPanel Carousel
![Page 29: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/29.jpg)
Layout Types – cont’d
vbox hbox
![Page 30: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/30.jpg)
Vbox & Hbox Layouts - Flex
flex config config defaults
![Page 31: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/31.jpg)
Method Overrides
![Page 32: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/32.jpg)
Working with Data
› Data Models – define data schema› LocalStorage proxy example
› Data Stores – manage/store data instances› Manipulating Data and Stores› Binding data to DataView Controls (i.e. Lists)
![Page 33: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/33.jpg)
Data Models
![Page 34: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/34.jpg)
Data Stores
![Page 35: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/35.jpg)
Manipulating Data
Model Creation Model Update
![Page 36: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/36.jpg)
Manipulating Stores – Filtering
![Page 37: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/37.jpg)
Binding Data
![Page 38: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/38.jpg)
Sencha Touch Theming
![Page 39: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/39.jpg)
Introduction to Sass and Compass
› Sencha uses CSS, accompanied by Sass and Compass to help theme Sencha apps
› Sass and gives you the ability to dynamically define CSS files, making your code much easier to maintain
› Compass is a CSS framework for SASS that gives you set of predefined “mixins” to help make common CSS (and CSS3) much easier to produce
![Page 40: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/40.jpg)
Introduction to Sass and Compass
› Sass allows you to use things like variables, “mixins” (essentially functions), Nested Rules, Expressions, and Control Structures
› If this sounds familiar, you may be thinking about LESS. LESS is very similar to Sass with just a few differences
![Page 41: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/41.jpg)
Getting Started with Sass and Compass
› If you don’t have Ruby and the RubyGems package manager, download Ruby 1.9.3, which includes RubyGems
› Ruby comes bundled with the mac, but most likely not version 1.9.3.
› Windows users can download an installer package at http://rubyinstaller.org/
![Page 42: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/42.jpg)
Getting Started with Sass and Compass
› Run the following commands:› gem install sass› gem install compass
› If all goes well, you have Sass and Compass!
› Note: You may need to run your console/command prompt as an administrator
![Page 43: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/43.jpg)
Getting Started with Sass and Compass
› To quickly create a new project, set your console to the directory you wish to have your stylesheet assets placed and run the following command:› compass create
› Compass should have created a directory structure with some .SCSS and .SCSS files.
› This directory structure nearly replicates the Sencha Touch directory structure
![Page 44: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/44.jpg)
Getting Started with Sass and Compass
› What you want to do is have Compass “watch” the directory your .SCSS files are in. To do this:› set your console to the directory with .SCSS files› Run the command: compass watch
› Compass and Sass will keep “watch” so long as the console is open
› Once you change a .SCSS file, Compass and Sass will parse it automatically and place the parsed .CSS file in the appropriate directory
![Page 45: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/45.jpg)
Sass Example: Variables
› Sass variables are declared with a dollar sign ($) and assigned a value with the colon (:)
› You can then place the variable wherever you please, it will be parsed and outputted to your .CSS file accordingly
![Page 46: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/46.jpg)
Sass Example: “Mixins”
› A mixin is essentially code that you want to have re-used throughout the stylesheet
› You define your mixin with the @mixin keyword followed by a name of your choice› To call a mixin, simply place it in the body of the selection you wish to apply it to
![Page 47: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/47.jpg)
Sass Example: “Mixins” Continued
› A mixin can take arguments too! You can define your parameters within the parentheses
› You can specify default values to make certain parameters optional
![Page 48: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/48.jpg)
Sass Example: Nested Rules
![Page 49: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/49.jpg)
Sass Example: Nested Rules Continued
› You can also nest same-type properties as you may have noticed a few slides back
![Page 50: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/50.jpg)
Sass Example: Expressions
› Sass can parse expressions that you may need
› Yet another flashback, take a look at the ‘size’ attribute
![Page 51: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/51.jpg)
Sass Example: Control Structures
› You can define four types of control structures within your Sass document.
› They are @if, @for, @each, and @while
![Page 52: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/52.jpg)
Sass Example: Putting it all Together
![Page 53: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/53.jpg)
Sass Example: Putting it all Together
![Page 54: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/54.jpg)
What’s Compass About Then?
› Compass is a extends Sass with a whole bunch of additional modules filled with useful mixins and helper functions
› Generic Helper functions› Utility mixins› CSS3 mixins› Layout mixins› Reset mixins› Typography mixins
![Page 55: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/55.jpg)
Sass + Compass in Sencha Tocuh
› Sass & Compass are no different in Sencha Touch
› The directory structure Sencha uses to store Stylesheet files is nearly identical to what Compass gives you when you create a Compass project
![Page 56: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/56.jpg)
Sass + Compass in Sencha Tocuh
› The one notable addition is the themes directory
› This directory contains the Sencha-specific assets such as mixins, icons, base templates, etc. that are available to all of your themes
![Page 57: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/57.jpg)
How things come together
› sencha-touch.css is a basic theme file that brings in all the mixins and utilizies their respective variable values for things like colours, paddings for buttons, etc.
![Page 58: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/58.jpg)
How things come together
› You don’t need to include all of the mixins if you know you’re not going to use them
› Each mixin will contain base style properties, which you can override by reassigning the appropriate variable in the sencha-touch.css file
![Page 59: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/59.jpg)
Creating Themes
› Sencha comes with a few themes for you to use, they are an Apple theme, BlackBerry Theme, Android Theme, and then their base Sencha theme
› Let’s modify an existing theme to see how easy it is to change the appearance of your application
![Page 60: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/60.jpg)
Creating Themes
› Let’s modify the Apple theme
› In the Apple.scss file, there are several variables that have been defined. These variables are used in their respective mixin, e.x. the variable $tabs-dark: #111; will be used in the tabs mixin
› We can change any variable in any mixin that we please, all we need to do is reassign them with our desired value at the top of our theme’s .scss file› If you want to make a global change that will be
applied to any theme that utilizes the respective mixin, just change the default value in the mixin’s .scss file
![Page 61: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/61.jpg)
Creating Themes
› Creating themes in Sencha is very simple once you understand the workings of Sass and Compass
› There’s many variables that you can change in Sencha, their API Documentation contains a list of all the variables and where they are stored
› In addition to the variables, the documentation also contains all Sencha-specific mixins available to you as well
![Page 62: FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps](https://reader033.fdocuments.in/reader033/viewer/2022052321/5561f082d8b42af10c8b55c6/html5/thumbnails/62.jpg)
Where to go from here?
› Sencha Project Homepage› http://www.sencha.com/
› API Docs/Samples/Help/Tutorials› http://docs.sencha.com/touch/2-0/
› Sass Homepage› http://www.sass-lang.com/
› Compass Homepage› http://www.compass-style.org/
› Digiflare Homepage› http://www.digiflare.com
› Digiflare Twitter› @Digiflare