Flex 4 Vertical Sliding Menu, Part II

This is a follow-up to my post Flex 4 Vertical Sliding menu and shows two ways to highlight the currently active menu item. The first method is simpler and relies on keeping a reference to the current menu item in a member variable:

protected var _currentMenuItem:Label = null;

A new function is added to do the work of changing the color of the menu items:

protected function setActiveMenuItem(menuItem:Label):void
{
    if(_currentMenuItem)
    {
        _currentMenuItem.setStyle("color", 0xffffff); // Reset the previous current item to white
    }
    menuItem.setStyle("color", 0x00aadd);	// Set the new current item to turquoise
    _currentMenuItem = menuItem;
}

Then the function is called in the existing menu handler; the only new line of code is the call to setActiveMenuItem:

protected function menuClickHandler(event:MouseEvent):void
{
    setActiveMenuItem(event.target as Label);
    var menuEvent:MenuItemSelectedEvent = new MenuItemSelectedEvent(MenuItemSelectedEvent.MENU_ITEM_SELECTED, event.target.id);
    dispatchEvent(menuEvent);
}

Just add these lines of code to the previous menu component to get highlighting of the current menu item.

Alternative Solution Using Recursion to Iterate Over the Children in the Menu Container

Before I thought of and implemented the simple solution above I coded up a different solution which is slightly more complex. In this solution, I looped through the children of the VGroup containing the menu to find all the menu item labels and reset their color to white. After setting all of the labels to white I then highlight the newly-clicked menu item to the hightlight color. Here’s the code:

protected function setActiveMenuItem(menuItem:Label):void
{
    resetInactiveMenuItems(menuItemContainer); // VGroup containing all the menu items has id="menuItemContainer"
    menuItem.setStyle("color", 0x00aadd);
}
 
protected function resetInactiveMenuItems(container:DisplayObjectContainer):void
{
    for(var i:int = 0; i < container.numChildren; i++)
    {
        var label:Label = container.getChildAt(i) as Label;
        if(label)
        {
            label.setStyle("color", 0xffffff);
        }
        else
        {
            var displayObjectContainer:DisplayObjectContainer = container.getChildAt(i) as DisplayObjectContainer;
            if(displayObjectContainer)
            {
                resetInactiveMenuItems(displayObjectContainer);
            }
        }
    }
}

In this example, if the current child element is a label then its color is reset to white. If it’s not a label then the element is checked to see if it’s a (subclass of) DisplayObjectContainer (another VGroup in the example menu). If so, resetInactiveMenuItems is called again with it as the container. All of the submenu’s labels are then reset before it returns and checking continues at the parent level. Multiple levels of submenus would work with this technique, of course.

Tagged as: Menus