An Introduction to JQuery Mobile By Trevor Seeney

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

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.

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

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

Browser-based Applications on the IBM/i

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.

Basic Page Structure,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,

Let’s Code My first jQuery Mobile code My first jQuery Mobile code <script <script src=" bile min.js"> src=" bile min.js"> jQuery Mobile jQuery Mobile

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

Sample Page (data-theme=”a”)

Sample Page (data-theme=”b”)

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) and I’ll talk you through it Call me at (201) and I’ll talk you through it

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

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

Elements

More Elements

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.

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.

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

Tables by Example Table Toggle

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

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

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.

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

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

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

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.

The End Trevor Seeney Trevor Seeney iPower Software Inc iPower Software Inc (201) (201)