jquery mobile " … do even more" building cross-platform mobile apps
TRANSCRIPT
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>