Recently, for a new franchise client of ours, we had to add some new features to our web-based point of sale system. This piece of software makes extensive use of touch screen functionality; we need to think about this when we design our UI. The interface must be optimized to allow cashiers to perform their operations effectively and intuitively with a touch screen. Our application isn’t traditionally used via a multi-touch interface like the iPhone or iPad; rather, operators use a traditional touch screen. In this project, we had to adapt existing pages and create completely new modules.
In the past, we had played with jQuery Mobile and we were really impressed. Take a look at the demo site – all you need to do is including a reference to jQuery Mobile’s JavaScript and follow some conventions with your HTML to get a nice mobile-friendly user interface. However, when you think about it, mobile-friendly (touch friendly) user interfaces are also very appropriate for traditional touch screen technologies utilized by the retail industry for over a decade.
Given our point of sale was initially created to be compatible with IE6 back in the day, we felt it was time to enhance the look and feel utilizing new technologies. We liked jQuery Mobile’s look & feel and wanted to utilize some bits & pieces, without having to re-implement everything following their conventions. When you peek at the jQuery Mobile source code on GitHub, you realize that each component is separated in it’s own little jQuery plugin. Some plugins are not completely independent from the jQM (jQuery Mobile) page, but you can use most of them outside of that context; you can thus use them in your own applications without a jQM page that takes 100% of the screen real estate. In a typical jQM scenario, you define a page and then jQM works it’s magic: it initializes all the controls for you - if you followed the conventions. In this post, we’ll cover using jQuery Mobile outside of the jQM page and mobile context.
How to trick jQuery Mobile
First, you simply have to trick jQM into thinking that there’s a jQM page in the HTML. To do that, you have to bind to a special jQM event, mobileinit. This is event is executed before any jQM code modifies your html:
$(document).bind("mobileinit", function ()
{
if ($('div[data-role=page]').length === 0)
$('<div data-role="page" id="pageTemp" style="display:none;"></div>').appendTo($('body'));
$.mobile.ajaxEnabled = false;
$('#pageTemp').live('pagebeforecreate', function (event)
{
return false;
});
})
Here you insert a jQM page in your html if one hasn’t already been defined. This is required for some controls to work (like the dropdown list, if I remember correctly). We then disable AJAX page fetching and also disable the 'pagebeforecreate' event for the newly created dummy page. Most of our pages utilize this placeholder (as we only use the UI controls), but we did – on a few occasions - utilize the standard jQM page in all its glory inside our point of sale.
If there’s a better way to do this, please let us know - with the current version of jQuery Mobile (1.0a4.1) it appears to be working pretty well.
The plugins we found most interesting were the one dealing with forms controls. You can see a gallery of all forms elements in jQuery Mobile here.
For example, some of the base HTML controls are not ideal in the context of a touch-enabled application. Take radio buttons, for example. They are way too small and hard to click on accurately - you have to manually change their styling via CSS to make them easy to touch. Here is the jQM version of radio button list:
Radio Button List
To create this, first you need a little bit HTML plus the checkboxradio plugin from jQuery Mobile:
<fieldset data-role="controlgroup">
<input type="radio" name="radio-choice-1" id="radio-choice-1" value="Cat">
<input type="radio" name="radio-choice-2" id="radio-choice-2" value="Dog">
<input type="radio" name="radio-choice-3" id="radio-choice-3" value="Hamster" checked="checked">
<input type="radio" name="radio-choice-4" id="radio-choice-4" value="Lizard">
</fieldset>
Basically the fieldset groups the radio input together and gives the rounded corners only to the top and bottom items.
Then you can add this JavaScript to your page:
$('input[type=checkbox], input[type=radio]').filter(function ()
{
return $(this).parent('.ui-checkbox').length == 0;
}).checkboxradio();
$("fieldset[data-role='controlgroup']").not('.ui-controlgroup').controlgroup();
This piece of JavaScript will select all checkboxes or radios inputs, filter the ones we already applied the plugin and then call checkboxradio() to change them to follow the jQuery Mobile style. We then use the controlgroup plugin to group the controls together visually. Once again we don’t re-apply this code to fieldsets that were changed previously, for efficiency reasons.
For an horizontal look, simply add data-style=”horizontal” to the fieldset grouping the elements. It is still a radio button list, but the layout is different.
You can even do the same thing with checkboxes:
Suddenly, your UI becomes much easier to use with a touchscreen.
Dropdown
Here is a dropdown list, in the jQuery Mobile style:
You simply execute the following JavaScript code:
$('select:not([multiple="multiple"])').selectmenu();
We had some problems with multi-selection lists, so that’s why we don’t automatically style those.
Buttons are pretty straightforward. In our application, we decided to automatically transform all of our buttons which utilize the CSS class ‘button’. This could be an input[type=button], input[type=submit], a simple link <a></a>. We’re using a mix of these in our application and modify them all like this:
$('.button').not('.ui-btn').button();
Above, the two buttons are inline (add the data-inline=”true” attribute to the HTML elements). The Save button has a different theme (specify data-theme=”b”)
You can also group buttons as above, by defining a horizontal controlgroup.
<div data-role="controlgroup" data-type=”horizontal”>
<a href="index.html" data-role="button">Yes</a>
<a href="index.html" data-role="button">No</a>
<a href="index.html" data-role="button">Maybe</a>
</div>
Working with controls
Visit this page to know operations you can do on your controls once they are modified by jQM: Form Plugin Methods. This reference is very useful if you want to enable/disable controls or refresh them with new values.
ASP.NET WebForms
If you are using ASP.NET WebForms as is our case, you want to run these plugins every time your page is modified. If you are using ASP.NET UpdatePanels, then you can bind a function to the following event handler where you could modify your controls each time an UpdatePanel is updated:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function()
{
// Add the jQuery Mobile code modifing controls here
});
Normally this job is done automatically by jQM, but since we are not using the controls inside a jQM page, we have to update the DOM manually after each postback.
Caveat
In its current form, jQuery Mobile is not compatible with Internet Explorer. Depending on the version of IE, it is easier completely unusable or doesn’t look as good (rounded corner issues). In our context (point of sale), we ended up utilizing Google Chrome Frame for our IE users – at least for the time being. The jQM team appears to be working towards full IE support for their beta release.
Future of jQuery Mobile
In conclusion, we loved working with jQuery Mobile once we figured out how to utilize bits & pieces of it individually. Currently, jQM focuses on development for mobile devices (which is normal) but we would be thrilled if they made integration into existing projects simpler. As this is an open source project, we weren’t afraid to peek at the code to figure out why it wasn’t working the way we intended it to. Let’s hope the project keeps on improving both its modularity and the desktop-based functionality. Thank you to the jQuery Mobile team, continue the great work!
