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.

Chris Griffith

October 19, 2012
Tweet

More Decks by Chris Griffith

Other Decks in Technology

Transcript

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

    View full-size slide

  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

    View full-size slide

  3. 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?  

    View full-size slide

  4. What  pla5orms  support  jQuery  Mobile?  

    View full-size slide




  5. Page Title


    My page content


    Footer



    View full-size slide




  6. Page Title


    My page content


    Footer



    View full-size slide




  7. Page Title


    My page content


    Footer



    View full-size slide




  8. Page Title


    My page content


    Footer



    View full-size slide

  9. 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-­‐*  

    View full-size slide




  10. Page Title


    My page content


    Footer



    View full-size slide




  11. Page Title


    My page content
    About this app


    Footer




    About This App


    This app rocks! Go home



    Pages  within  pages  

    View full-size slide

  12. To turn a link into a bu on in jQuery Mobile,
    simply add data-role="bu on" to the a tag:
     
    About
    this app
    Bu>ons  

    View full-size slide

  13. 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  

    View full-size slide


  14. class="ui-li-thumb">
    Fly by Night
    (1975)


    List  Code  -­‐  Sample  

    View full-size slide

  15. data-add-back-btn="true">
     
    OR  
     
    <br/>$(document).bind("mobileinit", function(){<br/>$.mobile.page.prototype.options.addBackBtn=true;<br/>});<br/>
    Back?  

    View full-size slide




  16. One
    Two
    Three



    Tabs  

    View full-size slide

  17. 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  

    View full-size slide

  18. 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  

    View full-size slide

  19. Fixed header markup example:

    Fixed Header!

         
    Fixed footer markup example:
       

    Fixed Footer!

    Fixed  Toolbars  

    View full-size slide

  20. 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  

    View full-size slide




  21. Friends
    Albums
    Emails
    Info



     
    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.
     
    Info
    li>
    Persistent  Footer  navigaKon  bar  

    View full-size slide

  22. 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.  

    View full-size slide

  23. 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  

    View full-size slide

  24. TemplaKng  or  DRY  soluKons  
    hLp://mustache.github.com/  

    View full-size slide

  25. Basic  Template  
    var person = {
    firstName: "Christopher",
    lastName: ”Griffith",
    blogURL: "http://chrisgriffith.wordpress.com"
    };
    var template = "{{firstName}} {{lastName}}Blog:
    {{blogURL}}";
    var html = Mustache.to_html(template, person);
    $('#sampleArea').html(html);

    View full-size slide

  26. Theming  Tools  

    View full-size slide

  27. •  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…  

    View full-size slide

  28. ApplicaDon  container  that  allows  you  to  build  
    naDvely  installed  apps  using  HTML,  CSS  &  JavaScript    
     
    What  is  PhoneGap?  

    View full-size slide

  29. What  is  PhoneGap  
    Your  Code  

    View full-size slide

  30. What  is  PhoneGap  
    Your  Code  
    NaKve  Web  View  

    View full-size slide

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

    View full-size slide

  32. What  is  PhoneGap  
    Your  Code  
    NaKve  Web  View  
    NaKve  APIs  
    NaKve  App  -­‐  .apk,  .ipa,  etc  

    View full-size slide

  33. What  pla5orms  support  PhoneGap?  

    View full-size slide

  34. Since  it  is  HTML,  CSS  &  JSS,  can  I  use  exisKng  
    tools/frameworks?  

    View full-size slide

  35. 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  

    View full-size slide

  36. Ge[ng  Started  
    h>p://incubator.apache.org/cordova/  

    View full-size slide

  37. PhoneGap  Community  

    View full-size slide

  38. Building  it  
    phonegap.com/start  

    View full-size slide

  39. Building  it  
    build.phonegap.com  

    View full-size slide

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

    View full-size slide

  41. Building  it  
     

    View full-size slide

  42. 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  

    View full-size slide

  43. Camera  API  example  

    View full-size slide

  44. 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.  

    View full-size slide

  45. 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    
     

    View full-size slide

  46. Now  go  build  something!  

    View full-size slide

  47. Thanks!  
    chris.griffi[email protected]  
    @chrisgriffith  
    hLp://chrisgriffith.wordpress.com/  

    View full-size slide