Two ways to develop applications for mobile platforms (ex. Android, iPhone, iPad):
Native Applications
Web Applications
With a little CSS and JavaScript magic, web apps can look much like native apps
Current popular mobile platforms use the WebKit browser rendering engine
The jQuery Mobile framework provides help for writing cross-platform web apps
Full-featured web browser based on WebKit rendering engine
Supports JavaScript, CSS, XMLHttpRequest
Supports Video and Audio
Relatively small display
Touch interface
"The finger is not a mouse"
Fingers are fat
Fingers can't hover (at least, not detectably)
User can magnify large web pages by double-tapping or pinching
Mobile browsers render web pages in a full-screen window called the “viewport”
Users must perform both horizontal and vertical scrolling when viewing normal websites, and do a lot of zooming in and out to read the text
A mobile-optimized web page uses a meta viewport tag like
this to indicate that it is designed to look good on a device with a
smaller screen (typically, 320px wide):
<meta name =
"viewport" content = "width=device-width">
This
sets the scale to the width of the device.
See http://www.quirksmode.org/mobile/viewports2.html for more on the viewport
The jQuery Mobile toolkit consists of a stylesheet, JavaScript, and image resources that help create mobile web applications that look like native apps
Supports a wide variety of mobile browsers, including the following platforms: iOS, Android, Windows Phone, Blackberry, Symbian, Kindle, Nook
Uses HTML5 custom data- attributes to mark up standard HTML content
When a page loads, jQuery Mobile JavaScript scans the page for data- attributes and enhances the page for mobile display
Basic structure:
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
</body>
</html>
|
The HTML 5 <!DOCTYPE html> header is important: it enables key features
Content can be organized using old-style <div> tags or new-style HTML 5 section, header, footer tags:
|
Using div tags |
Using new HTML 5 tags |
|---|---|
<div class="section" id="page1">
<div class="header"><h1>jQuery Mobile</h1></div>
<div class="content">
<p>First page!</p>
</div> <!-- content -->
<div class="footer"><h1>O'Reilly</h1></div>
</div> <!-- section -->
|
<section id="page1">
<header><h1>jQuery Mobile</h1></header>
<div class="content">
<p>First page!</p>
</div>
<footer><h1>O'Reilly</h1></footer>
</section>
|
Either way, the <div> or <section>/etc. tags must be annotated with data-role attributes, which jQM uses to identify the various content areas
Marked up with data-role, the body might look like this:
<section id="page1" data-role="page">
<header data-role="header"><h1>jQuery Mobile</h1></header>
<div class="content" data-role="content">
<p>First page!</p>
</div>
<footer data-role="footer"><h1>O'Reilly</h1></footer>
</section>
|
See JQM Demos
A jQM page usually contains a top-level tag marked with
data-role=”page”,
with children having data-roles of header, content, and
footer:
<div
data-role="page">
<div
data-role="header">...</div>
<div
data-role="content">...</div>
<div
data-role="footer">...</div>
</div>
Example: prog2/prototype/mobile_searchresult.html
A jQM page can contain multiple logical pages, by defining multiple sections marked with data-role=”page”.
jQM uses JavaScript to replace the standard link and form submission behavior with its own AJAX-style processing.
Three kinds of links in a jQM page:
Inline links
Example: <a href="#artists">Artists</a>
Inline links must use an id of top-level tag marked data-role=”page” in the same page.
When clicked, jQM will hide the current section and display the section of the page with the given id
Regular links
Example: <a href="http://code.google.com/p/iui/" data-ajax=”false”>About</a>
Links with data-ajax=”false” replace the current document via standard browser navigation
These links are like regular links on a web page
AJAX links
Example: <a href="stats.php">
discussed later
Forms work much like standard HTML forms
Each Form input field should be paired with a <label> element
Can use HTML5 input types for enhanced functionality
Use the data-ajax=”false” attribute on the <form> tag to get a normal form submission