Tweet
Tweet

Slide 1

Slide 1 text

RALPH WHITBECK jQuery ইदই JQUERY ݽ߄ੌ AN IN-DEPTH LOOK AT

Slide 2

Slide 2 text

RALPH WHITBECK jQuery ইदই RALPH WHITBECK jQuery Board Member jQuery Mobile Developer Relation Team Member Director of Professional Services Project Lead for jQuery Mobile Cookbook http://jquerymobilecookbook.com

Slide 3

Slide 3 text

RALPH WHITBECK jQuery ইदই

Slide 4

Slide 4 text

RALPH WHITBECK jQuery ইदই GRADED DEVICE SUPPORT See full device list at http://jquerymobile.com/gbs

Slide 5

Slide 5 text

RALPH WHITBECK jQuery ইदই GETTING STARTED                                    

Slide 6

Slide 6 text

RALPH WHITBECK jQuery ইदই ANATOMY OF A PAGE
   
       

My  Title

   
   
         

Hello  world

       
   
       

Footer

   

Slide 7

Slide 7 text

RALPH WHITBECK jQuery ইदই MULTIPLE PAGES IN ONE FILE
   

Page  1

   
         Next  Page      
   

Page  2

   
         Previous  Page      

Slide 8

Slide 8 text

RALPH WHITBECK jQuery ইदই ADDING COMPONENTS
  Yes   No   Maybe

Slide 9

Slide 9 text

RALPH WHITBECK jQuery ইदই ADDING COMPONENTS
  Yes   No   Maybe

Slide 10

Slide 10 text

RALPH WHITBECK jQuery ইदই ADDING COMPONENTS

Slide 11

Slide 11 text

RALPH WHITBECK jQuery ইदই http://jquerymobile.com/docs

Slide 12

Slide 12 text

RALPH WHITBECK jQuery ইदই STATE OF THE PROJECT

Slide 13

Slide 13 text

RALPH WHITBECK jQuery ইदই RELEASE MILESTONES • November 16, 2011 - 1.0.0 • January 26, 2012 - 1.0.1 • April 13, 2012 - 1.1.0 • July 12, 2012 - 1.1.1 • October 2, 2012 - 1.2.0

Slide 14

Slide 14 text

RALPH WHITBECK jQuery ইदই POPULARITY http://www.google.com/trends/explore#q=jQuery%20Mobile

Slide 15

Slide 15 text

RALPH WHITBECK jQuery ইदই POPULARITY BY REGION http://www.google.com/trends/explore#q=jQuery%20Mobile

Slide 16

Slide 16 text

RALPH WHITBECK jQuery ইदই THRIVING ECOSYSTEM

Slide 17

Slide 17 text

RALPH WHITBECK jQuery ইदই CODIQA

Slide 18

Slide 18 text

RALPH WHITBECK jQuery ইदই JQUERY MOBILE 1.2.0

Slide 19

Slide 19 text

RALPH WHITBECK jQuery ইदই JQUERY MOBILE 1.2.0 • New: Popup Widget • New Auto dividers in Listview mode • Collapsable Listviews are now supported • A Download builder (Alpha)

Slide 20

Slide 20 text

RALPH WHITBECK jQuery ইदই ADDING A POPUP Open  Popup
   

This  is  a  completely  basic  popup,  no  options  set.

Slide 21

Slide 21 text

RALPH WHITBECK jQuery ইदই POPUP MENUS Menu
   
           
  • My  Menu
    •        
  • Unlinked
    •        
  • Linked
    •        
  •            With  count                42                    
    •    

Slide 22

Slide 22 text

RALPH WHITBECK jQuery ইदই COLLAPSIBLE POPUP

Slide 23

Slide 23 text

RALPH WHITBECK jQuery ইदই POPUP FORM

Slide 24

Slide 24 text

RALPH WHITBECK jQuery ইदই POSITIONING • By Default: Popups Center over object that triggered it • Add attribute data-­‐position-­‐to="window"   • This centers the popup in the center of the window

Slide 25

Slide 25 text

