Going Mobile With YetAnotherForum.NET

In this Sueetie Going Mobile Series post we’re going to look at how a mobile YetAnotherForum.NET came into being. You’ll find the Sueetie Wiki document on which this post was based located in the Sueetie Patterns and Origins area.

_________________ 

Extending YetAnotherForum.NET by Creating New Pages and Controls

To create a mobile version of YetAnotherForum.NET we added new pages and controls to remove and/or re-arrange elements to accommodate the reduced mobile display dimensions. Fortunately, YAF makes adding new pages and controls very easy.

Here is a screenshot of the new mobile pages and controls added to YAF.NET. (The controls and pages file list is abbreviated to focus on topic.)

The YetAnotherForum.NET ForumPages Enumerator

YetAnotherForum.NET uses a enumerator matching logic to determine page names. The enum class is in the YAF.Classes.Config project and is named "ForumPages." The page names match the enumerator constant name. Here's an example using ForumPages to build a page url. Notice the ForumPages.pmessage. The "pmessage" enumerator constant translates to /forum/pages/pmessage.ascx.

this.Pm.NavigateUrl = YafBuildLink.GetLinkNotEscaped(ForumPages.pmessage, 
   "u={0}", this.PostData.UserId);

Here's an abbreviated ForumPages enumerator class with the additional Sueetie pages. Sueetie pages begin with "su_" with Sueetie pages used in mobile design start with "su_mobile."

Determining when to load Mobile or Standard Pages

If you've been following Sueetie development for any time at all you know the more simple the logic the better, and with YetAnotherForum.NET's clean hierarchical design we can implement a mobile-vs-standard determination very easily. We go to YAF's Forum.cs base page (in the WebApplication /Classes source directory for quick access), and add one simple test to set the current ForumPages page enum.

We're breaking out the forum home page, topics, posts and post message pages, so upon determining the current ForumPages value we add the following.

ForumPages srcForumPage = this._page;

if (SueetieContext.Current.IsMobile)
{
  switch (srcForumPage)
  {
    case ForumPages.forum:
      srcForumPage = ForumPages.su_mobileforum;
      break;
    case ForumPages.topics:
      srcForumPage = ForumPages.su_mobiletopics;
      break;
    case ForumPages.posts:
      srcForumPage = ForumPages.su_mobileposts;
      break;
    case ForumPages.postmessage:
      srcForumPage = ForumPages.su_mobilepostmessage;
      break;
    default:
      break;
  }
}

We're using a few other SueetieContext.Current.IsMobile tests in the base Forum.cs base page for tasks like hiding the footer, but that's the Sueetie YAF Mobile logic in a nutshell.

Abbreviated Button Text

No theme (I'd like to add, especially any MOBILE theme) is ever finished, and while the buttons on the Sueetie Mobile version of YetAnotherForum.NET can be further reduced in size, they are smaller than their standard display counterparts because we abbreviated the button text. Changing button text is certainly of no interest apart from how it adheres to YAF's Localization architecture.

On the mobile control's .ASCX button display markup I modified the YAF:ThemeButton properties to retrieve new mobile-specific resource strings from the languages/English.xml file in a new SUEETIE "Page" area. Notice TextLocalizedTag="BUTTON_MOBILE_MOVETOPIC" and TextLocalizedPage="SUEETIE"

<YAF:ThemeButton ID="MoveTopic2" runat="server" CssClass="yafcssbigbutton rightItem"
	OnClick="MoveTopic_Click" TextLocalizedTag="BUTTON_MOBILE_MOVETOPIC" 
	TitleLocalizedTag="BUTTON_MOVETOPIC_TT" TextLocalizedPage="SUEETIE" />