obout inc - ASP.NET EasyMenu - Tutorials - Creating a Custom Menu Item

How To create a Custom Menu Item

Basic guidelines

EasyMenu offers to users that are developers the posibility to create their own customised items that can be added to
the menu. The basic procedure is this:
1. Add a reference to EasyMenu to your project
2. Create a new class derived from OboutInc.EasyMenu.ItemBase
    Note: Make sure you provide also a constructor with no parameters or no constructors at all!
3. Implement the abstract methods provided by the ItemBase class:
     - [property] public abstract string AddonAttributes (get)
         // specifies any additional attributes that are to be rendered for this control
     - [property] public abstract bool AllowsIcon (get,set)
         // specifies if the item allows an icon to be displayed near it
     - [property] public abstract bool AutoHideMenu (get,set)
         // specifies if the menu should hide upon clicking this item
     - [property] public abstract string Icon (get,set)
         // specifies the name of the file conaining the image for the icon
     - [property] public abstract string InnerHtml (get,set)
         // specifies the html that will be rendered inside the item
     - [method] public abstract void Serialize (ref XmlElement parentNode);
         // specifies the way the item will be serialized
     - [method] public abstract void Deserialize (XmlElement parentNode);
         // specifies the way the item will be deserialized
4. Customise it by adding properties you want the user to be able to modify and by changing the default CSSClasses
for your item:
     - [field] private static string Component = "CSSClassName"
         // specifies the class name for the item
     - [field] private static string ComponentOver = "CSSClassName"
         // specifies the class name for the item when mouse is over it
     - [field] private static string ComponentContentCell = "CSSClassName"
         // specifies the class name for the item's content cell
     - [field] private static string ComponentContentCellOver = "CSSClassName"
         // specifies the class name for the item's content cell when mouse is over the item
     - [field] private static string ComponentIconCell = "CSSClassName"
         // specifies the class name for the item's icon cell
     - [field] private static string ComponentIconCellOver = "CSSClassName"
         // specifies the class name for the item's icon cell when mouse is over the item
5. Add custom properties and methods to the item
6. Add a reference to the assembly where the item can be found:
    <%@ Register TagPrefix="AssemblyWithItem" Namespace="AssemblyNamespace" Assembly="AssemblyName" %>
7. Create css classes that match the names specified in step 4 and place them in style.css file found in the folder
specified by the StyleFolder property of the menu where you want to use the new item
8. Add the new item to the EasyMenu either by using the designer, aspx source or by using codebehind.

More insight

We'll take each step at a time and discuss it and by the end of this tutorial we'll have a new item that will behave like a
MenuItem component but will also support a ToolTip property. For this we need to add two properties (ToolTip and
OnClientClick) and change the value AddonAttributes property retursn. We will call this menu item myMenuItem

1. Add a reference to the EasyMenu to your project
<%@ Register TagPrefix="oem" Namespace="OboutInc.EasyMenu_Pro" Assembly="obout_EasyMenu_Pro" %>
2. Create a new class derived from OboutInc.EasyMenu.ItemBase

    public class myMenuItem : OboutInc.EasyMenu.ItemBase
    {
     public myMenuItem()
     {
     }
    }

