Friday, August 26, 2011
Having a mobile version of your site is quickly become a requirement, not an optional request. Being able write a project once and display your information on multiple platforms is the quest of all developers these days. There are a lot of frameworks and development platforms that promise the developer they can do just that. Some work, some don’t, but in my mind the most promising is HTML5 applications.
After finishing up a nice new MVC site I want to look at a mobile version. I came across a new (in beta) framework called jQueryMobile. One of the attractions of this framework is that they utilize HTML5 markup, and have a pretty impressive support matrix.
So armed with my MVC project I downloaded jQueryMobile and began my quest for a cross mobile site.
First we want to start a new empty MVC 3 Project, be sure to select the Razor engine and check the “Use HTML5 sematic markup”
While you can find jQueryMobile in the Library Packet Manager, it seems to be an old version, so I suggest heading over to http://jquerymobile.com/download/ and getting the latest. Also note that your new MVC project will come with jQuery (v. 1.5.1 as of this writing) you may want to grab the latest or simple use your favorite CDN.
You will need to hook up to a database; I am using the venerable Northwind sample database with the Entity Framework. You can use your favorite ORM and data.
Now that you have your project with the latest jQuery, jQueryMobile, and some data it’s a good time to run the project to make sure everything is working. It won’t be very interesting now, but it’s always a good to make sure you start with something that is working.
The first thing we need to do is setup the _Layout page to utilize the jQueryMobile markup.
You can see that one of the first things we have to do is define a meta tag. This tag lets the browser know how to display the zoom level and dimension. In its absence most mobile browsers will display a page around 900 pixels wide. By including this meta tag the width will be set to the width of the device screen.
After the meta tag we reference the style sheets and frameworks. They are specific at jQueryMobile on the order which these are loaded. The style sheet frist, then jQuery, then jQueryMobile framework.
When we look at the body we can see that it is using HTML5 sematic markup. jQueryMobile is designed to utilize HTML5, and handle degradation automatically. They have a device/browser support matrix on their site for more information on that topic. The first item inside the body is the div decorated with the attributes data-role="page" id="@ViewBag.PageID" class="@ViewBag.PageClass". The data-role is a standard HTML5 decoration, but the id and class will be used by jQueryMobile. To help in the AJAX navigation they recommend that each page has a unique id (more on that later).
Inside the body we have three more divs with HTML5 data-roles; header, content, and footer. These are pretty much standard HTML5 div tags, but inside each div we use MVC’s render section/body. In this example I have a static footer, but it could utilize a render section if desired.
With our layout page done we can turn our attention to creating our first view. I won’t go over creating a controller and grabbing your data, since there is no difference between standard MVC projects and this “mobile” version. We are more interested in how to use jQueryMobile to display our data. So, create your controller, and create a blank view. Since I am going to display a list of employees I created my view strongly typed as the Employees model.