In other languages

Namespaces

Variants

Views

Actions

Search

Contents

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

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

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,

1

2

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.

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.

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.

Preview

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.