Sueetie Going Mobile Series: ScrewTurn Wiki

This is the fifth and final Sueetie Going Mobile Series post and the fourth on a Sueetie Application. We covered BlogEngine.NET, Gallery Server Pro, YetAnotherForum.NET, and will close out the series here on the world’s first mobile version of ScrewTurn Wiki. The Sueetie Wiki document on which this post was based is located in the Sueetie Patterns and Origins area.

_______________

ScrewTurn Wiki Mobile: a bit of CSS and Theme Selection Modification

The mobilization of ScrewTurn was perhaps the most simple of any Sueetie Application (with the exception of BlogEngine.NET, which had mobile theming logic out of the box.) Other than some CSS work, our only task was to slightly modify how ScrewTurn.Wiki.Core loaded the current theme. Very simple.

A Bit of Background on ScrewTurn Wiki Theming

Let’s begin with some background on ScrewTurn Wiki Theming. ScrewTurn Wiki is configured in Sueetie to use its default file storage provider (as opposed to a SQL storage provider plug-in.) Wiki settings, including Theme selection, are stored in /wiki/public/config.cs. The current theme is retrieved with Provider.GetSetting(propertyName) where propertyName would be "Theme." Also note that in ScrewTurn Wiki 3.x each namespace can have its own theme, so namespace is included in the theme determination logic as well. Sueetie Mobile supports namespace-independent theming but assumes a single mobile theme is used for all namespaces.

ScrewTurn wiki themes are located in the wiki/themes directory.

Image

Master Page Independence

I use the term "theming independence" a lot when talking about Sueetie theming because it’s important and because it’s no small accomplishment when talking about a shared theming model for five discrete applications. An important factor in designing that independent theming model is to mirror the application’s existing theming logic as much as possible. For Master Files we typically use some variant of an /APP/Masters/THEME/*.master approach, but with ScrewTurn Wiki we distinguish master files by their theme name because ScrewTurn’s Master Page CodeBehind is very logic-intensive, quite a bit more intensive than other Sueetie applications. Keeping master pages in the root reduces modification of the .master.cs codebehind for resource paths and links. As a result, each theme uses its own THEMENAME master file. Lollipop.master, Peppermint.master, Chiclet.master, etc.

Image

All .master pages use MasterPage.master.cs and MasterPageSA.master.cs respectively as their code-behind files. (SA stands for Stand Alone, used for the editor, categories and other non-document content pages.) This works to our advantage in modifying theme loading logic as you’ll see below.

Modifying the Current Theme Loading Logic

Because all master pages inherited from MasterPage.master.cs and MasterPageSA.master.cs we were able to extend ScrewTurn’s theming loading logic very simply. Most header tags, including the theme .CSS links are added in a ScrewTurnWiki.Core.Tools.cs method called GetIncludes(). The Tools.GetIncludes(namespace) method is called in the Master Page PrintHtmlHead() method, with the stripped-down logic of:

c.Text = Tools.GetIncludes(currentNamespace);

With the Sueetie Framework at our disposal we added a check on the current IsMobile state. If in a mobile state, we passed the Current Sueetie Theme (which would be our Sueetie mobile theme) to a new Tools.GetIncludes() override method.

if (SueetieContext.Current.IsMobile)
   c.Text = Tools.GetIncludes(currentNamespace, SueetieContext.Current.Theme);
else
   c.Text = Tools.GetIncludes(currentNamespace);

The Sueetie Framework rarely has to touch an application’s core class libraries, but we needed to add a few lines of code to the ScrewTurn.Wiki.Core.Tools.cs class to complete the theme loading task. We know that if the theme passed to the GetIncludes() override method from the Master Page CodeBehind is not null it’s the Sueetie Current Mobile theme, so the Sueetie Mobile Theme becomes our dynamically loaded theme for ScrewTurn rather than Provider.GetSetting("Theme").

// Sueetie Modified - added theme parameter to check for Mobile Theme
public static string GetIncludes(string nspace)
{
  return GetIncludes(nspace, null);
}

public static string GetIncludes(string nspace, string _theme)
{
  string theme = Settings.GetTheme(nspace);
  string themePath = Settings.GetThemePath(nspace);
  if (!string.IsNullOrEmpty(_theme))
  {
    theme = _theme;
    themePath = "Themes/" + _theme + "/";
  }
  ...
}

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.