This is the fourth Sueetie Going Mobile Series post and the third on a Sueetie Application. We covered BlogEngine.NET and Gallery Server Pro. Here we'll look at how a mobile YetAnotherForum.NET came into being. The Sueetie Wiki document from which this post was taken is 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,
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;
srcForumPage = ForumPages.su_mobileforum;
srcForumPage = ForumPages.su_mobiletopics;
srcForumPage = ForumPages.su_mobileposts;
srcForumPage = ForumPages.su_mobilepostmessage;
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"
TitleLocalizedTag="BUTTON_MOVETOPIC_TT" TextLocalizedPage="SUEETIE" />