8 YEARS AGO

Introducing the Microsoft .NET Magazine Community

Quite recently, Microsoft .NET Magazine launched it's own website, a community website for all Dutch .NET developers. The website, running on KenticoCMS 5.0, was created by our company IBL-Software.

Quite recently, Microsoft .NET Magazine launched it's own website, a community website for all Dutch .NET developers. The website, running on KenticoCMS 5.0, was created by our company IBL-Software.

The latest edition of .NET Magazine contains an article which I contributed to. In the article the author and I explain briefly the process of how the website was created.

Cover

While I really love the fact that I got published in the magazine, I feel that I want to write some more about the end result and it's creation process. In this post I will cover some techniques used for creating the website using KenticoCMS, I will show some insights in optimizing the .NET Magazine Community experience and I will finish with a small roadmap.

Silverlight Cover Flow & Document Reader
If you checkout the Magazine page you will see a Silverlight control which enables you to browse through all the covers of the .NET Magazine. Registered users can even "Experience" the magazine through a Silverlight Document Reader which is based on Deep Zoom Technology.

Silverlight Experience
The page was made using a Silverlight Cover Flow component from CodePlex with an adjusted layout to match the look and feel of the website. The Silverlight takes a XML file which is provided via an HTTP handler, containing records of the magazines with a title, link to the cover image and a filter that is used for the table of contents, which is displayed beneath the cover. The XML file has the following structure:
<?xml version="1.0" encoding="UTF-8"?>
<records>
 <magazine id="20094">
  <info>
   <title><![CDATA[Microsoft .NET Magazine 2009 #4]]></title>
   <cover><![CDATA[http://www.dotnetmag.nl/dotnetmag.nl/media/dotnetmag.nl/
images/covers/Cover-Dotnet-0409.png]]></cover> <filter>20094</filter> </info> </magazine> <magazine id="20093"> <info> <title><![CDATA[Microsoft .NET Magazine 2009 #3]]></title> <cover><![CDATA[http://www.dotnetmag.nl/dotnetmag.nl/media/dotnetmag.nl/
images/covers/Cover-Dotnet-0309.png]]></cover> <filter>20093</filter> </info> </magazine> </records>
The Silverlight application grabs the XML and transforms it to browsable Magazines in the Cover Flow Control. When selecting a cover, in the "SelectedItemChanged" event, the javascript function: "SetMagazine" gets executed, passing the filter parameter value (e.g. 20094). The "Magazine" page contains the corresponding javascript function "SetMagazine".
void flowControl_SelectedItemChanged(CoverFlowEventArgs e)
{
 System.Windows.Browser.HtmlPage.Window.Invoke("SetMagazine",((Magazine)e.I
tem).Filter); }
Using jQuery the heading title gets updated. Next we trigger an update on the "Update Panel" which contains the table of contents of the selected magazine. To do this we pass the filter value as "EVENT ARGUMENT". This same technique is also implemented in the articles page.
<script type="text/javascript">
 function SetMagazine(edition) {
  $("h1:first").text("Microsoft .Net Magazine " + edition.substring(0, 4) + 
" #" + edition.substring(4,5)); __doPostBack('plc_lt_zoneContent_DNMPlaceholder_DNMPlaceholder_lt
_zoneContent_TopCenter_DNMArticles_pnlUpdate'
, edition.substring(0, 4) + ";"
+ edition.substring(4,5)); } </script>
The filter value is processed in a custom macro expression. A (custom) macro in Kentico is a piece of code that returns the string value of a built-in or custom function. As you can see below the "EVENT ARGUMENT" is getting splitted and formatted to a WHERE clausule.
public static string ResolveCustomMacro(MacroResolver sender, 
string expression, out bool match) { match = false; string result = expression; switch (expression.ToLower()) { case "magazine": match = true; string magazine = ValidationHelper.GetString(System.Web.HttpContext.Curr
ent.Request.Params.Get("__EVENTARGUMENT"), ""); if (magazine != "") { string[] values = ValidationHelper.GetString(System.Web.HttpContext.Cur
rent.Session["magazine"], "").Split(';'); result = "Jaar = " + CMS.GlobalHelper.ValidationHelper.GetInteger(value
s[0], 0).ToString() + " AND Editienummer = " + CMS.GlobalHelper.ValidationH
elper.GetInteger (values[1], 0).ToString(); } break; } return result; }
Finally the custom macro is added as WHERE condition in the repeater displaying the table of contents.

Web Part Properties

Community features
As we mentioned in the article, the website was based on a "out of the box" implementation of Kentico's community edition. The community edition offers it's members the ability to manage friends and join or start a group. To indulge this, Kentico added a context menu which can be accessed by right clicking on a user or group.

Context Menu

If you find that a group is missing, you can suggest it by clicking on the "Groep aandragen" link which is displayed in the community links section on the right of your screen (only when logged in).

Suggest a group

Roadmap
So whats next? In my opinion it depends on the success of the community and it's need for new features and capabilities. I for one would like to see the use of Kentico's widgets which would make personalization of member and group pages possible. With the widgets, the user has control over the appearance of the pages he admins. He can add items like external news (parsed from RSS feeds), media (e.g. Silverlight applications) and control the placement of the content from the live site.

Widgets

This concludes my (hopefully) interesting view on the new .NET Magazine Community website. Feel free to leave a message if any question should arise!

Cheers,
Jeroen