With the release of Windows Phone 7 last year, I’m really interested in mobile applications. Why? Well, developing for Windows Phone 7 did not require me to learn new things. I can use my current skill set and build cool apps for that platform. But what about the other platforms? If you look at all platforms from a web developer perspective, there’s one library that also allows you to use your existing skill set: jQuery Mobile.
Know HTML? Know jQuery? Know *any* web development language like PHP, RoR or ASP.NET (MVC)? Go ahead and build great looking mobile web apps!
I’ll give you a very short tutorial, just enough to sparkle some interest. After that, it’s up to you.
Getting jQuery Mobile running in ASP.NET MVC
This one is easy. Start a new project and strip out anything you don’t need. After that, modify your master page to something like this:
1 <%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
2
3 <!DOCTYPE html>
4 <html>
5 <head runat="server">
6 <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
7 <link href="../../Content/Site.css" rel="stylesheet" type="text/css" />
8
9 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
10 <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
11 <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
12 </head>
13
14 <body>
15 <asp:ContentPlaceHolder ID="MainContent" runat="server" />
16 </body>
17 </html>
18
That’s it: you download all resources from jQuery’s CDN. Optionally, you can also download and host jQuery Mobile on your own server.
Creating a first page
Pages have their own specifics. If you look at the docs, a page typically consists of a div element with a HTML5 data attribute “data-role” “page”. These data attributes are used for anything you would like to accomplish, which means your PC or device needs a HTML5 compatible browser to render jQuery Mobile content. Here’s a simple page (using ASP.NET MVC):
1 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RealDolmenMobile.Web.Models.ListPostsModel>" %>
2
3 <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
4 Page title
5 </asp:Content>
6
7 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8 <div data-role="page">
9
10 <div data-role="header">
11 <h1>Title here</h1>
12 </div>
13
14 <div data-role="content">
15 <p>Contents here</p>
16 </div>
17
18 <div data-role="footer">
19 <h4>Footer here</h4>
20 </div>
21 </div>
22 </asp:Content>
Building a RSS reader
I’ve been working on a simple sample which formats our RealDolmen blogs into jQuery Mobile UI. Using Argotic as the RSS back-end, this was quite easy to do. First of all, here’s a HomeController that creates a list of posts in a view model. MVC like you’re used to work with:
1 using System;
2 using System.Collections.Generic;
3 using System.Linq;
4 using System.Web;
5 using System.Web.Mvc;
6 using Argotic.Syndication;
7 using RealDolmenMobile.Web.Models;
8 using System.Web.Caching;
9
10 namespace RealDolmenMobile.Web.Controllers
11 {
12 [HandleError]
13 public class HomeController : Controller
14 {
15 private static readonly Uri Feed = new Uri("http://microsoft.realdolmenblogs.com/Syndication.axd");
16
17 public ActionResult Index()
18 {
19 // Create model
20 var model = new ListPostsModel();
21
22 GenericSyndicationFeed feed = GenericSyndicationFeed.Create(Feed);
23 foreach (GenericSyndicationItem item in feed.Items)
24 {
25 model.Posts.Add(new PostModel
26 {
27 Title = item.Title,
28 Body = item.Summary,
29 PublishedOn = item.PublishedOn
30 });
31 }
32
33 return View(model);
34 }
35 }
Next, we need to render this. Again, pure HTML goodness that you’re used working with:
1 <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<RealDolmenMobile.Web.Models.ListPostsModel>" %>
2
3 <asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
4 RealDolmen Blogs
5 </asp:Content>
6
7 <asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
8 <div data-role="page">
9
10 <div data-role="header">
11 <h1>RealDolmen Blogs</h1>
12 </div>
13
14 <div data-role="content">
15 <ul data-role="listview">
16 <li data-role="list-divider">Posts by employees<span class="ui-li-count"><%:Model.Posts.Count()%></span></li>
17 <%
18 foreach (var post in Model.Posts)
19 {
20 %>
21 <li>
22 <h3><%:Html.ActionLink(post.Title, "Post", new { title = post.Title })%></h3>
23 <p class="ui-li-aside">Published: <%:post.PublishedOn.ToString()%></p>
24 </li>
25 <%
26 }
27 %>
28 </ul>
29 </div>
30
31 <div data-role="footer">
32 <h4> </h4>
33 </div>
34 </div>
35 </asp:Content>
The result? Not very stunning when looked at with IE8… But fire up Chrome or any other HTML5 capable browser, and here’s what you get:
I’ve asked some people to check http://rd.cloudapp.net (may be offline by the time you read this), and I’ve received confirmation that it looks good on iSomething-devices, a Nokia and some Opera Mobile versions. Nice!
Goodies
The above example may not be that spectacular. The framework does hold some spectacular things! Think dialogs, forms, gestures, animations and a full-blown navigation framework that replaces any form or hyperlink with an AJAX call that is executed in the back-end, displays a nice “loading” screen and automatically generates a “back” button for you.
More examples? Check the manual itself over at http://jquerymobile.com/demos/1.0a2/docs/: this has been built using jQuery Mobile and looks nice!
Conclusion
It’s great! Really, I can just go ahead and build cool mobile web sites / web apps. Unfortunately, the WIndows-market of devices has bad support (due to a lack of HTML 5 support on their devices). This should get fixed in a coming upgrade, but untill then you will not have any luck running these apps on Windows Phone 7… For a complete list of compatible browsers and platforms, check the compatibility matrix.
For those interested, I’ve uploaded my small test app here: RealDolmenMobile.zip (420.38 kb) (note that I've built this as a Windows Azure solution)