Published: 29 Feb 2012
By: Brian Mains

Brian Mains discusses the jQuery Mobile framework for developing user interfaces for mobile devices.

Contents [hide]

Introduction

The world of mobile development has become revolutionized by the advent of various mobile development frameworks. As smart phones or smart devices become more prevalent, mobile development becomes another key to reaching a larger demographic to communicate an idea, sell a product, network with other individuals, etc. This is a huge potential for developers, but also a huge challenge as the number of mobile devices and platforms increase. Android, iOS, Windows Phone, Blackberry, WebOS, and other platforms each have varying requirements that add difficulty to developing code. In addition to developing mobile applications, users may also browse to your web application using a mobile browser, which doesn't have the real estate capabilities as its desktop brethren. Smaller real estate can also bring new challenges to the web.

There have been great improvements from open source and third party products, as well as from the advancement of HTML 5 and CSS 3. For instance, in the realm of web development, reactive web designs can use CSS 3 techniques to cause the application to scale for differing screen sizes, still utilizing one code base (although implementation for complex applications can become trickier). Instead of handling these techniques manually, frameworks like jQuery Mobile are intended to create one set of HTML transformed to work on a variety of mobile browsers.

For developing mobile applications, various frameworks like PhoneGap and Rho Mobile use HTML 5 and CSS to create an interactive UI. These frameworks wrap around the native browser control and essentially browse through the HTML that is your application. Other products (like Appcelerator Titanium) use HTML 5, but instead natively compile the source code to build each environment natively.

As we continue to understand the mobile market, we can also see how jQuery Mobile can be used to support both types of mobile application development. In a web application, jQuery Mobile can operate the entire web application, or simply provide a mobile view of that application. For instance, ASP.NET MVC 4 incorporates mobile views into their site using jQuery Mobile (a Nuget package is readily available; more instructions available here: http://www.asp.net/mvc/tutorials/mvc-4/aspnet-mvc-4-mobile-features), by embedding ".mobile" in the view name. However, you certainly could use jQuery Mobile to structure the entire web application.

On the other end of the spectrum, PhoneGap is a mobile application development platform that can utilize jQuery Mobile for structuring your mobile application. PhoneGap relies on HTML 5 and CSS, utilizing each environment's native browser control. It even provides a PhoneGap build service to build your applications from the PhoneGap code-base. jQuery Mobile provides some guidance on using it within a PhoneGap application.

Understanding jQuery Mobile

In practice, jQuery Mobile acts very similar to the jQuery UI framework. jQuery defines a snippet of HTML that represents a widget for the user interface. jQuery Mobile uses CSS classes and HTML 5 data attributes to widgets in the page, and transforms it by applying additional HTML, CSS, and JavaScript functionality. jQuery Mobile has all kinds of widgets available to use within your user interface. We'll learn about them as we explore the framework in this series.

Downloading and Setting Up

jQuery Mobile can be downloaded from http://jQuerymobile.com (or alternatively from http://code.jQuery.com). Download the JS framework, and choose one of the many existing themes wrapped up into a CSS file. If you prefer to customize the theme, use the CSS roller utility that provides a simple UI to customize the CSS yourself. Obviously, jQuery Mobile has a dependency on the jQuery framework. In most of the samples, jQuery 1.6.4 was used.

Conventions

As I mentioned earlier, jQuery Mobile uses HTML 5 data attributes to identify certain functionality. The core attribute used by jQuery Mobile is the data-role attribute. The data-role attribute specifies the widget that the defined HTML structure will be. There are various types of roles available, which are page (the highest level container), button, listview, and more. Listing 1 contains a few samples of specifying the role.

Listing 1: Sample Data Roles

In some instances, the role defines the type of widget to setup. For instance, a collapsible panel, or a panel with a header and content panel, is one type of widget identified with a role of "collapsible". Each widget requires a specific template to render correctly, for instance, the collapsible template appears as in Listing 2.

Listing 2: Sample Content

It's important to know the structure of the widget; otherwise, an undesirable result may occur. Not only does jQuery Mobile use data attributes, on occasion the framework requires using a CSS class to identify certain behaviors. For instance, to make certain features active requires applying a CSS class of "ui-btn-active". Another example uses the "ui-btn-left" and "ui-btn-right" classes to align content to the left or right of the container. It's not important to understand the application of this now, but to understand how jQuery Mobile can use CSS classes.

Sample Page

A jQuery Mobile page is not a literal HTML page or a web page with a custom extension; a jQuery Mobile page is a container within an HTML page that defines a role of page (referred to throughout as a page widget). An HTML page can have one (a single page template) or more (multi-page template) page widgets in it. Listing 3 contains a sample page widget.

Listing 3: Sample jQuery Mobile Page

As we'll learn more about pages, a page widget is identified to jQuery Mobile by the data-role attribute. A page widget has a header, footer, and a content region. Each of these gets styles and targeted appropriately by jQuery Mobile. The H1 and H4 headers get styled appropriately within the header and footer. In addition, the hyperlink in the body becomes a button through some additional styling.

Conclusion

jQuery Mobile uses HTML 5 and CSS capabilities to provide stellar applications for both the web and mobile application development environments. jQuery mobile is one of many technologies aiming to achieve one web application supporting many application development environments. It uses attributes to identify roles of various HTML elements and transforms them into some specific piece of functionality.

<<  Previous Article Continue reading and see our next or previous articles Next Article >>

About Brian Mains

Brian Mains is an application developer consultant with Computer Aid Inc. He formerly worked with the Department of Public Welfare. In both places of business, he developed both windows and web applications, small and large, using the latest .NET technologies. In addition, he had spent many hou...

This author has published 73 articles on DotNetSlackers. View other articles or the complete profile here.

Other articles in this category


Code First Approach using Entity Framework 4.1, Inversion of Control, Unity Framework, Repository and Unit of Work Patterns, and MVC3 Razor View
A detailed introduction about the code first approach using Entity Framework 4.1, Inversion of Contr...
Exception Handling and .Net (A practical approach)
Error Handling has always been crucial for an application in a number of ways. It may affect the exe...
jQuery Mobile ListView
In this article, we're going to look at what JQuery Mobile uses to represent lists, and how capable ...
Book Review: SignalR: Real-time Application Development
A book review of SignalR by Simone.
JQuery Mobile Widgets Overview
An overview of widgets in jQuery Mobile.

You might also be interested in the following related blog posts


Introduction to HTML5 Development Using VS 2010, HTML5, jQuery Mobile and ASP.NET MVC 4 read more
Take Two: A jQuery WCF/ASMX ServiceProxy Client read more
Speaking at the Portland Area .NET User Group on Tuesday Sept 1st read more
Script# (Script Sharp) writing javascript in C# read more
CodeDigest.Com - Articles,FAQs, Codes, News - Aug,2009 read more
Using jQuery in SharePoint to Display Notifications for Open Tasks read more
Creating jQuery plug-ins from MicrosoftAjax components read more
Using jQuery Grid With ASP.NET MVC read more
jQuery and ASP.NET Article Posted read more
jQuery and ASP.NET Article Part 2 Posted read more
Top
 
 
 

Please login to rate or to leave a comment.