This is one of those enjoyable posts for me where I get to step through the architecture of a mod created with one of the great applications in Sueetie. Today the application is YetAnotherForum.NET and the mod is Forum Answers, where individual discussion messages can be designated as an Answer. Here’s a screenshot of a discussion containing a Forum Answer.
The first thing to know about the Addon’s design is that like all instances when the Sueetie Framework interacts with the source of an application, the fewest lines of code possible were added to the source app. In the case of Sueetie Answers, some jQuery was added to /forum/pages/posts.ascx, a few lines of HTML to /forum/controls/displaypost.ascx and a small block of code to /forum/controls/displaypost.ascx.cs. This way, when YetAnotherForum.NET 22.214.171.124 (or whatever is coming) is released, Sueetie Answers can be applied in about five minutes.
I should also add that if YAF 126.96.36.199 or any future version included an Answers function, then the Addon would be scrapped in exchange for hooking into the native YAF process, which is always preferable.
Before walking through the mod, a big Thank You to Jaben Cargman and the YAF Core Development Team for creating such a fantastic forum application. If you haven’t used YAF 188.8.131.52 yet, you’re missing out. Check it out at Sueetie Forums or the very latest build in action at http://forum.yetanotherforum.net.
Identifying Answers on Page Load
Sueetie Answers is based on jQuery, CSS and WCF Services, so all UI processes occur client-side and instantly. The key to making Sueetie Answers work is the addition of a unique CSS Class to each of the message containers on the page.
The jQuery that fires on Document.Ready() retrieves MessageIDs for the current Topic from a WCF Service as a XXX|XXX|XXX pipe-delimited string and adds a CSS "answerTable" class to any containers with the "containerXXX" class.
The buttons are created in /forum/controls/displayPost.ascx and displayPost.ascx.cs. Remember the Answer processing is primarily jQuery and WCF Services, so we’re going to keep things client side and add some simple ASPNET Literal Controls, one control for each function.
In displayPost.ascx.cs we create the Hyperlink that’s going to call the WCF Service for the respective button function. Here’s how the Mark as Answer button is constructed.
And here’s the HTML end-result. Notice the "answer1977" and "undo1977" IDs. These are used by jQuery to hide or show buttons based on the WCF Service Result.
The jQuery WCF Service Call
Here’s what the jQuery looks like to call the SueetieService.RecordAnswer() WCF Service method. As a sidebar, notice the "clientIDs" parameter at the end of the RecordAnswer() WCF method call. This is interesting because it’s an example of how to pass addition parameters to an Ajax Success() method rather than the service result alone. The WCF method call order is WCFMethod(params, successFunction, failureFunction, userContext). For the userContext we’re sending the IDs of the buttons to show/hide as a single pipe-delimited value.
As for the rest of the story, that’s where the WCF Service takes the ball and records the action in SQL, adding it to Sueetie Data Core so it can be displayed on the Site Activity List and elsewhere. That’s cool, too, but not as much fun as the jQuery and related client-side activity we covered here. All of the source you see here will of course be available in Atomo v3.2. Until then, Happy YAFing!