JQUERY MOBILE " … DO EVEN MORE" Building Cross-platform Mobile Apps

JQUERY MOBILE" … DO EVEN MORE"Building Cross-platform Mobile Apps

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

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

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

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

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

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

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

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

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

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/

www.jquerymobile.com

Step 1:Download the latest stable jQuery Mobile js and css files and link them to your web page

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"/>

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

First Example (page 1 only)

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

Look for:pages,roles,ids,classes …

First Example

Dreamweaver's Design View

Hover over elements to display jQuery Mobile blue smart tags for selecting and editing

First Example

Dreamweaver's Live View

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.

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

External Pages within web app jQuery Mobile will ignore all content not contained

within HTML elements identified as data-role="page"

<body><p>some random content</p><div data-role="page"> <p>This content is in an external page</p></div></body>

This p will be ignored,

not diplayedbecause it is

not inside "page"

Page Transitionsdata-transition='value' in anchor tag

Transition Description

fade Fades in the next page over the current one

flip Flips the next page over from under the current one

pop The next page springs into view

slide The next page slides in from the side

slidedown The next page slides in from the top

slideup The next page slides in from the bottom

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"

Dreamweaver's Insert Panel

Has category jQuery Mobile Not comprehensive Includes dialogs for each

control as you add it to set properties easily

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"

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>

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"

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

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 an external 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

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)

Useful Navbar Classes ui-btnClass Description

ui-btn this is required class, style as a button

ui-btn-[a-z] color scheme

ui-btn-active set as active/selected btnuseful to identify current page in navbar

ui-state-persist restore the active state each time the page is shown

ui-btn-inline display btn inline

ui-btn-[top, right, left, bottom]

icon position relative to button text

ui-btn-icon-nottext suppress btn text resulting in a circular btn

use

togeth

er

Useful Navbar Classes ui-iconClass Description

ui-icon-[plus, minus] + or - icon

ui-icon-arrow-[l, r, u, d] left, right,up down arrow

ui-icon-home house icon

ui-icon-star start icon

ui-icon-search magnifying glass icon

ui-icon-grid 3 x 3 grid

ui-icon-gear gear icon

ui-icon-check checkmark icon

Navigation Bar code example

<header data-role="header"><h1>Header Bar</h1><nav data-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>

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

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

<div class="ui-content">

<h2>Unordered List Example</h2>

<ul data-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>

Listview code example

Listview with 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="#"><img src='images/us.png' class='ui-li-icon'/> United States </a></li>

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 atttributedata-filter-placeholder="placeholdertext"

<div class="ui-content">

<h2>Unordered List Example</h2>

<ul data-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>

Listview Data Filtercode example

Listview RichContent Example

This list includes:1. LI list-divider for the

Date2. 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 Summaryc. P Time Due

assigned class="ul-li-aside"

d. P Item Details

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

Collapsible Blocks (cont.) Assign attribute data-

role="collapsible" to a container element, like a DIV

Default to open by adding attributedata-collapsed="false"

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

Collapsible Contentcode example (1 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>

Collapsible Contentcode example (2 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>

Collapsible Contentcode example (3 of 3)

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"

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

Collapsible Setpartial code example

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

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

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

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

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

data-theme="a" data-theme="b"

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

ThemeRoller Letters indicated

by tabs Edit a and b if you

want Customize c

theme Use + button to

add more themes

ThemeRoller-links in HEAD<link rel="stylesheet" href="themes/mytheme.min.css" />

<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />

<link rel="stylesheet" href="../jquery.mobile-1.4.2/jquery.mobile.structure-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>