Context Menu - building the classes

Well, it's been a great week inside the software dream ;-) as I've had the chance to work on something out of pure enjoyment - an ASP.NET Context Menu Server Control. I've been blogging my progress as I've had to tackle each part of the problem and, it's gone something like this:

• Planning / Prototyping (build the dhtml)
• More detailed planning (plan the "feel" of the control)
• 1st Development task - How do I build that kind of server control? What are my options?

Since then I've managed to code up all of the classes required to create:

• ContextMenu
• ContextMenuItems
• ContextMenuItem
• ContextMenuLink
• ItemClickEventArgs
• ItemClickEventHandler Delegate

...I then added the ContextMenu to a page like so:

<miu:ContextMenu id="ContextMenu1" runat="server">
    <miu:ContextMenuItem id=ctxMenuItemOne runat="server"></miu:ContextMenuItem>
    <miu:contextmenuitem id=ctxMenuItemTwo runat="server"></miu:contextmenuitem>
    <miu:contextmenuitem id=ctxMenuItemThree runat="server"></miu:contextmenuitem>
    <miu:contextmenuitem id=ctxMenuItemFour runat="server"></miu:contextmenuitem>
</miu:ContextMenu>
<miu:ContextMenuLink id="ContextMenuLink1" ContextMenu="ContextMenu1" runat="server" Text="Click Me!" />

...and, Voila! It worked. I had all of the items created at runtime and properties read in correctly. The only thing that remains now is to ensure that all of the correct javascript can be emitted into the page at the appropriately so that the menu can be requested, viewed and used in the browser at runtime. I haven't coded that part yet, but I did a quick, working demo of how it should work. This is a working javascript demo of what happens:

// this gets added to the page once only by the ContextMenu class
var MarkItUp_ContextMenu = new Array() ;
// NOTE: The ContextMenu class is also responsible for "emitting"
// a reference to an include file which contains all of the DHTML
// functions for the ContextMenu's to work in the target client.
    
// each instance of a ContextMenu adds an entry containing the data of its
// ContextMenuItem items
MarkItUp_ContextMenu["ctlIdA"] = ["a1", "a2", "a3"] ;
MarkItUp_ContextMenu["AnyNamingContainer_ctlIdB"] = ["b1", "b2", "b3"] ;
MarkItUp_ContextMenu["ctlIdC"] = ["c1", "c2", "c3"] ;
MarkItUp_ContextMenu["ctlIdD"] = ["d1", "d2", "d3"] ;
// a ContextMenuLink item must have a reference to the ClientId
// of the ContextMenu which it passes to the MarkItUp_ContextMenu_DisplayMenu
// function to display a context menu when it is "clicked"
MarkItUp_ContextMenu_DisplayMenu( "ctlIdC" )
// The MarkItUp_ContextMenu_DisplayMenu is included in the 
// global include script by the ContextMenu and is responsible
// for getting and displaying a requested menu for the calling
// ContextMenuLink object
function MarkItUp_ContextMenu_DisplayMenu( menuId )
{
    var myMenu = MarkItUp_ContextMenu[menuId] ;
    // displays "c2 == c2" when called from the above call
    alert( myMenu[1] + " == c2" ) ;
}