×
Namespaces

Variants
Actions
Revision as of 06:00, 18 September 2012 by hamishwillee (Talk | contribs)

JQueryMobile for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to use JQueryMobile to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps.

WP Metro Icon UI.png
SignpostIcon WP7 70px.png
Article Metadata
Tested with
Devices(s): Lumia 800
Compatibility
Platform(s): Windows Phone, HTML5
Windows Phone 7.5
Article
Keywords: JQueryMobile, Web, HTML5
Created: manikantan (25 Jul 2012)
Last edited: hamishwillee (18 Sep 2012)

Contents

Introduction

This document aims to give a brief introduction into developing mobile websites or mobile webapps, particularly with a native look and feel. Since web developers are skilled in technologies of HTML, JS and CSS, this document will be easy to follow for them. Taking this route, web developers can create native applications that give a native feel & experience. To achieve the same, we use JqueryMobile.


What is JqueryMobile

JQueryMobile is an open mobile UI framework for web developers built on the foundation of JQuery UI. In fact, one can claim that this is the mobile version of JQuery UI. So what you get from download is a bunch of images, css and JS files, that together make UI components like buttons, checkboxs, form elements, navigation bars. JqueryMobile is highly customizable and lightweight. You can selectively import the components necessary for your web app, skin them according to your liking, animate or have page transitions. The general download of JQueryMobile gives us components that are skinned similar to iOS native components. Additionally, JQueryMobile provides graceful degradation on lower performant browsers. Since it is browser based, the 'write less, do more' philosophy applies and you can see it in action on your mobile, tablet and desktop or any device capable of rendering HTML5. The latest version as of the time of writing is version 1.1

Jquery-mobile-devices-beta.png


JQueryMobile Theme for WP, download

Focusing on Windows phones, Metro is the user interface that users are familiar with. Since, JQueryMobile by default doesn't provide this look or feel, we should download a CSS sheet available here.This project is supported by Microsoft with the motive to bring web developers onto its mobile platform. This theme is still in development, some native UI components like pivot or panorama, present in native Silverlight Toolkit, are absent at the time of this writing. Are you too eager, see the beauty of the project here These are some images from the project itself,

Basics and setup

I would encourage you to download this theme from the link in previous section. This download comes with samples having two HTML files for starters. Doing so, we have already included necessary JS, CSS and images and our basic skeleton is ready. In this example, we show how to create a simple order page for a electronic store that sells smartphones.

Any webpage is built upon divs. Similarly divs form the building blocks in our case too.

  • Page

A page will be the first element inside the body tag of our HTML page. A page has 3 subsections- header, content and footer. But how to mention to the webkit engine, that this is a page ? Use the data-role attribute to do so. The header is the heading for our Metro styled webpage. This is where you show the page title and app name ( in comparison with native silverlight kit). Any h1 tag inside the header becomes the Page Title.

<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
<span class="ui-app-title">Online Store</span>
<h1>Nokia Lumia range</h1>
</div><!-- /header -->
</div><!-- /page-->
  • Simple UI components

JQueryMobile provides elements like buttons, progress bars, sliders, textfields, drop down menus. Most of these share large similarities with their desktop counterparts. Just like pages, buttons too have data-role that mentions that it is a button.

  • TextFields

TextFields have no change. You can have password type fields etc. As of now, number type input fields are not supported. In iOS, this pops up the number-type virtual keyboard, but on WP this is not the observation.

This is our overall UI (inside BODY tag).

<body>
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
<span class="ui-app-title">Online Store</span>
<h1>Nokia Lumia range</h1>
</div><!-- /header -->
 
<div data-role="content" data-theme="a">
<div class="content-primary">
 
<label for="phoneSelect" class="select">Choose your Lumia</label>
<select name="phoneSelect" id="phoneSelect" data-native-menu="false">
<option>Click to choose</option>
<option value="900">Lumia 900</option>
<option value="800">Lumia 800</option>
<option value="710">Lumia 710</option>
<option value="610">Lumia 610</option>
</select>
</br>
</div>
<fieldset data-role="controlgroup">
<legend>Accesories</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked />
<label for="checkbox-1a">Charger</label>
 
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" checked />
<label for="checkbox-2a">Headset with MIC</label>
 
<input type="checkbox" name="checkbox-2a" id="checkbox-3a" />
<label for="checkbox-3a">Extra Batteries</label>
</fieldset>
 
<div id='cost'></div>
 
</br>
 
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" />
 
