×
Namespaces

Variants
Actions
Revision as of 10:08, 25 July 2012 by manikantan (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

JQueryMobile for Windows Phone

From Nokia Developer Wiki
Jump to: navigation, search


This article explains how to use JQueryMobile to develop applications with Metro 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

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: ()
Last edited: manikantan (25 Jul 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 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

Jquery-mobile-devices-beta.png


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.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. 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 electronice 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 u show the page title and app name ( in comparison with native silverlight kit). Any h1 tag inside the header makes the Page Title.

- 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.

Simple Interaction

- On Button Click - On Select Change 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.

Additional setup

- Date Picker & Theme Picker These 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

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.

753 page views in the last 30 days.
×