Sueetie Going Mobile Series: BlogEngine.NET

This is the second post in the Sueetie Going Mobile Series describing how it was possible to create a mobile version of the Sueetie Online Community and its applications. This post focuses on BlogEngine.NET, whose developers led the way with a mobile architecture that existed long before the iPhone came on to the scene and upon which the Sueetie Mobile architecture was based. The original source of this post is located in the Sueetie Wiki Patterns and Origins area.

_______________

BlogEngine.NET Leading the Way

The forward-thinking developers of the BlogEngine.NET Core Team have been thinking about mobile access for years, far earlier than devices like the iPhone made mobile offerings a requirement for any serious online application. The Sueetie mobile architecture was based on BlogEngine.NET’s implementation which is described here.

Dynamic Theming and the Browser User Agent

To understand BlogEngine.NET’s mobile architecture is to understand Sueetie’s, since Sueetie is patterned after it. BlogEngine.NET does a Regex.IsMatch() on an app.config MobileDevices string against the browser User Agent. If there is a match, then BlogEngine’s mobile theme (default "mobile") is used. If not, the currently selected browser. Here’s the core of that logic in BlogEngine.Core.Utils.cs.

private static readonly Regex MOBILE_REGEX = 
       new Regex(ConfigurationManager.AppSettings.Get("BlogEngine.MobileDevices"), 
       RegexOptions.IgnoreCase | RegexOptions.Compiled);
....

public static bool IsMobile
{
   get
   {
      ....
      if (!string.IsNullOrEmpty(request.UserAgent) && 
	        MOBILE_REGEX.IsMatch(request.UserAgent))
            return true;
      }
      return false;
   }
}

The BlogEngine.NET app.config MobileDevices property looks like this.

<add key="BlogEngine.MobileDevices" 
   value="(android|iphone|ipod|nokia|sonyericsson|blackberry|
        samsung|sec\-|windows ce|motorola|mot\-|up.b|midp\-)"/>

So whenever the current theme is requested in BlogEngine.NET with BlogSettings.Instance.Theme, the BlogSettings Theme property inspects if the device is currently a mobile one and load the standard or mobile theme accordingly. Something to the effect of:

if (Utils.IsMobile && !string.IsNullOrEmpty(MobileTheme))
	return MobileTheme;
else
	return configuredTheme;

Mobile Theme a First Class Citizen

As you can see from the screenshot below, the BlogEngine.NET mobile theme (and Sueetie Chiclet mobile theme) are first class citizens in BlogEngine.NET, as the Chiclet mobile theme is in all Sueetie applications. BlogEngine.NET serves up its mobile theme as it would the current standard theme. Again, this is the same throughout Sueetie.

Image

It Takes Two to Form a Mobile Village

It takes two themes to form a mobile online community (or village, as Hillary would say), and in BlogEngine.NET you select a mobile theme as one of the application’s settings. So just like BlogEngine.NET has a standard and mobile theme administrative setting, so does Sueetie.

Image

Image

Article written by

A long time developer, I was an early adopter of Linux in the mid-90's for a few years until I entered corporate environments and worked with Microsoft technologies like ASP, then .NET. In 2008 I released Sueetie, an Online Community Platform built in .NET. In late 2012 I returned to my Linux roots and locked in on Java development. Much of my work is available on GitHub.