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

Up and Running with jQuery Mobile & PhoneGap Build

Up and Running with jQuery Mobile & PhoneGap Build

This talk was given at Mobile Camp LA.

E47af1013d3ab2bd530c8b87010074b4?s=128

Chris Griffith

October 19, 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. •  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…  
  46. None
  47. None
  48. ApplicaDon  container  that  allows  you  to  build   naDvely  installed

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

  50. What  is  PhoneGap   Your  Code   NaKve  Web  View

     
  51. What  is  PhoneGap   Your  Code   NaKve  Web  View

      NaKve  APIs  
  52. What  is  PhoneGap   Your  Code   NaKve  Web  View

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

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

     exisKng   tools/frameworks?  
  55. 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  
  56. Ge[ng  Started   h>p://incubator.apache.org/cordova/  

  57. PhoneGap  Community  

  58. Building  it   phonegap.com/start  

  59. Building  it   build.phonegap.com  

  60. ConfiGAP   hLp://aj-­‐soYware.com/configap/  

  61. Building  it   <Demo>  

  62. 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  
  63. Camera  API  example  

  64. 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.  
  65. None
  66. Beyond  the  mobile  web   PhoneGap  is  extensible  with  a

     “naDve   plugin”  model  that  enables  you  to  write   your  own  naDve  logic  to  access  via   JavaScript.       There  are  lots  of  open  source  plugins  at   hLps://github.com/phonegap/ phonegap-­‐plugins       Learn  more  at  hLp:// wiki.phonegap.com/w/page/36752779/   PhoneGap%20Plugins      
  67. None
  68. None
  69. None
  70. Now  go  build  something!  

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