Mobile Theme for Graffiti
Yesterday I was on Graffiti forums to report a few issues and send some suggestions for development team. There I found a forum thread where Brendon Schwartz had a question about mobile views of pages and Scott Watermasysk had left him a reply with some insights about a simple way to accomplish that.
That was a an interesting idea for me, too. Before migrating to Graffiti I had some thoughts to create a mobile version of my blog for Community Server but couldn't find time to work on it. Seeing Scott's reply encouraged me to revisit this idea and spend some time on it.
Now my site has a mobile view for portable devices and here before reading a chapter of a book and then going to bed, I write the story on how could I implement it!
Introduction
Writing ASP.NET mobile applications is something that has been enhanced since ASP.NET 2.0 came out. This process needs its own techniques and uses some features introduced in ASP.NET 2.0.
Graffiti is an ASP.NET 2.0 powered CMS which doesn't have built-in features for better rendering on mobile devices. However, there are some techniques that you can inspire from ASP.NET and Graffiti features to bring mobile rendering to Graffiti sites.
Most likely the biggest concern for Graffiti users is to display appropriate output to their visitors when they view the site via portable devices.
There is a simple and straightforward way to accomplish this and I'll describe it here but in a nutshell it consists of these steps:
- Write a Graffiti plug-in to select a mobile theme for visitors that visit the site on a mobile device.
- Design a mobile theme to show to mobile visitors.
- Add appropriate browser files to Graffiti in order to handle requests from different mobile devices.
Plug-In to Select Mobile Theme
Obviously we need a way to change the default site theme for mobile visitors on fly. The best way to do this in Graffiti is via a plug-in. Scott has pointed this shortly but I describe it in details.
When a new request comes to Graffiti we need to check if it's from a mobile device then change the theme for that request via Graffiti API.
So I wrote a Graffiti plug-in that is very simple and does this for you. The source code for this plug-in is shown below.
using System;
using System.Collections.Generic;
using System.Text;
using Graffiti.Core;
using System.Web;
namespace Graffiti.MobileTheme
{
public class ThemeSelector : GraffitiEvent
{
public override string Name
{
get
{
return "Mobile Theme Selector";
}
}
public override string Description
{
get
{
return
"Plug-in to redirect all requests from mobile devices to mobile theme. " +
"Done by <a href='http://nayyeri.net'>Keyvan Nayyeri</a>";
}
}
public override bool IsEditable
{
get
{
return false;
}
}
public override void Init(GraffitiApplication ga)
{
ga.BeginRequest += new EventHandler(ga_BeginRequest);
}
void ga_BeginRequest(object sender, EventArgs e)
{
try
{
if ((HttpContext.Current.Request.UserAgent.IndexOf("IEMobile") > -1) ||
(HttpContext.Current.Request.Browser.IsMobileDevice))
{
GraffitiContext.Current.Theme = "Mobile";
Log.Info("Mobile Theme Selector Plug-in",
string.Format
("Mobile Theme Selector redirected a request to mobile theme. " +
"User agent was {0}.",
HttpContext.Current.Request.UserAgent));
}
}
catch (Exception ex)
{
Log.Error("Mobile Theme Selector Plug-in", ex.Message);
}
}
}
}
I override Init method here in order to add my own event handler for BeginRequest event. In this event handler I check the current request to see if it's from Internet Explorer Mobile Edition or is generally from a mobile device. Since I'm a Windows Mobile user and fan, considered it as a separate case in order to make sure this plug-in handles all requests from Windows Mobile devices. But for other mobile devices you need to provide appropriate ASP.NET browser definition files for Graffiti as I'll describe later in this post.
If plug-in considers the request from a mobile device then sets the name of the GraffitiContext.Current.Theme property to the name of the mobile theme and this is everything necessary to change the theme. After this, the client views the site with this particular theme. I also provided some logging features to see what's happening behind the scene for the requests.
Here pointing something is necessary and that is about different kinds of mobile devices with different properties and resolutions. You may want to handle different mobile devices with different themes that have appropriate properties. In this case you need to extend my plug-in with more conditional cases to handle common devices with their appropriate themes. But generally the technique and API is constant.
Mobile Theme
The other obvious step is to create a mobile theme for your site. This should be easy because Chalk (the Graffiti theme engine) is easy to use and you just need to create the mobile theme in the similar way you have to do it for other themes.
But as you probably know, you need to take care about some stuff like the width of the page, the size of the HTML source and of course, the number of images used in the theme. Since this is something unrelated to Graffiti and something wider than this topic I ignore its discussion here.
I wrote a very simple theme without any image for my site. My recommendation is to only list the title of recent posts in the homepage and provide links to their body in order to have a light and simple homepage. This is what I did and just tried to have a small size theme.
ASP.NET Browser Definition Files
You saw that I used HttpContext.Current.Request.Browser.IsMobileDevice from ASP.NET in order to check if the request is from a mobile device (my code handles requests from IE mobile edition in all cases). If you know ASP.NET in some detail, should know that it find properties of browsers via browser definition files to get information about different devices.
As a sidebar note for those who don't know about this topic I have to point that browser definition files are some XML files that define a browser with its properties, capabilities and features. These files have a .browser extension and you can put them in App_Browser folder of your ASP.NET 2.0 or 3.5 applications. App_Browser is a special ASP.NET folder which means that .NET Framework considers this folder as a special folder and always looks for browser definition files in it and loads them for your web applications.
ASP.NET has a list of many common browsers and their appropriate browser definition files that should be available at "<windir>\Microsoft.NET\Framework\<ver>\CONFIG\Browsers". Even though these files cover many common browsers but for newer versions or special browsers you need to find appropriate files or write your own.
As long as you have an appropriate .browser file on your server for a mobile device, ASP.NET can consider it as a mobile device and set HttpContext.Current.Request.Browser.IsMobileDevice property to true otherwise you would expect it to be considered as a normal web browser.
Aside this, you can also write your own code to parse the user agent string for common mobile browsers and handle requests from them. This is what I did for IE mobile in my plug-in.
Download
You can download the source code and binary for my plug-in as well as my mobile theme for Graffiti and use them for your own.
[advertisement] Axosoft OnTime 2008 is four developer tools in one: bug tracking, project wiki, feature management, and help desk. It manages your development process so developers can focus on coding. Installed or Hosted – Free Single-user license -- Free 30-day team trial.
3 Comments : 12.30.07
Feedbacks
Thank you, Brendon :-)
Today, 28th June 2008,  is the third birthday anniversary of my site and blog, Nayyeri.NET! It’s
#1
Brendon Schwartz
12.31.2007 @ 11:52 AM
Great post, thanks for getting this done!