<label for="name">Address</label>
<input type="text" name="addr" id="addr" value="" />
 
<label for="name">Postal Code or PIN</label>
<input type="number" name="pin" id="pin" value="" />
 
</br>
 
<a href="#" data-role="button" data-inline="true" id="purchase">Purchase</a>
<div data-role='progress-bar' value='30' min='0' max='100' indeterminate='true' id="progressBar1" style="display:none"></div>
</div><!--/content-primary -->
 
</div><!-- /content -->
 
</div><!-- /page -->
</body>

Simple Interaction

Since JQueryMobile is built upon JQuery UI, the same method of coding goes. You can apply selectors using $, and attach event listeners to any changes or user action. In the code below, we change the price based on product selected. We show a progressbar when Purchase button is pressed.

<script type="text/javascript">
$(document).ready(function() {
$('#purchase').on('click', function () {
$('#progressBar1').show();
});
$('#phoneSelect').on('change', function () {
 
$('#cost').html("<h2>The total cost is " + $('#phoneSelect').val() + '$</h2>' );
 
});
});
</script>

Full Code

To give you a complete picture, here is the full code of my page.

<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>JQM for WP - Demo</title>
<link rel="stylesheet" href="css/metro/jquery.mobile.metro.theme.css"/>
<link href="css/progress-bar.css" rel="stylesheet" type="text/css" />
<style type="text/css">
 
 
</style>
 
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.mobile.js" type="text/javascript"></script>
<script src="css/metro/jquery.mobile.metro.theme.init.js" type="text/javascript"></script>
<script src="js/jquery.globalstylesheet.js" type="text/javascript"></script>
<script src="js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>
<script src="js/progress-bar.js" type="text/javascript"></script>
 
 
<script type="text/javascript">
$(document).ready(function() {
$('#purchase').on('click', function () {
$('#progressBar1').show();
});
$('#phoneSelect').on('change', function () {
 
$('#cost').html("<h2>The total cost is " + $('#phoneSelect').val() + '$</h2>' );
 
});
});
</script>
 
</head>
<body>
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
<div data-role="header" data-theme="a">
<span class="ui-app-title">Online Store</span>
<h1>Nokia Lumia range</h1>
</div><!-- /header -->
 
<div data-role="content" data-theme="a">
<div class="content-primary">
 
<label for="phoneSelect" class="select">Choose your Lumia</label>
<select name="phoneSelect" id="phoneSelect" data-native-menu="false">
<option>Click to choose</option>
<option value="900">Lumia 900</option>
<option value="800">Lumia 800</option>
<option value="710">Lumia 710</option>
<option value="610">Lumia 610</option>
</select>
</br>
</div>
<fieldset data-role="controlgroup">
<legend>Accesories</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a" checked />
<label for="checkbox-1a">Charger</label>
 
<input type="checkbox" name="checkbox-2a" id="checkbox-2a" checked />
<label for="checkbox-2a">Headset with MIC</label>
 
<input type="checkbox" name="checkbox-2a" id="checkbox-3a" />
<label for="checkbox-3a">Extra Batteries</label>
</fieldset>
 
<div id='cost'></div>
 
</br>
 
<label for="name">Name</label>
<input type="text" name="name" id="name" value="" />
 
<label for="name">Address</label>
<input type="text" name="addr" id="addr" value="" />
 
<label for="name">Postal Code or PIN</label>
<input type="number" name="pin" id="pin" value="" />
 
</br>
 
<a href="#" data-role="button" data-inline="true" id="purchase">Purchase</a>
<div data-role='progress-bar' value='30' min='0' max='100' indeterminate='true' id="progressBar1" style="display:none"></div>
</div><!--/content-primary -->
 
</div><!-- /content -->
 
</div><!-- /page -->
</body>
</html>

Preview

The HTML page above is hosted here. Below is a screenshot.

Ss.png

If you dig into the webpage, using tools like FireBug or Chrome Inspector, you see that JQueryMobile modifies the contents of our HTML to give this look and feel.

Miscellaneous

Date Picker & Theme Picker components are available only when run inside an app environment and not as a HTML page. For this ideally you will package your webpage into an application, using tools like Phonegap. Phonegap packages your webpages and makes it into a .xap file for the marketplace. Here is another demo of the JQueryMobile theme for Metro - from the project owner himself.

Conclusion

This is one of the early documents describing JQueryMobile for WP, targeted at web developers. Follow the project on GitHub for more information or updates.

Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.

699 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×