Roughian Examples Site Map - GWT Examples - Tutorials

MenuBar


Version 1.0 onwards

The MenuBar is a holder for MenuItem widgets



Listeners


None


Notes


The MenuBar is just a container for MenuItems. All you can really do is add MenuItems to it, set the styling and set the auto-open property

Styling can be a bit of a problem if you just go by the Google Docs and use just the classes they mention. That is why the example above is a bit over-decorated.

The menu you create with the MenuBar and MenuItems is a TABLE wrapped in a DIV. The .gwt-MenuBar css class points to the DIV wrapper. The .gwt-MenuItem css class refers to the TD, and the .gwt-MenuItem-selected also points to the TD.

Therefore if you put a border around the TD, the cells collapse by default so cell borders join up. Once you understand the structure, all you need to do is set .gwt-MenuBar table{ border-collapse: separate }.


Code


MenuBar widget = new MenuBar();
widget.addStyleName("demo-MenuBar");
widget.addItem("Fire Command",command);
widget.addItem("Command: Fire!",command);
widget.addItem("Execute",command);

CSS


/***********************************************************
*                     MenuBar Demo
***********************************************************/
.demo-MenuBar
{
    border                      :   1px solid #666;
    margin                      :   0 auto;
    background-color            :   #eee;
    font-size                   :   70%;
    padding                     :   3px;
}
.demo-MenuBar table
{
    border-collapse             :   separate;
    border                      :   1px solid #00f;
    background-color            :   #ddd;
}
.demo-MenuBar .gwt-MenuItem
{

    cursor                      :   hand;
    cursor                      :   pointer;

    border                      :   1px solid #999;
    background-color            :   #eee;
    padding                     :   2px 10px;
}
.demo-MenuBar .gwt-MenuItem-selected
{
    background-color            :   #fff;
}