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/r esources/  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 jQuery Mobile 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 aptana Studio'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)

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 data-roles page header, footer navbar listview, list-divider content button collapsible, collapsible-set dialog, popup

15. First Example (page 1 only) Page Content Header This is the content on page 1 Go to second page Page Content Footer Look for: pages, roles, ids, classes …

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

17. First Example Dreamweaver's Live View

18. Here's how works... 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  jQuery Mobile will ignore all content not contained within HTML elements identified as data-role="page" some random content This content is in an external page some random content This content is in an external page This p will be ignored, not diplayed because it is not inside "page"

21. Page Transitions data-transition='value' in anchor tag TransitionDescription fadeFades in the next page over the current one flipFlips the next page over from under the current one popThe next page springs into view slideThe next page slides in from the side slidedownThe next page slides in from the top slideupThe next page slides in from the bottom

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, add data-close-btn="right"  Change appearance to darker theme, b, add data-theme="b"

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

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" or class="ui-btn- right"

25. Toolbar buttons code example Header Bar Options This is page 1 Button 1 Button 2 Button 3

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 outside the 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 Bar This is page 1. There are two links: one to a page that is part of this site, one that is not. Link to an external page Footer Bar $(function(){ $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); $(function(){ $( "[data-role='header'], [data-role='footer']" ).toolbar(); }); 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 ClassDescription ui-btnthis is required class, style as a button ui-btn-[a-z]color scheme ui-btn-activeset as active/selected btn useful to identify current page in navbar ui-state-persistrestore the active state each time the page is shown ui-btn-inlinedisplay btn inline ui-btn-[top, right, left, bottom]icon position relative to button text ui-btn-icon-nottextsuppress btn text resulting in a circular btn use together

31. Useful Navbar Classes ui-icon ClassDescription ui-icon-[plus, minus]+ or - icon ui-icon-arrow-[l, r, u, d]left, right,up down arrow ui-icon-homehouse icon ui-icon-starstart icon ui-icon-searchmagnifying glass icon ui-icon-grid3 x 3 grid ui-icon-geargear icon ui-icon-checkcheckmark icon

32. Navigation Bar code example Header Bar One Two Three Four

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. Unordered List Example List Item 1-no anchor List Item 2 OTHER ITEMS DIVIDER List Item 3 List Item 4 > Listview code example

36. Listview with custom Icons— 16x16 Image  Inside the LI A tag include an IMG element for the image icon  Apply the class="ui-li-icon" to the IMG element  Example  United States

37. Listview Data Filter  Add data-filter="true" to the UL or OL element that includes the attribute data-role="listview"  To customize what search box placeholder text (default is "Filter Items…") add to the UL or OL the atttribute data-filter-placeholder="placeholdertext"

38. Unordered List Example List Item 1-no anchor United States Listview Data Filter code example

39. Listview Rich Content Example This list includes: 1.LI list-divider for the Date 2.LI for each Item that has an anchor (creates arrow icon) 3.Inside the LI are: a.H4 "To Do Item 1" b.P Item Summary c.P Time Due assigned class="ul-li-aside" d.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 attribute data-collapsed="false"

42. Collapsible Blocks Example Collapsible block: I'm a collapsible block I'm the content in the collapsible block. Collapsible Content code example (1 of 3)

43. Defaults to open: I'm a collapsible block I'm the content in the collapsible block. Collapsible Content code example (2 of 3)

44. Nested Collapsible blocks: I'm a collapsible block I'm the content in the collapsible block. I'm a collapsible block I'm the content in the collapsible block. Collapsible Content code example (3 of 3)

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. Section 1 I'm the content in section 1. Section 2 I'm the content in section 2. Section 3 I'm the content in section 3. Collapsible Set partial code example

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 Two-column layout: This is block A This is block B These have been styled to include a background color

50. 2 Column 2 Row Grid Two-column Two-Row layout: This is block A This is block B This is block A This is block B These have been styled to include a background color

51. Themes  jQuery Mobile ships with 2 default themes  a – light  b – dark  Specify theme using attribute data-theme="n" where n is the letter assigned to a theme  Add this attribute to any element with a data-role assigned  Use ThemeRoller to create your own themes

52. data-theme="a" data-theme="b"

53. ThemeRoller  Create your own custom theme and download it  Include new theme files by linking to the new theme css and the new icon css files ABOVE the default jQuery Mobile stylesheet  Change the default jQuery Mobile stylesheet to only use the "structure" version of that stylesheet, omitting themes  Generate Up to 24 new letter identified themes beyond a and b  All are identified by letters of the alphabet  To use you simply use that letter in the data-theme attribute for the element you want that theme applied to

54. ThemeRoller  Letters indicated by tabs  Edit a and b if you want  Customize c theme  Use + button to add more themes

55. ThemeRoller-links in HEAD