3. Implement the abstract methods provided by the ItemBase class:
     - [property] public abstract string AddonAttributes (get)

    // specifies any additional attributes that are to be rendered for this control
    // additional attributes are the ToolTip and the OnClientClick properties
    public override string AddonAttributes
    {
     get
     {
     return (this.ToolTip.Length == 0 ? "" : "title=\"" + this.ToolTip + "\" ") +
     (this.OnClientClick.Length == 0 ? "" : "OnClientClick=\"" + this.OnClientClick + "\" ");
     }
    }

     - [property] public abstract bool AllowsIcon (get,set)

    // specifies if the item allows an icon to be displayed near it
    // we will not allow this item to have an icon shown for it
    public override bool AllowsIcon
    {
     get
     {
     return false;
     }
     set
     {
     }
    }

     - [property] public abstract bool AutoHideMenu (get,set)

    // specifies if the menu should hide upon clicking this item
    public override bool AutoHideMenu
    {
     get
     {
     Object o = ViewState<"AutoHideMenu">;
     return (o == null) ? true : (bool)o;
     }
     set
     {
     ViewState<"AutoHideMenu"> = value;
     }
    }

     - [property] public abstract string Icon (get,set)

    // specifies the name of the file conaining the image for the icon
    public override string Icon
    {
     get
     {
     if (this.AllowsIcon)
     {
     Object o = ViewState<"Icon">;
     return (o == null) ? string.Empty : (string)o;
     }
     else return String.Empty;
     }
     set
     {
     ViewState<"Icon"> = value;
     }
    }

     - [property] public abstract string InnerHtml (get,set)

    // specifies the html that will be rendered inside the item
    public override string InnerHtml
    {
     get
     {
     Object o = ViewState<"InnerHTML">;
     return (o == null) ? string.Empty : (string)o;
     }
     set
     {
     ViewState<"InnerHTML"> = value;
     }
    }

     - [method] public abstract void Serialize (ref XmlElement parentNode);

    // specifies the way the item will be serialized
    public override void Serialize (ref XmlElement parentNode)
    {
     parentNode.SetAttribute("ID", this.ID);
     parentNode.SetAttribute("InnerHtml", this.InnerHtml);
     parentNode.SetAttribute("Icon", this.Icon);
     parentNode.SetAttribute("AllowsIcon", this.AllowsIcon.ToString());
     parentNode.SetAttribute("AutoHideMenu", this.AutoHideMenu.ToString());
     parentNode.SetAttribute("OnClientClick", this.OnClientClick);
     parentNode.SetAttribute("ToolTip", this.ToolTip);
    }

     - [method] public abstract void Deserialize (XmlElement parentNode);

    // specifies the way the item will be deserialized
    public override void Deserialize (XmlElement parentNode)
    {
     this.ID = parentNode.GetAttribute("ID");
     this.InnerHtml = parentNode.GetAttribute("InnerHtml");
     this.Icon = parentNode.GetAttribute("Icon");
     this.AllowsIcon = bool.Parse(parentNode.GetAttribute("AllowsIcon"));
     this.AutoHideMenu = bool.Parse(parentNode.GetAttribute("AutoHideMenu"));
     this.OnClientClick = parentNode.GetAttribute("OnClientClick");
     this.ToolTip = parentNode.GetAttribute("ToolTip");
    }

4. Customise it by adding properties you want the user to be able to modify and by changing the default CSSClasses for your item:
     - [field] private static string Component = "CSSClassName"
         // specifies the class name for the item
     - [field] private static string ComponentOver = "CSSClassName"
         // specifies the class name for the item when mouse is over it
     - [field] private static string ComponentContentCell = "CSSClassName"
         // specifies the class name for the item's content cell
     - [field] private static string ComponentContentCellOver = "CSSClassName"
         // specifies the class name for the item's content cell when mouse is over the item
     - [field] private static string ComponentIconCell = "CSSClassName"
         // specifies the class name for the item's icon cell
     - [field] private static string ComponentIconCellOver = "CSSClassName"
         // specifies the class name for the item's icon cell when mouse is over the item

    // we will set these the same as the MenuItem css classes
    private static string Component = "easyMenuItem";
    private static string ComponentContentCell = "easyMenuItemContentCell";
    private static string ComponentContentCellOver = "easyMenuItemContentCellOver";
    private static string ComponentIconCell = "easyMenuItemIconCell";
    private static string ComponentIconCellOver = "easyMenuItemIconCellOver";
    private static string ComponentOver = "easyMenuItemOver";

5. Add custom properties and methods to the item

    public string ToolTip
    {
     get
     {
     Object o = ViewState<"ToolTip">;
     return (o == null) ? String.Empty : (string)o;
     }
     set
     {
     ViewState<"ToolTip"> = value;
     }
    }

    public string OnClientClick
    {
     get
     {
     Object o = ViewState<"OnClientClick">;
     return (o == null)? string.Empty : (string)o;
     }
     set
     {
     ViewState<"OnClientClick"> = value;
     }
    }

6. Add a reference to the assembly where the item can be found:
    <%@ Register TagPrefix="AssemblyWithItem" Namespace="AssemblyNamespace" Assembly="AssemblyName" %>
7. Create css classes that match the names specified in step 4 and place them in style.css file found in the folder specified by the StyleFolder property of the menu where you want to use the new item
    Since our item uses the same css classes as MenuItem we do not need to add any class definitions.
8. Add the new item to the EasyMenu either by using the designer, aspx source or by using codebehind.

<%@ Register TagPrefix="tmpLibrary" Namespace="TempItemsLibrary" Assembly="TempItemsLibrary" %>

<oem:easymenu id="Easymenu1" runat="server" Align="Under" ShowEvent="MouseOver" AttachTo="div1">
    <Components>
        <tmplibrary:myMenuItem ID="myMenuItem2" InnerHtml="Useless Option"
             ToolTip="this option does nothing now"></tmplibrary:myMenuItem>
        <tmplibrary:myMenuItem ID="myMenuItem3" InnerHtml="Alert" OnClientClick="alert('message');"
             ToolTip="This will pop-up an alert"></tmplibrary:myMenuItem>
    </Components>
</oem:easymenu>

Hover this to test:

Download the example project containing myMenuItem source file.

Please visit HOW-TO and Help page for any questions.

"We really like the tab menu....Brings a sense of organization to the page layouts."

Mark Butler