Making MenuBar look like a Menu Bar

[dfreire]

Hello,

Maybe I'm doing something wrong but I can't make my MenuBar look like a normal menu bar, i.e. visible with 100% width on the NORTH of the page.

Here's my code:

private MenuBar createMenu() {

    MenuBar menuBar = new MenuBar();
    menuBar.setWidth100();

    Menu userMenu = new Menu();
    userMenu.setShowShadow(true);
    userMenu.setShadowDepth(10);
    String username = controllers.getSecurityControl().getUserSession().getUsername();
    userMenu.setTitle(username);

    MenuItem logoutMenuItem = new MenuItem("Logout");
    logoutMenuItem.addClickHandler(new ClickHandler() {
        public void onClick(MenuItemClickEvent event) {
            controllers.getSecurityControl().logout();
        }
    });
    userMenu.setItems(logoutMenuItem);

    menuBar.setMenus(userMenu);

    return menuBar;
}

I have the result of this in the screenshot attached.

The MenuBar is using 100% width, but only the menu part is visible. I want to have all the MenuBar visible on the top, with the same look & feel as the individual menu.

How can I do this?

Thanks in advance

[victor.salvalagio]

Try use a ToolStrip instead of a MenuBar..

With me worked fine

[dfreire]

Thanks for the reply, but I got the same effect with the ToolStrip...
I can set the background color of the ToolStrip, but I can't set the same look & feel as the individual menu.

[toggle57]

I am having exactly the same problem.

With all due respect to the single person that answered this question.... is there a better answer?

Is it unreasonable to want a MenuBar that draws itself 100% across the containing widget like any other pull down menu?

[Isomorphic]

width:"100%" works but you appear to be within a container who's specified size is smaller than the entire width of the page. Use the Watch tab to understand what's going on - compare specified size to drawn size and realize that 100% means 100% of specified size, not drawn size.

[toggle57]

Thanks for your reply. I have included my code below and have tried numerous permutations so get that bar to go across the top of the display with now luck.

As you can see the control is menuBar whichis set to width 100% and it resides in the container: vLayout which is also set to 100%.

I am new to SmartGWT and dont know what container vLayout is connected to but I am presuming it is connected to the browser window.

I set a break point and looked at these two objects but I cant see anything (public) that would tell me what the item's size is - I also have no idea what you mean by "specified" versus "drawn" size... do these map to specific methods, or fields? and if so on what object.

Thanks for your help.

public void onModuleLoad() {
VantageConstants constants = (VantageConstants) GWT
.create(VantageConstants.class);

MenuBar menuBar = new MenuBar();
menuBar.setWidth("100%");

Menu menuApplications = new Menu();
menuApplications.setTitle(constants.MenuApplicatio ns());

MenuItem menuItemApplications_Products = new MenuItem(constants.MenuApplications_Products());
menuItemApplications_Products.addClickHandler(new DummyCommand());
menuApplications.addItem(menuItemApplications_Prod ucts);

menuBar.setMenus(menuApplications);

VLayout vLayout = new VLayout();
vLayout.addMember(menuBar);
vLayout.setHeight("100%");
vLayout.setWidth("100%");
vLayout.draw();

}

public class DummyCommand implements ClickHandler {
public void onClick(MenuItemClickEvent event) {
Window.alert("Menu Item Clicked");

}
}

[Isomorphic]

First step, read the FAQs about the Developer Console and become familiar with it, which will demystify some of the terminology being used and quite possibly solve the problem for you. You haven't posted a screenshot yet so we don't even know if you've got an issue or just don't realize which elements reside in which space, which is what the Watch Tab will help you understand.

[toggle57]

OK - so now i run my application in hosted mode and when the browser pops up with my application I change the url to point to: javascript:isc.showConsole() and I get:

HTTP ERROR: 404
NOT_FOUND
RequestURI=/vantage/sc/system/helpers/Log.html

Is something not installed correctly perhaps?

[sjivan]

Are you sure you've inherited the module com.smartgwt.tools.SmartGwtTools as stated in that FAQ entry?

Sanjiv

[toggle57]

Thanks very much Sanjiv, that got me going.

I confess, I did have some trouble finding the documentation I needed to get SmartGwt set up in an eclipse environment so I have to root around on the net and that particular setting was not specified.

The sizes of the items are highlighted and I can see that my menuBar is the size of the vLayout container.

I think this is just a mater of figuring out how to set the background colour of the menuBar. It looks like it must be set to White... the same colour as the rest of my application window... so it just disappears.

Thanks again.