This blog post introduces the new jQuery Mobile Metro theme and demonstrates how to create a web UI that detects the device it is being viewed on, to render a Metro UI on WP7 and iOS on other devices:
Apologies for the terrible video quality, I really am going to have to work out how to do this properly one day!
You can view the mobile web site shown above on your own device from here. Note, on a WP7 device, set your IE to render the 'mobile version' of websites to see the Metro theme.
A couple of weeks ago Microsoft announced the formation of Microsoft Open Technologies Inc. which will contribute to open source projects, standards and interoperability. For Windows Phone 7 developers, where the mobile OS market is highly fragmented, any efforts to push standards and interoperability are a very good thing. The first project backed by the Open Tech interop team was Apache Cordova (PhoneGap) allowing you to run HTML5 applications on your WP7, as covered in one of my previous blog posts. A few days ago, the team announced another release, jQuery Mobile (jQM) Metro. In this blog post we'll take a look at what jQM is and how it helps you build HTML5-based mobile applications.
If you look at the jQM website you will find that the interface quite closely mimics the iOS look and feel. A couple of months ago the jQM team announced WP7 support, however, this release simply allowed the iOS-style interface to render on a WP7 device.
The more recent release from MS Open Tech allows you to use jQM to produce Metro interfaces using HTML5. This makes use of the pre-existing jQM theme support, and as a result, you can use the same markup for both iOS and Metro themed UIs, with only a change in stylesheet being required.
The jQM Metro Theme is not an official part of jQM yet and is currently available via its own github page. I anticipate that it will make its way into the core jQM shortly. In the current release you will also see quite a few references to Apache Cordova (previously called PhoneGap), it is worth mentioning that Cordova and jQM are quite independent frameworks. Cordova provides a mechanism for deploying HTML5 applications within a native wrapper (see my previous blog post), and does not require you to use jQM - in fact you can use any UI framework your please (or roll your own).
This blog post will provide a brief introduction to jQM, demonstrating how you can create a mobile website that detects the mobile browser being used, delivering a Metro UI to WP7 devices and iOS to others. I will not be using Cordova for this example, just to keep it simple!
Introducing jQuery Mobile
The easiest way to understand jQM is via a simple example, a page with a heading and one line of text:
You can see in the above HTML the following elements:
- The jQM CSS file
- Some HTML content that is 'annotated' using data-role attributes.
Loading this into the browser (and shrinking it to a mobile-esque size) yields the following:
Which is a pretty decent replica of a native iOS UI, complete with gradients, button states and other chrome.
That's quite a lot of extra HTML! What's all this extra junk doing in my page?
This is a bit of a shame really. The way that jQM 'enhances' your HTML can cause problems when trying to integrate with other frameworks such as KnockoutJS which dynamically insert elements into the DOM.
jQM has a wide range of built in styles covering all the common mobile controls. For creating mobile UIs, jQM is a massive time saver. I really wouldn't want to write (and test) all this CSS myself!
We've seen how to build a simple iOS style mobile UI, but what about this new Metro theme? To use it, simply change the CSS to reference the Metro theme:
I've also explicitly targeted the 'dark' theme by adding the following attribute to the page:
(Without this, the UI doesn't quite look right, I think this is a bug ... I'll raise a ticket on github shortly).
With this simple change our UI is now Metro:
The above page uses the WP7 Segoe font, has a lower caps title, is authentically digital, favours content over chrome ... etc ... isn't it lovely?
Building UIs with jQM is really quite simple, your markup is simple and clean, annotated with the various
data- attributes. The jQM framework is really quite expansive, providing pretty much everything you might need for a standard mobile application.
For the rest of this article we'll look at building a more complex example, that dynamically picks the theme based on the device viewing it.
I'll re-use the data I collected for my SandwichFlow application to create a HTML5-based webpage where you can browse sandwich recipes. The index page is simply a list of sandwiches, sorted alphabetically:
The above code uses a list-divider, which renders as follows with the iOS theme:
Whereas, with the metro theme, it gives the appearance of a jump list:
Sadly the list isn't a real jump list, those buttons aren't clickable. Perhaps the jQM Metro team might be interested in the HTML5 jump list I wrote a while back?
Automatically Choosing a Theme
What I'd like to do is deliver an interface that is appropriate for the device it is being viewed on, so this means the Metro theme on a WP7 device and the iOS theme on others (sorry Android!). We can detect a WP7 device via the user agent string:
The web page will include both CSS files, with the Metro theme being included as an alternate:
My previous SandwichFlow application was written using Silverlight and contained an XML file with the various recipes. To re-use this within a jQM application I need to turn each recipe into an individual HTML file. Now, I am not keen on doing this sort of thing manually, so I wrote a T4 template that reads this XML file, and spits out an HTML file for each recipe:
The above code uses a few T4 'tricks' I developed in an earlier article, including code that creates multiple output files from the T4 template and also automatically adds these files to the Visual Studio project.
An example recipe is shown below:
Now there isn't really a suitable jQM UI for the ingredients list, so I styled these directly:
You'll also notice that this page has a back-button. This is required because iPhones do not have a hardware back button. However, if we re-use this same UI in our WP7 version, even with a Metro theme, it will look quite wrong. A simple bit of jQuery is all that is required to remove these buttons when viewing with a WP7:
The above code isn't quite as simple as you might expect. Firstly, as mentioned previously jQM uses AJAX to load pages, so a jQuery
live() function is used to match new DOM elements as they are added. We are handling the jQM
pagecreate event which fires when the AJAXed page is initially added to the DOM but before the additional structure has been added, the code that is executed simply removes back linking anchor tags.
The resulting WP7 UI is as follows:
It's great to see that Microsoft are not only backing HTML5 for their browsers (on the desktop and WP7) but are also working with the open source community on projects that make cross-browser and cross-platform development easier.
I am still in two minds about jQM, on the plus side, it does remove the need to write and test bucketloads of CSS and is very simple to use. However, there are some negatives ...
The jQM UI looks almost identical to the native iOS on static screenshots, but the dynamic behaviour is nowhere near the native experience, for example the iOS slide transition is surprisingly complex, with at least five separate animation components. The jQM Metro theme is also lacking in the fluid aspects of the WP7 UI, this is most likely due to the lack of touch events and 3D CSS transforms on WP7. Ironically, iOS and Android phones are actually more capable of mimicking the Metro theme as demonstrated by Microsoft's HTML5-based Metro demo for iOS and Android owners. Also, other key controls which define the Metro UI, such as Pivot and Panorama are absent from jQM Metro. These controls do lend themselves to HTML5 implementations, as demonstrated by jq-metro - hopefully this sort fo control will also find its way into jQM Metro. Finally, I couldn't finish an article on HTML5-based WP7 applications without mentioning the 'gray shading' of clicked links which spoils jQM Metro just as much as it has all my previous HTML5 based applications ;-)
Ending on a positive note, I am sure that these issues will be resolved in time, and I do like the simplicity of jQM. If you want to rapidly create a simple mobile website or HTML5 mobile application that looks great, jQM is an excellent choice.
You can download the HTML / JS for this article here: SandwichFlowjQM.zip
Regards, Colin E.