A description of the ScrewTurn Wiki Mobile Architecture as part of our "Going Mobile" series.
ScrewTurn Wiki Mobile: a bit of CSS and Single Theme Selection Change¶
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 uses root MasterPage.master and MasterPageSA.master files. (SA stands for "stand alone." It's used for the Editor page, categories, search and other non-document content pages.) 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 and THEMENAMESA master files. Lollipop.master, lollipopSA.master, Chiclet.master, etc.
All .master pages use MasterPage.master.cs and MasterPageSA.master.cs respectively as their code-behind files. 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);
So 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 is not null that 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 + "/";
}
...
}
Top