Using Sencha Touch to build Cross-platform HTML5 Apps - FITC Screens 2011
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

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

on

  • 2,955 views

As HTML5 becomes more and more popular there is a lot of work being done to make the lives of mobile application designers and developers easier by allowing them to build once and target deployment ...

As HTML5 becomes more and more popular there is a lot of work being done to make the lives of mobile application designers and developers easier by allowing them to build once and target deployment for all popular mobile platforms and browsers. There is now a great HTML5 application framework called Sencha Touch and it allows web designers/developers to use their skills to build compelling native/browser-based applications for all platforms with a shared codebase. This presentation will introduce users to Sencha Touch and its various benefits and walk them through the process of creating a Sencha Touch project and deploying it to multiple mobile platforms.

Statistics

Views

Total Views
2,955
Views on SlideShare
2,948
Embed Views
7

Actions

Likes
1
Downloads
53
Comments
1

4 Embeds 7

http://a0.twimg.com 3
http://localhost 2
http://www.twylah.com 1
http://dev.toeska.cl 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • -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

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

  • 1. Using the Sencha Touch for Building Cross-Platform HTML5 Mobile Applications Presenters: Mukul Seth Nathaniel Bagnell
  • 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. Introductions
  • 4. Who we are Mukul Seth Nathaniel Bagnell Interactive Developer, Interactive Developer, Digiflare Inc. Digiflare Inc.
  • 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. What we doIn other words..›Everything!
  • 7. Some of our clients
  • 8. MSN Video Portal (Win7 Slate)
  • 9. CBC Elections Map (iPad)
  • 10. McCain Menu Advantage (PlayBook)
  • 11. › What do these apps have in common?Ans. __________
  • 12. › What do these apps have in common?Ans. HTML5/CSS3
  • 13. HTML5/CSS3
  • 14. HTML5/CSS3
  • 15. Enter: Sencha Touch
  • 16. Why Sencha Touch? Cross-platform Faster, cheaper, easier Highly customizable
  • 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. index.html
  • 19. App.js
  • 20. Sencha Touch Libs and CSS
  • 21. Demo Application http://github.com/Digiflare/foosbrawl
  • 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. 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. View/Control Creation Ext.create Shorthand equivalent
  • 25. View/Control Definition
  • 26. View/Control Customization
  • 27. Layout Types fit card
  • 28. Card-based Controls TabPanel Carousel
  • 29. Layout Types – cont’d vbox hbox
  • 30. Vbox & Hbox Layouts - Flex flex config config defaults
  • 31. Method Overrides
  • 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. Data Models
  • 34. Data Stores
  • 35. Manipulating Data Model Creation Model Update
  • 36. Manipulating Stores – Filtering
  • 37. Binding Data
  • 38. Sencha Touch Theming
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Sass Example: Nested Rules
  • 49. Sass Example: Nested Rules Continued› You can also nest same-type properties as you may have noticed a few slides back
  • 50. Sass Example: Expressions› Sass can parse expressions that you may need› Yet another flashback, take a look at the ‘size’ attribute
  • 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. Sass Example: Putting it all Together
  • 53. Sass Example: Putting it all Together
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. Q/A Mukul Seth: Nathaniel Bagnell:mukul.seth@digiflare.com nathaniel.bagnell@digiflare.com @m_seth @nathaniel401