1. An Introduction to JQuery Mobile By Trevor Seeney

2. Agenda What is JQuery Mobile What is JQuery Mobile Basic Page Structure Basic Page Structure Example Code Example Code Roles Roles Elements (Forms, Buttons, Tables, etc.) Elements (Forms, Buttons, Tables, etc.) Themes Themes The Theme Roller The Theme Roller Slide-in Panels Slide-in Panels Summary Summary

3. What is JQuery Mobile JQuery Mobile is a HTML5- based Javascript framework with a user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. JQuery Mobile is a HTML5- based Javascript framework with a user interface system designed to make responsive web sites and apps that are accessible on all smartphone, tablet and desktop devices. Note that the inclusion of the word 'mobile' in the name is a misnomer as it works very well on tablets and desktops. Note that the inclusion of the word 'mobile' in the name is a misnomer as it works very well on tablets and desktops.

4. A User Interface Framework A User Interface Framework JQuery Mobile is a user interface framework. JQuery Mobile is a user interface framework. Built over JQuery. Built over JQuery. Implementation is the simple inclusion of a Javascript file and a Style (CSS) file. Implementation is the simple inclusion of a Javascript file and a Style (CSS) file. Is multi-platform  smartphones, tablets and desktop devices. Is multi-platform  smartphones, tablets and desktop devices. Knowledge of JQuery, Javascript and CSS is not required Knowledge of JQuery, Javascript and CSS is not required

5. A great choice for the IBM/i programmer JQuery Mobile’s "write less, do more" mantra allows you to design a single highly-branded responsive application that will work on all popular smart devices and desktops. JQuery Mobile’s "write less, do more" mantra allows you to design a single highly-branded responsive application that will work on all popular smart devices and desktops. JQuery Mobile provides the IBM/i programmer with a fast path to developing browser-based applications. JQuery Mobile provides the IBM/i programmer with a fast path to developing browser-based applications. Aesthetics are part and parcel of the interface Aesthetics are part and parcel of the interface

6. Browser-based Applications on the IBM/i

7. Some Other Advantages of using JQuery Mobile Open-source and free. Open-source and free. Cross-platform, cross-device and cross- browser compatible. Cross-platform, cross-device and cross- browser compatible. Optimized for touch devices. Optimized for touch devices. The design is ‘themable’ and customizable. The design is ‘themable’ and customizable.

8. Basic Page Structure,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

9. Let’s Code My first jQuery Mobile code My first jQuery Mobile code <script <script src="http://code.jquery.com/mobile/1.2.0/jquery.mo bile-1.2.0.min.js"> src="http://code.jquery.com/mobile/1.2.0/jquery.mo bile-1.2.0.min.js"> jQuery Mobile jQuery Mobile

10. Let’s Code (2) Options Options Option 1 Option 1 Option 2 Option 2 Option 3 Option 3 Option 4 Option 4 Thermwell Thermwell

11. Sample Page (data-theme=”a”)

12. Sample Page (data-theme=”b”)

13. HTTP Server Configuration There a several methods for configuring an HTTP server on the IBM/i. There a several methods for configuring an HTTP server on the IBM/i. It can be done on the command line It can be done on the command line It can be down through the browser ‘Tasks’ menu. It can be down through the browser ‘Tasks’ menu. Call me at (201) 681 9301 and I’ll talk you through it Call me at (201) 681 9301 and I’ll talk you through it

14. Roles The five we have already seen:- The five we have already seen:- 1. data-page 2. data-header 3. data-content 4. data-footer 5. data-theme

15. Additional Roles data-role='collapsible' data-role='collapsible' data-role="controlgroup" data-type="horizontal" data-role="controlgroup" data-type="horizontal"

16. Elements

17. More Elements

