jQuery mobile " … do EVEN more"

1. jQuery mobile" … do EVEN more" Building Cross-platform Mobile Apps

2. jQuery Mobile • jQuery Mobile framework takes the "write less, do more" mantra to the next level • HTML5-based user interface system designed to make responsive touch-optimized web sites and apps that are accessible on all smartphone, tablet and desktop devices. • Works with jQuery JavaScript library • Relies on HTML5, CSS3, JavaScript, AJAX • Includes tools for helping you work faster • ThemeRoller for Mobile that allows you to drag and drop colors and create a custom theme • Builder for creating a custom bundle that contains only the components you need

3. jQuery Mobile Advantages • Uses HTML5 and CSS (not C#, C++ or Java) • Cross-platform** • Consistent look and feel • Small, lightweight and modular **check out platform-browser support at jquerymobile.com/gbs

4. jQuery Mobile Disadvantages • Varying feature support on platform's browser • No native access to platform features (like microphone, battery, camera, etc.) • Slower performance than native apps since JavaScript is interpretive not compiled

5. Overcoming Common Developer Complaints • Complaints • "jQuery always looks exactly the same" • "Too hard to customize outside of basic" • Overcoming those complaints • Think about how you combine the UI elements • jQuery Mobile ships with 2 default themes (a and b) but instead of using them create an effective color story using ThemeRoller • Use graphics and fonts well so that the UI elements are not so obvious • Get inspired by viewing featured jQuery Mobile sites

6. Tour "featured" jQuery Mobile sites • jquerymobile.com/resources/ • Open Table • Ikea Sweden • Disney World • Stanford University • JQM Gallery, www.jqmgallery.com • Lending Tree • Sam Adams Brewery • Moviis • United Airlines Observe responsiveness of the jQuery Mobile website's Demos page—notice that the sidebar menu becomes a slide-out menu at phone size

7. jQuery Mobile UI controls • Styling to enhance basci HTML elemtns like buttons • jQuery UI controls like accordion and tabs • Specialized jQueryMobile widgets like listview, filters, navbars, navigation, pages, panels, sliders

8. jQuery Mobile Testing • jQuery Mobile sometimes uses AJAX for tasks like dynamically fetching pages • When AJAX is used you will need a Web Server to test pages • Development Local Web Servers you can use: • Adobe Dreamweaver's Live View • WAMP|MAMP, using Apache • aptanaStudio's built-in web server

9. Using aptana Studio • Locate root folder in Project Explorer • Right Click > Promote to Project • Check "Web Primary" • Click Run as browser toolbar button to simulate live from inside aptana

10. Using WAMP • Locate WAMP localhost folder on your drive, (defaults to c:\wamp\www) • WAMP icon in system tray > localhost • Place your root folder inside WAMP localhost folder • Enter localhost URL in browser address bar, http://localhost

11. Using MAMP • Locate MAMP localhost folder on your drive(defaults to HD\Users\username\Sites) • WAMP icon in system tray > localhost • Place your root folder inside Sites folder • Enter localhost URL in browser address bar, localhost/~username/

12. www.jquerymobile.com Step 1:Download the latest stable jQuery Mobile js and css files and link them to your web page

13. 3 things that jQuery Mobile needs • jQuery Mobile styles css file • jQuery library js file • jQuery Mobile library js file • Set viewport's width = device-width(notice initial-scale=1.0 is missing) <link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.css" /> <script src="../jquery-1.11.0.js" type="text/javascript"></script> <script src="../jquery.mobile-1.4.2/jquery.mobile-1.4.2.js" type="text/javascript"></script> <meta name="viewport" content="width=device-width"/>

14. Things to remember… • jQuery Mobile operates from a page paradigm • jQuery Mobile uses roles to identify type of content using data-role attribute • jQuery Mobile connects js, HTML and CSS together using predefined ids and classes

15. First Example (page 1 only) Look for:pages,roles,ids,classes … <section id="firstpage"data-role="page"> <div data-role="header"> <h1>Page Content Header</h1> </div> <div class="ui-content"> <p>This is the content on page 1</p> <p><a href="#secondpage">Go to second page</a></p> </div> <div data-role="footer"> <h2>Page Content Footer</h2> </div> </section>

16. FirstExample Dreamweaver's Design View Hover over elements to display jQuery Mobile blue smart tags for selecting and editing

17. FirstExample Dreamweaver's Live View

18. Here's howworks... By putting the right attributes on the right container elements in the page, jQuery Mobile automatically styles them to look like an application.

19. Pages • Internal • in same HTML file • added attribute data-role="page" • accessed via named anchors • External – served by AJAX • separate HTML file • accessed via anchors • AJAX requests page from server, initializes widgets and animates it into place using a transition; instead of just telling the browser to load the page • External – not served by AJAX • separate HTML file • accessed via anchors that include one of the folowing attributes • rel="external" OR data-ajax="false" OR target="something" • considered by jQuery Mobile as external to the web app

20. External Pages within web app • jQueryMobile will ignore all content not contained within HTML elements identified as data-role="page" This p will be ignored,not diplayedbecause it is not inside "page" <body> <p>some random content</p> <div data-role="page"> <p>This content is in an external page</p> </div> </body>

21. Page Transitionsdata-transition='value' in anchor tag

22. Designate a page as a dialog • Add attribute data-dialog="true" to tag that includes data-role="page" attribute • By default there will be close button at top left corner and theme will be basic default, a • Move button to right, adddata-close-btn="right" • Change appearance to darker theme, b, adddata-theme="b"

23. Dreamweaver's Insert Panel • Has category jQuery Mobile • Not comprehensive • Includes dialogs for each control as you add it to set propertieseasily

24. Toolbars • Can be defined for both data-role="header" and data-role="footer" • Toolbars can have controls like buttons inside them designated by specific classes • Add anchor with class="ui-btn" orclass="ui-btn-right"

25. Toolbar buttons code example <section id="firstpage" data-role="page"> <div data-role="header"> <h1>Header Bar</h1> <a href="#" class="ui-btn-right">Options</a> </div> <div class="ui-content"> <p>This is page 1</p> </div> <footer data-role="footer" class="ui-bar"> <a href="#" class="ui-btn">Button 1</a> <a href="#" class="ui-btn">Button 2</a> <a href="#" class="ui-btn-right">Button 3</a> </footer> </section>

26. Fixed Position Toolbars • By default toolbars scroll with their content if the content gets longer than the screen • Set toolbars as fixed to keep them "at the initial location"; users can tap to hide/show • Add to tag that has role header or footer the attribute data-position="fixed" • Set toolbars as fixed by using fullscreen mode • Add to tag that has role header or footer the attribute data-fullscreen="true"

27. External-Persistent Toolbars • If your web app has multiple pages you may want the toolbars to persist as you change pages • In essence you need to build a toolbar that sits outsidethe page so that AJAX will not replace it when it loads the external page • Add code for toolbars above (header) or below(footer) ie outside of page • Add data-theme attribute to header/footer because jQuery will not know the theme since this content is not inside the page • Add jQuery function to manually add toolbar because jQuery is not going to see these since they are outside of the page

28. Persistent Toolbar example <header data-role="header" data-position="fixed" data-theme="a"> <h1>Header Bar</h1> </header> <section id="firstpage" data-role="page"> <div class="ui-content"> <p>This is page 1. There are two links: oneto a page that is part of this site, one that is not.</p> <p><a href="externalpage1.html">Link to anexternal page</a></p> </div> </section> <footer data-role="footer" data-position="fixed" data-theme="a"> <h1>Footer Bar</h1> </footer> <script> $(function(){ $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); </script> PAGE

29. Navigation Bars • Side by side buttons that let user quickly change categories • Uses HTML5 NAV element with UL inside as usual • Add attribute to NAV element,data-role="navbar" • Add jQuery Mobile classes to LI A elements to style as buttons with icons (if desired)

30. Useful Navbar Classes ui-btn use together

31. Useful Navbar Classes ui-icon

32. Navigation Bar code example <header data-role="header"> <h1>Header Bar</h1> <navdata-role="navbar"> <ul> <li><a href="#" class="ui-btn ui-icon-plus ui-btn-icon-top ui-btn-active ui-state-persist">One</a></li> <li><a href="#secondpage" class="ui-btn ui-icon-minus ui-btn-icon-top">Two</a></li> <li><a href="#" class="ui-btn ui-icon-check ui-btn-icon-top">Three</a></li> <li><a href="#" class="ui-btn ui-icon-grid ui-btn-icon-top">Four</a></li> </ul> </nav> </header>

33. List Views,in jQuery Mobile site see Demos link • Enhances unordered and ordered lists • Enhances lists with links embedded • Can style the list • Can filter the list using included search box or by revealing matches as user types • Can create custom or alphabetic list dividers to group into categories • Can place custom icons (left facing triangle is default) • Can add custom icons to left of text

34. List Views • Add attribute data-role="listview"to OL or UL • If there are links inside the lI's then the item is tappable • Create divider by adding data-role="listdivider"to LI

35. Listview code example <div class="ui-content"> <h2>Unordered List Example</h2> <uldata-role="listview"> <li>List Item 1-no anchor</li> <li><a href="#">List Item 2</a></li> <li data-role="list-divider">OTHER ITEMS DIVIDER</li> <li><a href="#">List Item 3</a></li> <li><a href="#">List Item 4</a></li> </ul>> </div>

36. Listviewwith custom Icons—16x16 Image • Inside the LI A tag includean IMG element for theimage icon • Apply the class="ui-li-icon"to the IMG element • Example • <li> <a href="#"><imgsrc='images/us.png' class='ui-li-icon'/> United States </a></li>

37. ListviewData Filter • Add data-filter="true"to the UL or OL element that includes the attributedata-role="listview" • To customize what search box placeholder text (default is "Filter Items…") add to the UL or OL the atttributedata-filter-placeholder="placeholdertext"

38. ListviewData Filtercode example <div class="ui-content"> <h2>Unordered List Example</h2> <uldata-role="listview" data-filter="true" data-filter-placeholder="Filter Countries…" data-inset="true"> <li>List Item 1-no anchor</li> <li><a href="#">United States</a></li>

39. ListviewRichContent Example • This list includes: • LI list-divider for the Date • LI for each Item that has an anchor (creates arrow icon) • Inside the LI are: • H4 "To Do Item 1" • P Item Summary • P Time Due assigned class="ul-li-aside" • P Item Details

40. Collapsible Blocks • Like the jQuery Accordion Widget • Content is hidden and revealed when user clicks|taps • Can default to closed or open on page load-document ready • Can be nested inside each other

41. Collapsible Blocks (cont.) • Assign attribute data-role="collapsible" to a container element, like a DIV • Default to open by adding attributedata-collapsed="false"

42. Collapsible Contentcode example (1 of 3) <section id="firstpage" data-role="page"> <header data-role="header"> <h1>Collapsible Blocks Example</h1> </header> <div class="ui-content"> <p>Collapsible block:</p> <div data-role="collapsible"> <h1>I'm a collapsible block</h1> <p>I'm the content in the collapsible block.</p> </div>

43. Collapsible Contentcode example (2 of 3) <p>Defaults to open:</p> <div data-role="collapsible" data-collapsed="false"> <h1>I'm a collapsible block</h1> <p>I'm the content in the collapsible block.</p> </div>

44. Collapsible Contentcode example (3 of 3) <p>Nested Collapsible blocks:</p> <div data-role="collapsible"> <h1>I'm a collapsible block</h1> <p>I'm the content in the collapsible block.</p> <div data-role="collapsible"> <h1>I'm a collapsible block</h1> <p>I'm the content in the collapsible block.</p> </div> </div>

45. Collapsible Sets • Groups together Collapsible Blocks into a Set so they can work together in unison • Assign attribute data-role="collapsible-set"to a container element, like a DIV • Inside that container element place other container elements with the attribute data-role="collapsible"

46. Collapsible Setpartial code example <div data-role="collapsible-set"> <div data-role="collapsible data-collapsed="false"> <h1>Section 1</h1> <p>I'm the content in section 1.</p> </div> <div data-role="collapsible"> <h1>Section 2</h1> <p>I'm the content in section 2.</p> </div> <div data-role="collapsible"> <h1>Section 3</h1> <p>I'm the content in section 3.</p> </div>

47. Grids • jQuery Mobile provides a set of layout grids that are from 2 to 5 columns that you can use to layout your content in the page. • They are based on a nested structure, and any container, such as a div or anything else, can serve as a root for one of these grids. • Grids 100% page width • Grid columns are all equal width • Can be useful for creating Responsive Web Design

48. Grids (cont.) • Define the Grid • Assign attribute class="ui-grid-n", where n is a letter in the range of a-b to a container element, like a DIV • Define the Columns inside the Grid • Assign attribute class="ui-block-n", where n is a letter in the range of a-b to a container element, like a DIV • Define the Rows inside the Grid • Assign attribute class="ui-block-n", where n is a letter in the range of a-b to a container element, like a DIV

49. 2 Column 1 Row Grid <div class="content" class="ui-content"> <p>Two-column layout:</p> <div class="ui-grid-a"> <div class="ui-block-a"> <p>This is block A</p> </div> <div class="ui-block-b"> <p>This is block B</p> </div> </div> </div> These have been styled to include a background color

50. 2 Column2 Row Grid <div class="content" class="ui-content"> <p>Two-column Two-Row layout:</p> <div class="ui-grid-b"> <div class="ui-block-a"> <p>This is block A</p> </div> <div class="ui-block-b"> <p>This is block B</p> </div> <div class="ui-block-a"> <p>This is block A</p> </div> <div class="ui-block-b"> <p>This is block B</p> </div> </div> </div> These have been styled to include a background color