Going Mobile With ScrewTurn Wiki

In this our final Sueetie Going Mobile Series post we’re going to look at how we created the world’s first mobile of ScrewTurn Wiki. You’ll find the Sueetie Wiki document on which this post was based 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.

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.

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 + "/";
  }
  ...
}