18. Tables Tables to the browser are like sub-files to the green-screen. Tables to the browser are like sub-files to the green-screen. They are used extensively in both paradigms They are used extensively in both paradigms The nice thing about the browser it will scale the content to the available screen space. The nice thing about the browser it will scale the content to the available screen space. But sometimes that is not enough, especially if a Smartphone or Tablet is used. But sometimes that is not enough, especially if a Smartphone or Tablet is used.

19. JQuery Mobile Tables JQuery Moble has a “reflow table mode” that works by collapsing the table columns into a stacked presentation that looks like blocks of label/data pairs for each row (a la DFU single record mode) JQuery Mobile also has a “column toggle table mode” which hides less important columns at narrower widths.

20. Column toggle table mode A button surfaces to open a menu that allows the user to choose what columns they want to see. <table data-role="table" id="table-column-toggle" data-mode="columntoggle" class="ui-responsive table-stroke"> Rank Movie Title Year Rating Reviews

21. Tables by Example Table Toggle

22. Themes Theme is the term used to describe the styling of elements in JQuery Mobile. Theme is the term used to describe the styling of elements in JQuery Mobile. A theme includes settings for including font family, drop shadows for overlays, and corner radius values for buttons and boxes, etc. A theme includes settings for including font family, drop shadows for overlays, and corner radius values for buttons and boxes, etc. In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font In addition, the theme can include multiple color swatches, each with color values for bars, content blocks, buttons and list items, and font

23. Swatches 5 Basic swatches 5 Basic swatches Black, Blue, Light Grey, Dark Gray and Yellow Black, Blue, Light Grey, Dark Gray and Yellow

24. More on Swatches Applying a swatch is achieved by specifying the ‘data-theme’ tag on an element. Applying a swatch is achieved by specifying the ‘data-theme’ tag on an element. The default theme is “a”, which is Black, and is used when data-theme is not specified. The default theme is “a”, which is Black, and is used when data-theme is not specified. ‘data-theme ‘ can be specified at the ‘role=page’ level. ‘data-theme ‘ can be specified at the ‘role=page’ level. A swatch can be applied to individual elements in the page that is different from the default for the page. A swatch can be applied to individual elements in the page that is different from the default for the page.

25. The Theme Roller JQuery Mobile has a utility call the ‘Theme Roller’ where you can create your own swatch and apply a data=theme letter “F”,”G”,”H” etc. JQuery Mobile has a utility call the ‘Theme Roller’ where you can create your own swatch and apply a data=theme letter “F”,”G”,”H” etc. Theme Roller

26. Themes can be saved as.CSS files which in turn can be included into your site. Themes can be saved as.CSS files which in turn can be included into your site. A Custom Theme A Custom Theme A Custom Theme A Custom Theme Themes can be saved as.CSS files which in turn can be included into your site. Themes can be saved as.CSS files which in turn can be included into your site. A Custom Theme A Custom Theme A Custom Theme A Custom Theme

27. Slide-in Panels A neat effect intended to optimize screen space, often used to slide-in a menu. A neat effect intended to optimize screen space, often used to slide-in a menu. data-role="panel“, data-display="overlay“ data-role="panel“, data-display="overlay“ width: 250px !important;" width: 250px !important;" Sliding Panel iHockey

28. Summary JQuery Mobile is easy to learn and use. JQuery Mobile is easy to learn and use. Offers a consistent rendering across all browsers. Offers a consistent rendering across all browsers. Aesthetically pleasing page layout and element styling. Aesthetically pleasing page layout and element styling. No Javascript and CSS knowledge required. No Javascript and CSS knowledge required. Leaves the IBM/I programmer to focus on the substance of the page and not the style. Leaves the IBM/I programmer to focus on the substance of the page and not the style.

29. The End Trevor Seeney Trevor Seeney iPower Software Inc iPower Software Inc www.iPowerSoftware.com www.iPowerSoftware.com tseeney@iPowerSoftware.com tseeney@iPowerSoftware.com tseeney@iPowerSoftware.com (201) 681 9301 (201) 681 9301