FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps

2,139 views

Published on

FITC Screens 2011 Presentation on Using Sencha Touch to build Cross-platform HTML5 Apps. Examines Sencha Touch, Sass, and Compass.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,139
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • -When people talk about an HTML5 application, it really involves 3 things-HTML5-But it also involves utilizing CSS3 to create some snazzy looking interfaces and using Javascript APIs and libraries to power the interactivity and functionality of the app-In fact a lot of the new HTML5 elements have JavaScript APIs that you need to use in order to harness the power of that element-When you look at what sorts of functionality the HTML5 spec covers, you’ll understand why you need to leverage JavaScript.-The specification is so big that it’s grouped into 8 technology areas
  • -Performance for things like JavaScript-Semantics for the new attributes and tags to describe your document-Styling which includes things like CSS and typography-Multimedia for elements such as our new Video and Audio-3D effects which are possible through Canvas and SVG elements-Offline and Storage for creating apps that don’t need to be connectived-Connectivity encompasses things like web sockets and server sent requests-Device access which refers to things like geo location, accessing the web cam and microphone-One thing to keep in mind is that this chart represents the intended future state of HTML5-Not all of these features are available now
  • Show Kitchen Sink
  • Show Kitchen Sink – with Source Code example
  • Show Kitchen Sink – with Source Code example
  • With Sass and Compass, so much is possible to make your lives easier when coding complex CSS. Some examples include variables, mixins (which are essentially functions), nested rules, expression evaluation, namespaces, and control structures, all of which have a scope.These are some of the high level branches of what Sass offers and within those branches are often a respectable amount of capabilities, so much that we cannot cover all of them today.That said, Sass may sound familiar, you may think it sounds like LESS. With Sass Vs. LESS, there's only Minor Syntax Differences and Dynamic Implementation Method. Sass is done Server Side through Ruby, where as LESS is done Client Side through JavaScript. That said though, both can be parsed locally during development. Both can be parsed locally during development.Since we’re dealing with Sencha, and Sencha uses Sass, we’ll only talk about Sass.
  • Watching can also be done via Sass, but the Compass command is simpler and just as effective.
  • You define variables in Sass with the dollar and then assign a value with the colon.Supported Data Types include numbers, strings of text (with and without quotes), color values (hex, name, and RGBA), booleans, and a lists of values.
  • Mixins allow you to define blocks of code that can be re-used. For example, if you were to http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
  • http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins
  • You can nest rules inside other rules to automatically inherit the parent’s selector. This helps eliminate the repetition of parent selectors to target something within the parent. http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules
  • You can nest rules inside other rules to automatically inherit the parent’s selctor. This helps eliminate the repetition of parent selectors to target something within the parent.http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#nested_rules
  • Sass has support for four basic control structures, those being if, for, each and while. If is a conditional control structure, where as the others are loops.http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#control_directives
  • In this example, we utilized everything we looked at individually. This is a mixin called LinkBuilder that will build a set of a tags along with their respective seduo-states.
  • After we’ve built our mixin, we can “include” it in our CSS document like shown above. The first include will just generate a:* tags, however the second @include is nested in the nav { } block, thus every generated item from our mixin will have the ‘nav’ leading in their selector.
  • Now that we looked at Sass, you may be asking – Okay, but where’s Compass? Well, Compass is a CSS Authoring Framework that extends Sass and provides a variety of useful modules that contain a wide selection of useful functions (mixins) and Layout helpers include sticky footers, grid backgrounds and stretching boxes. I’ve used a couple already in some previous examples, i.e. in our most recent one I was using the ‘scale-lightness’ helper function.Since there are so many, we can’t look at them all in depth today, however we can look at a few I’ve utilized in the demo page (reset and the border-radius).Also, as a note, there’s other Libraries/Frameworks available for you to utilize that are made to extend Sass, for example there’s one called Zocial (with a Zed) that is utilized to just make CSS3 Social Buttons and Icons. Since you can run these locally during your development if you choose, there’s really no overhead and thus no reason why you shouldn’t give it a shot.http://compass-style.org/reference/compass/DECIDE IF YOU WANT TO MAKE A SLIDE FOR EACH OF THEM.
  • The only differences are a few additional config files that allow you to control the output for the CSS grade that is being generated (debug/dev and production). Also, there’s a folder called “themes”. In this folder is where all of the
  • The only differences are a few additional config files that allow you to control the output for the CSS grade that is being generated (debug/dev and production). Also, there’s a folder called “themes”. In this folder is where all of the
  • You see that in the sencha-touch.css we have an import directive that essentially adds in base CSS code, and then following that we have a handful of mixins, which are appropricately named relative to the actual UI component’s name that Sencha Touch uses.
  • You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
  • You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
  • You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
  • You don’t need to include all of the mixins if you know you’re not going to use them, you can pick and choose
  • FITC Screens 2011 Presentation - Using Sencha Touch to build Cross-platform HTML5 Apps

    1. 1. Using the Sencha Touch for Building Cross-Platform HTML5 Mobile Applications Presenters: Mukul Seth Nathaniel Bagnell
    2. 2. 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
    3. 3. Introductions
    4. 4. Who we are Mukul Seth Nathaniel Bagnell Interactive Developer, Interactive Developer, Digiflare Inc. Digiflare Inc.
    5. 5. 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…
    6. 6. What we doIn other words..›Everything!
    7. 7. Some of our clients
    8. 8. MSN Video Portal (Win7 Slate)
    9. 9. CBC Elections Map (iPad)
    10. 10. McCain Menu Advantage (PlayBook)
    11. 11. › What do these apps have in common?Ans. __________
    12. 12. › What do these apps have in common?Ans. HTML5/CSS3
    13. 13. HTML5/CSS3
    14. 14. HTML5/CSS3
    15. 15. Enter: Sencha Touch
    16. 16. Why Sencha Touch? Cross-platform Faster, cheaper, easier Highly customizable
    17. 17. 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…)
    18. 18. index.html
    19. 19. App.js
    20. 20. Sencha Touch Libs and CSS
    21. 21. Demo Application http://github.com/Digiflare/foosbrawl
    22. 22. 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
    23. 23. 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
    24. 24. View/Control Creation Ext.create Shorthand equivalent
    25. 25. View/Control Definition
    26. 26. View/Control Customization
    27. 27. Layout Types fit card
    28. 28. Card-based Controls TabPanel Carousel
    29. 29. Layout Types – cont’d vbox hbox
    30. 30. Vbox & Hbox Layouts - Flex flex config config defaults
    31. 31. Method Overrides
    32. 32. 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)
    33. 33. Data Models
    34. 34. Data Stores
    35. 35. Manipulating Data Model Creation Model Update
    36. 36. Manipulating Stores – Filtering
    37. 37. Binding Data
    38. 38. Sencha Touch Theming
    39. 39. 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
    40. 40. 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
    41. 41. 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/
    42. 42. 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
    43. 43. 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
    44. 44. 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
    45. 45. 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
    46. 46. 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
    47. 47. 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
    48. 48. Sass Example: Nested Rules
    49. 49. Sass Example: Nested Rules Continued› You can also nest same-type properties as you may have noticed a few slides back
    50. 50. Sass Example: Expressions› Sass can parse expressions that you may need› Yet another flashback, take a look at the ‘size’ attribute
    51. 51. Sass Example: Control Structures› You can define four types of control structures within your Sass document.› They are @if, @for, @each, and @while
    52. 52. Sass Example: Putting it all Together
    53. 53. Sass Example: Putting it all Together
    54. 54. 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
    55. 55. 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
    56. 56. 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
    57. 57. 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.
    58. 58. 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
    59. 59. 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
    60. 60. 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
    61. 61. 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
    62. 62. Where to go from here?› Sencha Project Homepage › Compass Homepage › http://www.sencha.com/ › http://www.compass-style.org/› API Docs/Samples/Help/Tutorials › Digiflare Homepage › http://docs.sencha.com/touch/2-0/ › http://www.digiflare.com› Sass Homepage › Digiflare Twitter › http://www.sass-lang.com/ › @Digiflare
    63. 63. Q/A Mukul Seth: Nathaniel Bagnell:mukul.seth@digiflare.com nathaniel.bagnell@digiflare.com @m_seth @nathaniel401

    ×