RALPH WHITBECK jQuery ইदই OVERLAY STLYING • Overlay: Background of the popup but overlays the page • Theme the overlay to a dark shade. With the default swatches we can use the a swatch • Set the overlay theme with data- attribute: data-overlay-theme • data-­‐overlay-­‐theme="a"

Slide 26

Slide 26 text

RALPH WHITBECK jQuery ইदই DIALOG • Combine both data attributes

Slide 27

Slide 27 text

RALPH WHITBECK jQuery ইदই

Slide 28

Slide 28 text

RALPH WHITBECK jQuery ইदই ROADMAP • jQuery Mobile 1.3 • Responsive Table • jQuery UI Convergence • New API/Demo Docs • Expected (end of year) • jQuery Mobile 1.4 • Scrolling Region Utility • New Tab Widget (Based on jQuery UI) • Expected (March/April 2013)

Slide 29

Slide 29 text

RALPH WHITBECK jQuery ইदই RESPONSIVE TABLES DEMO http://jquerymobile.com/branches/tables/docs/tables/index.html

Slide 30

Slide 30 text

RALPH WHITBECK jQuery ইदই THEMES

Slide 31

Slide 31 text

RALPH WHITBECK jQuery ইदই THEMING OVERVIEW • Uses CSS3 Properties • Multiple Color “Swatches” • Sprited Icon Set • Default Theme come with 5 swatches a-e • If no swatch is specified by default: • a swatch for headers/footers • c swatch for content

Slide 32

Slide 32 text

RALPH WHITBECK jQuery ইदই MIXING SWATCHES
       
  • Theme  Inherit
    •    
  • Theme  b
    •    
  • Theme  c
    •    
  • Theme  d
    •    
  • Theme  e

Slide 33

Slide 33 text

RALPH WHITBECK jQuery ইदই

Slide 34

Slide 34 text

RALPH WHITBECK jQuery ইदই THEMEROLLER DEMO http://jquerymobile.com/themeroller

Slide 35

Slide 35 text

RALPH WHITBECK jQuery ইदই THIRD PARTY THEMES • jQuery Mobile Blackberry 10 Theme • https://github.com/blackberry/jQueryMobile-BB10-Theme • iOS Theme • http://taitems.github.com/iOS-Inspired-jQuery-Mobile-Theme/ • Windows Phone 7.5 Metro Theme • http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html

Slide 36

Slide 36 text

RALPH WHITBECK jQuery ইदই JQMGALLERY.COM

Slide 37

Slide 37 text

RALPH WHITBECK jQuery ইदই PLUGIN INTEGRATION

Slide 38

Slide 38 text

RALPH WHITBECK jQuery ইदই THIRD PARTY PLUGINS Listed at: http://jquerymobile.com/resources/#Plugins

Slide 39

Slide 39 text

RALPH WHITBECK jQuery ইदই ADDING A PLUGIN IS EASY script> <script  src="/js/plugin.js">  

Slide 40

Slide 40 text

RALPH WHITBECK jQuery ইदই ADDING A PLUGIN IS EASY script> <script  src="/js/plugin.js">  

Slide 41

Slide 41 text

RALPH WHITBECK jQuery ইदই CREATING WIDGETS

Slide 42

Slide 42 text

RALPH WHITBECK jQuery ইदই WIDGET FACTORY • All internal widget use jQuery UI Widget Factory • Provides a template for code organization • Exposes all options as data attributes for consistency through library • More info: http://api.jqueryui.com/jQuery.widget/

Slide 43

Slide 43 text

RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION • Users should add CSS/JS and markup to page and “it just work” • To Auto Initialize: • Bind to pagecreate and create events • Call plugin on markup that matches markup convention • register the initSelector option with the data-role attribute to match against

Slide 44

Slide 44 text

RALPH WHITBECK jQuery ইदই AUTO INITIALIZATION //set  the  initSelection  Option options:  {   initSelector:  ":jqmData(role='newplugin')" }, //  Bind  to  pagecreate  and  create  events //  Using  internal  “listview”  as  our  example $(  document  ).bind(  "pagecreate  create",  function(  e  )  {   $.mobile.listview.prototype.enhanceWithin(  e.target  ); });

Slide 45

Slide 45 text

