Xml controls can be used to render the main content or navigational controls in a typical AJAX application. In the following code samples, I explain how to implement a navigational control from XML entries listing the contents of the knowledge base. We’ve already developed the XSLT based on the topics list from the Catalog service. All that is left is to wire up navigation events between the navigation control and the wiki control.

When you are rendering links for navigation, you might want to make it clear to the user that the link is indeed clickable. To do that, you can add the following style rule to the CSS for the application:

a { color:Blue; text-decoration:'underline'; cursor:pointer; }

XmlControl is a great example of object-oriented programming in JavaScript, where a simple object can be used to perform complex tasks. The XmlControl class can be extended through static utility methods for complex functionality, as you’ll see in the following examples.

To create a navigational control in the wiki page, we use the $create method to create an instance of XmlControl. The XmlControl JavaScript source file must also be added to the page. The following code can be added to the WikiPage.load method, which is called on the Sys.Application.load event.

var props = {
    xmlUrl: '/Web/Services/CatalogService.svc/Default/Topics',
    xsltUrl: '/Web/XML/Topics.xslt'
};
var events = { prerender: WikiPage.clearWikiNavLinks, render: WikiPage.addWikiNavLinks };
var xmlElement = $get('NavigationPlaceholder'),
var xmlControl = $create(SOAjax.Controls.XmlControl, props, events, null, xmlElement);

To implement the navigation method, the WikiPage class defines a utility method that finds the wiki component by using Sys.Application.findComponent ($find) and then calls the load method, which causes the wiki to load new data for the selected topic. Example 9-10 demonstrates the wikiNav function that is called from delegates attached to DOM events.

WikiPage.wikiNav = function(domEvent, eventArgs) {
    // Find the wiki:
    var wiki = $find('_WikiContent'),
    wiki.load(domEvent.target.innerHTML);
}

To implement the navigation delegates that call WikiPage.wikiNav, the WikiPage class defines two utility methods that add and remove navigation handlers to the click DOM event. To add handlers, we simply look for all the A elements in XmlControl and attach a DOM handler. In this example, the innerHTML of the A element contains all the data we need to load the new data set. Example 9-11 shows the XmlControl handlers that are used to manage navigational links.

WikiPage.addWikiNavLinks = function(sender, eventArgs) {
    var element = sender.get_element();
    var links = element.getElementsByTagName('A'),
    for (var i = 0; i < links.length; i++) {
        $addHandler(links[i], 'click', WikiPage.wikiNav);
    }
}

WikiPage.clearWikiNavLinks = function(sender, eventArgs) {
    var element = sender.get_element();
    var links = element.getElementsByTagName('A'),
    for (var i = 0; i < links.length; i++) {
        $clearHandlers(links[i]);
    }
}

As you can see from these code samples, a trivial amount of code is required to implement rich AJAX functionality in an application based on the XmlControl class, making it a favorite in my AJAX development toolkit. The full source code for XmlControl and WikiControl is available in this chapter’s sample code.