Total votes: 0
Print: Print Article
Please login to rate or to leave a comment.
Published: 29 Feb 2012
Brian Mains discusses the jQuery Mobile framework for developing user interfaces for mobile devices.
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
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.
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