×
Namespaces

Variants
Actions
(Difference between revisions)

JQueryMobile for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search
manikantan (Talk | contribs)
m (Manikantan -)
hamishwillee (Talk | contribs)
m (Hamishwillee - Fix categories)
 
(16 intermediate revisions by 4 users not shown)
Line 1: Line 1:
[[Category:Code Snippet]][[Category:Web]][[Category:Windows Phone]]
+
[[Category:Web Apps on Windows Phone]][[Category:UI on Windows Phone]][[Category:JavaScript]][[Category:Code Snippet]][[Category:Windows Phone 7.5]]
{{Abstract|This article explains how to use JQueryMobile to develop applications with Metro experience. Targeted at web developers who want to build mobile apps }}  
+
{{Abstract|This article explains how to use [http://www.jquerymobile.com/ JQueryMobile] to develop applications with Metro user experience. Targeted at web developers who want to build mobile apps. }}
  
''Enter article metadata as described below. Note that this template can be placed anywhere in the article. Do not remove parameters that you do not use''
 
 
{{ArticleMetaData <!-- v1.2 -->
 
{{ArticleMetaData <!-- v1.2 -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
 
|sourcecode= <!-- Link to example source code e.g. [[Media:The Code Example ZIP.zip]] -->
Line 8: Line 7:
 
|devices= Lumia 800
 
|devices= Lumia 800
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
 
|sdk= <!-- SDK(s) built and tested against (e.g. [http://linktosdkdownload/ Qt SDK 1.1.4]) -->
|platform= Windows Phone, HTML5
+
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->
|devicecompatability= <!-- Compatible devices e.g.: All* (must have internal GPS) -->
+
|signing= <!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
|dependencies= <!-- Any other/external dependencies e.g.: Google Maps Api v1.0 -->  
+
|signing=<!-- Signing requirements - empty or one of: Self-Signed, DevCert, Manufacturer -->
+
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
 
|capabilities= <!-- Capabilities required by the article/code example (e.g. Location, NetworkServices. -->
|keywords=  JQueryMobile, Web, HTML5
 
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|language= <!-- Language category code for non-English topics - e.g. Lang-Chinese -->
 
|translated-by= <!-- [[User:XXXX]] -->
 
|translated-by= <!-- [[User:XXXX]] -->
|translated-from-title= <!-- Title only -->  
+
|translated-from-title= <!-- Title only -->
 
|translated-from-id= <!-- Id of translated revision -->
 
|translated-from-id= <!-- Id of translated revision -->
|review-by=<!-- After re-review: [[User:username]] -->
+
|review-by= <!-- After re-review: [[User:username]] -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|review-timestamp= <!-- After re-review: YYYYMMDD -->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-by= <!-- After significant update: [[User:username]]-->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
 
|update-timestamp= <!-- After significant update: YYYYMMDD -->
|creationdate= <!-- Format 20120725 -->
+
|creationdate= 20120725
|author= <!-- Display as link [[User:manikantan]] -->
+
|author= [[User:manikantan]]
 
}}
 
}}
  
Line 33: Line 29:
 
==What is JqueryMobile==
 
==What is JqueryMobile==
  
[http://www.jquerymobile.com 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 graceful degradation on lower performant browsers. Since it is browser based, the 'write less, do more' 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
+
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
  
 
[[File:Jquery-mobile-devices-beta.png]]
 
[[File:Jquery-mobile-devices-beta.png]]
Line 39: Line 35:
  
  
==JqueryMobile Theme for WP, download==
+
==JQueryMobile Theme for WP, download==
  
Focussing 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.[http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx 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  [http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html here]
+
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.[http://blogs.msdn.com/b/interoperability/archive/2012/04/26/more-news-from-ms-open-tech-announcing-the-open-source-metro-style-theme.aspx 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  [http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html here]
 
These are some images from the project itself,
 
These are some images from the project itself,
  
<gallery>
+
<gallery widths=250px heights=400px>
 
File:demo.png|1
 
File:demo.png|1
 
File:demo2.png|2
 
File:demo2.png|2
Line 51: Line 47:
 
==Basics and setup==
 
==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 electronice store that sells smartphones.
+
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.
 
Any webpage is built upon divs. Similarly divs form the building blocks in our case too.
 
* Page
 
* 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 u show the page title and app name ( in comparison with native silverlight kit). Any h1 tag inside the header makes the Page Title.  
+
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.  
  
<code>
+
<code xml>
 
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
 
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
 
<div data-role="header" data-theme="a">
 
<div data-role="header" data-theme="a">
Line 75: Line 71:
 
This is our overall UI (inside BODY tag).
 
This is our overall UI (inside BODY tag).
  
<code>
+
<code html4strict>
 
<body>
 
<body>
 
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
 
<div data-role="page" class="type-interior" data-theme="a" data-position="fixed">
Line 135: Line 131:
 
==Simple Interaction==
 
==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.
 
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.
<code>
+
<code xml>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
         $(document).ready(function() {
 
         $(document).ready(function() {
Line 153: Line 149:
 
To give you a complete picture, here is the full code of my page.
 
To give you a complete picture, here is the full code of my page.
  
<code>
+
<code xml>
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Line 251: Line 247:
 
The HTML page above is hosted [http://tinyurl.com/jqmwp here]. Below is a screenshot.
 
The HTML page above is hosted [http://tinyurl.com/jqmwp here]. Below is a screenshot.
  
[[File:Ss.png]]
+
[[File:Ss.png|250px]]
  
 
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.
 
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 ==
 
==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
+
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[http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html demo] of the JQueryMobile theme for Metro
+
Here is another [http://sgrebnov.github.com/jqmobile-metro-theme/samples/jqm-public-demo/index.html demo] of the JQueryMobile theme for Metro - from the project owner himself.
  
 
==Conclusion==
 
==Conclusion==
Line 263: Line 259:
  
 
Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.
 
Note: JQueryMobile images are borrowed from their official website, and I claim no ownership of these.
 +
<!-- Translation --> [[zh-hans:在Windows Phone中使用JQueryMobile]]

Latest revision as of 08:13, 19 July 2013

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 7.5
Article
Created: manikantan (25 Jul 2012)
Last edited: hamishwillee (19 Jul 2013)

Contents

[edit] 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.


[edit] 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


[edit] 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,

[edit] 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>

[edit] 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>

[edit] 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>

[edit] 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.

[edit] 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.

[edit] 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.

This page was last modified on 19 July 2013, at 08:13.
800 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.

×