MenuItem

---

Version 1.0 onwards

---

The MenuItem is a clickable widget which fires a command, or opens another menu

---

---

Listeners

---

None

---

Notes

---

The MenuBar is the container for MenuItems, and MenuItems are the active widgets you plug into the MenuBar. They can either fire off a command (i.e. the user has reached the end of the line) or they display another (sub) menu. So they act just like any other desktop-style dropdown menu.

The MenuBar is a TABLE wrapped in a DIV. The MenuItems are basically TDs with a couple of fields to keep track of either another menu or a command. It also lets you set the contents of the TD to a string of text or HTML.

There's a bug in the MenuItem code (IMHO, anyway) which is that you can't get rid of the highlighting from a top-level menu item unless you mouse over a top-level sub-menu menu item. The code says 'Get rid of the highlighting unless the item is visible' or words to that effect. Which is fine for everything except the top level, which will keep the highlight until something is clicked.

---

Code

---

// A command for general use
Command command = new Command()
{
    public void execute()
    {
        Window.alert("Command Fired");
    }
};
// Top-level menu
MenuBar menutop = new MenuBar();
menutop.addStyleName("demo-MenuItem");

// Item to fire a command
MenuItem fireone = new MenuItem("Fire One", command);

// Level-two menu - vertical=true
MenuBar menutwo = new MenuBar(true);
menutwo.addStyleName("demo-MenuItem");

// Items for menu two
MenuItem firetwo = new MenuItem("Fire Two", command);
MenuItem firethree = new MenuItem("Fire Three", command);
MenuItem firefour = new MenuItem("Fire Four", command);

// Assemble the menu system
menutop.addItem(fireone);            // Adds existing item
menutop.addItem("SubMenu", menutwo); // Creates item and adds menutwo
menutwo.addItem(firetwo);
menutwo.addItem(firethree);
menutwo.addItem(firefour);

---

CSS

Here's the CSS for the menu style in the demo. It's not much, but it's a lot better than no CSS at all.

/***********************************************************
*                      MenuItem Demo
***********************************************************/
.demo-MenuItem
{
    border                      :   1px solid #666;
    border-width                :   1px 0;
    margin                      :   0 auto;
    font-size                   :   80%;
}
.demo-MenuItem .gwt-MenuItem
{
    cursor                      :   hand;
    cursor                      :   pointer;

    border-left                 :   1px solid #999;
    border-right                :   1px solid #999;
    background-color            :   #eee;
    padding                     :   0 10px;
}
.demo-MenuItem .gwt-MenuItem-selected
{
    background-color            :   #ffc;
}