Up and Running with jQuery Mobile & PhoneGap Build

This talk was given at Mobile Camp LA.

Transcript

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

   View 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 Slide

3. View Slide

4. View Slide

5. View Slide

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?  
   

   View Slide

7. What  pla5orms  support  jQuery  Mobile?  
   

   View Slide

8. View Slide

9. 
   
   
   Page Title
   
   
   
   
   
   
   
   
   

   View Slide

10. 
    
    
    Page Title
    
    
    
    
    
    
    
    
    

    View Slide

11. 
    
    
    Page Title
    
    
    
    
    
    
    
    
    

    View Slide

12. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

13. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

14. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

15. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

16. View Slide

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

    View Slide

18. 
    
    
    Page Title
    
    
    My page content
    
    
    Footer
    
    
    
    

    View Slide

19. View Slide

20. 
    
    
    Page Title
    
    
    My page content
    About this app
    
    
    Footer
    
    
    
    
    About This App
    
    
    This app rocks! Go home
    
    
    
    Pages  within  pages  
    

    View Slide

21. View Slide

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

23. View Slide

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  
    

    View Slide

25. 
    class="ui-li-thumb">
    Fly by Night
    (1975)
    
    
    List  Code  -­‐  Sample  
    

    View Slide

26. View Slide

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

    View Slide

28. View Slide

29. View Slide

30. 
    
    
    One
    Two
    Three
    
    
    
    Tabs  
    

    View Slide

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  
    

    View Slide

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  
    

    View Slide

33. Fixed header markup example:
    
    Fixed Header!
    
         
    Fixed footer markup example:
       
    
    Fixed Footer!
    
    Fixed  Toolbars  
    

    View Slide

34. View Slide

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  
    

    View Slide

36. 
    
    
    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 Slide

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.  
    

    View Slide

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  
    

    View Slide

39. View Slide

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

    View Slide

41. 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 Slide

42. Theming  Tools  
    

    View Slide

43. View Slide

44. View Slide

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…  
    

    View Slide

46. View Slide

47. View Slide

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

    View Slide

49. What  is  PhoneGap  
    Your  Code  
    

    View Slide

50. What  is  PhoneGap  
    Your  Code  
    NaKve  Web  View  
    

    View Slide

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

    View Slide

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

    View Slide

53. What  pla5orms  support  PhoneGap?  
    

    View Slide

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

    View Slide

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  
    

    View Slide

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

    View Slide

57. PhoneGap  Community  
    

    View Slide

58. Building  it  
    phonegap.com/start  
    

    View Slide

59. Building  it  
    build.phonegap.com  
    

    View Slide

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

    View Slide

61. Building  it  
     
    

    View Slide

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  
    

    View Slide

63. Camera  API  example  
    

    View Slide

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.  
    

    View Slide

65. View Slide

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    
     
    

    View Slide

67. View Slide

68. View Slide

69. View Slide

70. Now  go  build  something!  
    

    View Slide

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

    View Slide