RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Build an AJAX-Enabled CMS with Visual WebGUI: Adding Menu Components (II)

If full-featured CMSs don't meet your company's needs, find out how to build your own.

One of the basic components of any application is the menu system. It allows users to navigate across the application and launch the modules. Menu components should be customizable both on look and feel and functionality, and user should be able to develop and integrate them easily into application. The MiniCMS system begun in the first article in this series needs to have flexible menu components.

In the previous article, I designed and implemented the functionality of two elements of the menu system, as required by the MVC pattern: components handling the Model (menu configuration data) and the Controller, and also defined the interfaces to be implemented by the View part -- actual menu control for user interace. Now I will create few implementations for the View part of the menu system -- the actual components visible to the end user, which implements the functionality of the menu in the application.

Thanks to the modular approach of the menu system, we can create various menu View components, which, as long as you implement the same interface, can be integrated with the menu controller.

In the previous article I defined the two interfaces that define the View part of the menus: IWTMenu and IWTMenuItem. In this part I will create a few implementations for the menu's View part, and design a small application empowering the menu components.

Implementing the WTTreeMenu component

The WTTreeMenu creates a menu that resembles the behavior of a tree menu. It extends the TreeView control, and implements the IWTMenu interface. The class diagram for the menu is shown in Figure 1.

Figure 1: Class diagrams for WTTreeMenu and WTTreeMenuItem.

We need to implement two components: the menu component WTTreeMenu and WTTreeMenu Item. Table 1 shows the public members of WTTreeMenu. Basically, the public interface of the menu just implements the interface IWTMenu.

Table 1: Public members of WTTreeMenu control.

Table 2 shows the public members of WTTreeMenuItem, which implements the properties defined in the IWTMenuItem interface.

Table 2: Public members of WTTreeMenuItem component.

The constructor is defined below. In the constructor I register the event handler for NodeMouseClick event, which is what we need to detect menu item selection.

public class WTTreeMenu : TreeView, IWTMenu {
  // Constructor
  public WTTreeMenu() : base() {
    this.NodeMouseClick += 
        new TreeNodeMouseClickEventHandler(MenuItemMouseClick);
  // ...
The methods implementing the IWTMenu interface are simple, and are mainly warppers around private methods. InitMenu method just calls the FillTree private method, then set the initial status of the menu based on ExpandMode property.

public void InitMenu(List<IWTMenuEntryDefinition> menuDefinition){
  FillTree(Nodes, menuDefinition);
  if (m_expandMode == WTTreeExpandMode.MenuMode)
  else if (m_expandMode == WTTreeExpandMode.TreeMode)
The main workhorse here is FillTree. It is developed as recursive method, processing any object from the current level and calling recursive for sub-levels. For each entry in menuDef list, a new WTTreeMenuItem is created, attached to the currect Nodes collection, then if the current menu definition objects has child sub-menus, a recursive call is made to generate the menu entries for submenus. When the menu item was added to the menu, it fires MenuItemAdded event, which allow application to bind custom handler to perform additional processing on the menuitem. For example, the application might want to set the menu item with specific properties to customize its look. Through the binding between menu component and menu controller presented in previous article, the event fires back to controller, which is where the custom event handler should be bind to.

private void FillTree(
  TreeNodeCollection treeNodeCollection, 
  List<IWTMenuEntryDefinition> menuDef)
  // for each menu entry definition
  foreach (IWTMenuEntryDefinition menuEntryDef in menuDef){
    // create the menu item object
    WTTreeMenuItem menuItem = new WTTreeMenuItem(menuEntryDef);
    // set various properties as TreeNode (the default font)
    TreeNode node = menuItem as TreeNode;
    if (node != null)
      node.NodeFont = new System.Drawing.Font(this.Font.Name, this.Font.Size);
    // and add it to menu
    // fire event on menu item adding    
    // if menu has child items, create the sub-memu
    if (menuEntryDef.HasChildMenus)
      FillTree(menuItem.Nodes, menuEntryDef.ChildMenus);

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date