RALPH WHITBECK jQuery ইदই NAMESPACING • Plugin should work with namespaced attributes • Global namespace override that sets a namespace • test that plugin works with both data- attributes and data- namespace- attributes

Slide 46

Slide 46 text

RALPH WHITBECK jQuery ইदই NAMESPACING //  To  set  a  namespace $(document).bind("mobileinit",  function(){    $.mobile.ns  =  "mynamespace"; }); //  this  changes  thing  like //  data-­‐role  now  becomes  data-­‐mynamespace-­‐role

Slide 47

Slide 47 text

RALPH WHITBECK jQuery ইदই THEME FRAMEWORK • Use internal plugins as a guide on: • structural styles that don’t set background colors, font colors, etc. • This allows the theme to flow through • Apply the stackable theme framework classes to your plugin • More info here http://jquerymobile.com/test/docs/api/themes.html • If swatch data- attribute is not set have widget inherit from the parent

Slide 48

Slide 48 text

RALPH WHITBECK jQuery ইदই SEMANTICS • Use HTML5 and better semantics • This makes it easier for selecting and parsing • In some cases it’ll make it easier to replace existing markup with widget markup for degraded experiences

Slide 49

Slide 49 text

RALPH WHITBECK jQuery ইदই ACCESSIBILITY • Ensure widget incorporates accessibility features like ARIA attributes • Test on screen readers like VoiceOver on iOS

Slide 50

Slide 50 text

RALPH WHITBECK jQuery ইदই UNIT TESTS • Have solid test coverage • jQuery Mobile uses QUnit for their Test Suite • See jQuery Mobile’s tests for examples https://github.com/jquery/ jquery-mobile/tree/master/tests/unit

Slide 51

Slide 51 text

RALPH WHITBECK jQuery ইदই JQUERY MOBILE AND BACKBONE.JS

Slide 52

Slide 52 text

RALPH WHITBECK jQuery ইदই SOME TIPS • Disable jQuery Mobile’s Page Navigation features, let backbone.js handle routing • When jQuery Mobile isn’t handling page navigation you’ll need to manually remove pages from the DOM • Complete Sample App https://github.com/ccoenraets/backbone- jquerymobile

Slide 53

Slide 53 text

RALPH WHITBECK jQuery ইदই PREPPING JQUERY MOBILE $(document).bind("mobileinit",  function  ()  {        //  Disable  jQuery  Mobile  page  navigation        $.mobile.ajaxEnabled  =  false;        $.mobile.linkBindingEnabled  =  false;        $.mobile.hashListeningEnabled  =  false;        $.mobile.pushStateEnabled  =  false;        //  Remove  page  from  DOM  when  it's  being  replaced        $(document).on('pagehide',  'div[data-­‐role="page"]',        function  (event,  ui)  {                $(event.currentTarget).remove();        }); });

Slide 54

Slide 54 text

RALPH WHITBECK jQuery ইदই JQUERY MOBILE AND CORDOVA

Slide 55

Slide 55 text

RALPH WHITBECK jQuery ইदই BUILD NATIVE APPS • Andriod • Blackberry • iOS • Symbian • WebOS • Windows Phone • Windows 8 • Bada • Tizen

Slide 56

Slide 56 text

RALPH WHITBECK jQuery ইदই CROSS DOMAIN ISSUES • Document root loads from file:// so loading assets from remote server is considered a cross-domain request • This can be a blocker in certain scenarios • Can set the jQuery Boolean variable $.support.cors to true • Additionally you may need to set the $.mobile.allowCrossDomainPages = true; in the mobileinit event • Look into PhoneGaps Whitelist feature to provide a list of URL’s allowed • Doesn’t work on all devices so look to PhoneGaps documentation

Slide 57

Slide 57 text

RALPH WHITBECK jQuery ইदই SOME TIPS • Use local copies of jQuery Mobile with Cordova • Recommended that you disable PushState feature on installed apps • Avoid using underscores (_) in files and folders

Slide 58

Slide 58 text

RALPH WHITBECK jQuery ইदই THANK YOU • Reach me at ralph.whitbeck@jquery.com • Twitter at @RedWolves • Special Thanks to Andy Matthews for his permission for code/screenshots from his tutorial on Nettuts