Upgrade to Pro — share decks privately, control downloads, hide ads and more …

jQuery Mobile & PhoneGap

jQuery Mobile & PhoneGap

A presentation given to the Orange Country Dreamweaver User Group

E47af1013d3ab2bd530c8b87010074b4?s=128

Chris Griffith

November 20, 2012
Tweet

Transcript

  1. Up and Running with jQuery Mobile & PhoneGap Build @ChrisGriffith

     
  2. ese opinions and thoughts are my own, and may or

    may not re ect the opinions of the company that I work for. Disclaimer
  3. None
  4. None
  5. None
  6. e interface con guration is markup-driven, which means you can

    pre y much create your entire basic app interface in HTML, without needing to write a single line of JavaScript. (Of course, you'll still need to write JavaScript if your app is to do anything useful!) What  does  jQuery  Mobile  do?  
  7. What  pla5orms  support  jQuery  Mobile?  

  8. None
  9. <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> <body> </body> </html>
  10. <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> <body> </body> </html>
  11. <!DOCTYPE html> <html> <head> <title>Page Title</title> <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://code.jquery.com/ mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/ jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/ jquery.mobile-1.2.0.min.js"></script> </head> <body> </body> </html>
  12. <body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page

    content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>
  13. <body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page

    content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>
  14. <body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page

    content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>
  15. <body> <div id="homePage"> <div> <h1>Page Title</h1> </div> <div> <p>My page

    content</p> </div> <div> <h4>Footer</h4> </div> </div> </body>
  16. None
  17. data- a ributes are a wonderful new feature of HTML5

    that let you add any a ributes you like to an element. All you have to do is start your a ribute name with the data- pre x. data-­‐*  
  18. <body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div

    data-role="content"> <p>My page content</p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> </body>
  19. None
  20. <body> <div id="homePage" data-role="page"> <div data-role="header"> <h1>Page Title</h1> </div> <div

    data-role="content"> <p>My page content</p> <p><a href="#about">About this app</a></p> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div> <div data-role="page" id="about"> <div data-role="header"> <h1>About This App</h1> </div> <div data-role="content"> <p>This app rocks! <a href="#homePage">Go home</a></p> </div> </div> </body> Pages  within  pages  
  21. None
  22. To turn a link into a bu on in jQuery

    Mobile, simply add data-role="bu on" to the a tag:   <a href="#about" data-role="button">About this app</a> Bu>ons  
  23. None
  24. Lists are used for data display, navigation, result lists, and

    data entry. jQuery Mobile includes a wide range of list types and forma ing examples to cover most common design pa erns. Lists  
  25. <li> <a href img src="images/rush.png" class="ui- li-thumb"> <h3 class="ui-li-heading">Fly by

    Night</h3> <p class="ui-li-desc">(1975)</p> </a> </li> List  Code  -­‐  Sample  
  26. None
  27. <div data-role="page" id="twenty-one-twelve" data-add-back-btn="true">   OR     <script> $(document).bind("mobileinit",

    function(){ $.mobile.page.prototype.options.addBackBtn=true; }); </script> Back?  
  28. None
  29. None
  30. <div data-role="footer"> <div data-role="navbar"> <ul> <li><a href="#">One</a></li> <li><a href="#">Two</a></li> <li><a

    href="#">Three</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer --> Tabs  
  31. Icons can be added to navbar items by adding the

    data-icon a ribute specifying a standard mobile icon to each anchor. By default, icons are added above the text (data-iconpos="top"). e following examples add icons to a navbar in a footer. Icons  in  navbars  
  32. 18x18  pixels  saved  as  a  PNG-­‐8  with  alpha  transparency  

      .ui-icon-myapp-email { background-image: url("app-icon-email.png"); }   36x36  pixels  saved  as  a  PNG-­‐8  with  alpha  transparency     @media only screen and (-webkit-min-device-pixel-ratio: 2) { .ui-icon-myapp-email { background-image: url("app-icon-email-highres.png"); background-size: 18px 18px; } }   Custom  Icons  
  33. Fixed header markup example: <div data-role="header" data-position="fixed"> <h1>Fixed Header!</h1> </div>

          Fixed footer markup example:     <div data-role="footer" data-position="fixed"> <h1>Fixed Footer!</h1> </div> Fixed  Toolbars  
  34. None
  35. To tell the framework to apply the persistent behavior, add

    a data-id a ribute to the footer of all HTML pages in the navigation set to the same ID. It's that simple: if the page you're navigating to has a header or footer with the same data-id, the toolbars will appear xed outside of the transition. Persistent  Footer  navigaKon  bar  
  36. <div data-role="footer" data-id="myTabs" data-position="fixed"> <div data-role="navbar"> <ul> <li><a href="a.html">Friends</a></li> <li><a

    href="b.html">Albums</a></li> <li><a href="c.html">Emails</a></li> <li><a href="d.html" >Info</a></li> </ul> </div><!-- /navbar --> </div><!-- /footer -->   To set the active state of an item in a persistent toolbar, add a class of ui-state-persist in addition to ui-btn-active to the corresponding anchor.   <li><a href="d.html” class="ui-btn-active ui-state-persist">Info</a></ li> Persistent  Footer  navigaKon  bar  
  37. JSON  (JavaScript  Object  NotaDon)  is  a  lightweight  data-­‐ interchange  format.

     It  is  easy  for  humans  to  read  and  write.     It  is  easy  for  machines  to  parse  and  generate.  
  38. var tourDates = {concerts: [ { "id": 0, "tourloc":"Manchester, NH",

    "tourVenue": "Verizon Wireless Arena", "tourDate": "Sep-7" }, { "id": 1, "tourloc":"Washington, DC", "tourVenue": "Jiffy Lube Live Amphitheater", "tourDate": "Sep-9" } ]}; Sample  JSON  Data  
  39. None
  40. TemplaKng  or  DRY  soluKons   hLp://mustache.github.com/  

  41. Basic  Template   var person = { firstName: "Christopher", lastName:

    ”Griffith", blogURL: "http://chrisgriffith.wordpress.com" }; var template = "<h1>{{firstName}} {{lastName}}</h1>Blog: {{blogURL}}"; var html = Mustache.to_html(template, person); $('#sampleArea').html(html);
  42. Theming  Tools  

  43. None
  44. None
  45. None
  46. •  The  web  is  sandboxed   •  The  web  has

     no  good  offline  story   •  The  web  cannot  parDcipate  in  app  store   distribuDon  revenue   •  The  web  cannot  access  most  device  APIs   •  The  web  has  awful  tooling   Mobile  Web  is  great  but…  
  47. None
  48. None
  49. ApplicaDon  container  that  allows  you  to  build   naDvely  installed

     apps  using  HTML,  CSS  &  JavaScript       What  is  PhoneGap?  
  50. What  is  PhoneGap?   Your  Code  

  51. What  is  PhoneGap?   Your  Code   NaKve  Web  View

     
  52. What  is  PhoneGap?   Your  Code   NaKve  Web  View

      NaKve  APIs  
  53. What  is  PhoneGap?   Your  Code   NaKve  Web  View

      NaKve  APIs   NaKve  App  -­‐  .apk,  .ipa,  etc  
  54. What  pla5orms  support  PhoneGap?  

  55. Since  it  is  HTML,  CSS  &  JSS,  can  I  use

     exisKng   tools/frameworks?  
  56. None
  57. CauKon…   PhoneGap  uses  the  NATIVE  browser  on  the  

    device  to  render  the  HTML/CSS/JS     Keep  that  in  mind,  as  that  can  affect  the   experience  
  58. Ge[ng  Started   h>p://incubator.apache.org/cordova/  

  59. PhoneGap  Community  

  60. Building  it   phonegap.com/start  

  61. Building  it   build.phonegap.com  

  62. <?xml  version="1.0"  encoding="UTF-­‐8"?>   <widget  xmlns  =  "hLp://www.w3.org/ns/widgets"    xmlns:gap

     =  "hLp://phonegap.com/ns/1.0"    id                =  "com.ajsoaware.demos.mobilecampla"    versionCode=""    version      =  "1.0">    <name>Rush</name>    <descripDon>A  sample  jQuery  Mobile  applicaDon</descripDon>    <author  href="hLp://www.aj-­‐soaware.com"  email="chris.griffith@gmail.com">Chris  Griffith</author>    <preference  name="phonegap-­‐version"  value="1.8.1"  />    <preference  name="orientaDon"  value="portrait"  />    <preference  name="target-­‐device"  value="universal"  />    <preference  name="fullscreen"  value="false"  />    <preference  name="webviewbounce"  value="true"  />    <preference  name="prerendered-­‐icon"  value="true"  />    <preference  name="stay-­‐in-­‐webview"  value="true"  />    <preference  name="ios-­‐statusbarstyle"  value="black-­‐opaque"  />    <preference  name="disable-­‐cursor"  value="true"  />    <preference  name="android-­‐minSdkVersion"  value="7"  />    <preference  name="android-­‐maxSdkVersion"  value="11"  />    <preference  name="android-­‐installLocaDon"  value="Auto"  />    <feature  name="hLp://api.phonegap.com/1.0/geolocaDon"/>    <icon  src="assets/icon_57.png"  gap:plajorm="ios"  width="57"  height="57"  />    <icon  src="assets/icon_72.png"  gap:plajorm="ios"  width="72"  height="72"  />    <icon  src="assets/icon_114.png"  gap:plajorm="ios"  width="114"  height="114"  />    <icon  src="assets/icon_144.png"  gap:plajorm="ios"  width="144"  height="144"  />    <icon  src="assets/icon_48.png"  gap:plajorm="android"  gap:density="mdpi"  />    <icon  src="assets/icon_72.png"  gap:plajorm="android"  gap:density="hdpi"  />    <icon  src="assets/icon_96.png"  gap:plajorm="android"  gap:density="xhdpi"  />    <icon  src="assets/icon_48.png"  gap:plajorm="winphone"  />    <gap:splash  src="assets/320x480.png"  width="320"  height="480"  />    <gap:splash  src="assets/640x960.png"  width="640"  height="960"  />    <gap:splash  src="assets/320x480.png"  gap:plajorm="android"  gap:density="mdpi"  />    <gap:splash  src="assets/480x800.png"  gap:plajorm="android"  gap:density="hdpi"  />   </widget>  
  63. ConfiGAP   hLp://aj-­‐soaware.com/configap/  

  64. Building  it   <Demo>  

  65. Device  Access   Accelerometer     Camera     Capture

        Compass     ConnecKon     Contacts     Device  InformaKon   File     GeolocaKon     Media     NoKficaKon     Storage     Out  of  the  box,  PhoneGap  provides  support  for  a  number  of  basic  device  APIs  
  66. Camera  API  example  

  67. None
  68. Debugging   It’s  all  just  HTML/JS,  so  you  can  use

      your  browser!       Take  advantage  of  Chrome  Developer   tools/Firebug  to  test  your  app’s  UI.  
  69. Plugins   Barcode  Reader   Child  Browser   iAd  

    ApplicaDon  Preferences   Screen  Shot   External  Screen   In  App  Purchase  Manager   Local  NoDficaDons   Push  NoDficaDons   Calendar   hLps://github.com/phonegap/phonegap-­‐plugins  
  70. None
  71. None
  72. None
  73. Now  go  build  something!  

  74. Thanks!   chris.griffith@gmail.com   @chrisgriffith   hLp://chrisgriffith.wordpress.com/