Menu remains open even when the mouse moves away

[mj]

The following question was added to the forum a while ago:

------- Start ----------
The menubar.setAutoOpen(true) function allows the menu to open when
mouse moves over the menu. But when mosue moves away, the menu
remains open.

I want the menu to close when the mouse moves away. Any ideas?
------- End -----------

I tried to use onBrowserEvent() approach, but it didn't work.

Does anyone have solution to the following thread?

Thanks,
Mahendra

[Peter Blazejewicz]

hi Mahendra,

I'm not sure if i'm following you,
The default behavior on most GUI solutions I know (e.g. Windows IU,
OSX iu) which are then implemented by applications Menu drop down
itesm DOES NOT close up when mose goes out from them. The only visible
change is the selection on items is removed when mouse is moving out
of drop donw items. Of course there are differencies and some
applications override that behavior but generally I think Menu items
works just that way (try menu items in IExplore or FireFox while
reading that post).
The required behavior is that menu drop down is closed whenever mouse
click occurs outside of menu dropdown popup (so user can dismiss menu
if required),
GWT menu bar and menu items are rendered the same way. They only
clears selection on items when mouse go out of menu and its dropdowns,
But if you want you should override provided classes implemenations,

regards,
Peter

hth,
regards,
peter

[mj]

Thanks for your reply Peter.

Yes. I do agree that the GWT menu is implemented similar to what you
mentioned (e.g. Windows IU, menus in IExplore or FireFox).

However, what I like to accomplish is when mouse moves away from menu,
I like to close the menu as seen in many web sites. (Try this:
http://www.selteco.com/menumaker/)

I did try overriding the onBrowserEvent() method, but I couldn't get
it work.

So do you know if there is any better way to addrees this?

Thanks again,
Mahendra

On Sep 26, 4:06 pm, Peter Blazejewicz <peter.blazejew...@gmail.com>
wrote:

> hi Mahendra,
>
> I'm not sure if i'm following you,
> The default behavior on most GUI solutions I know (e.g. Windows IU,

> OSX iu) which are then implemented by applicationsMenudrop down

> itesm DOES NOT close up when mose goes out from them. The only visible
> change is the selection on items is removed when mouse is moving out
> of drop donw items. Of course there are differencies and some
> applications override that behavior but generally I thinkMenuitems

> works just that way (trymenuitems in IExplore or FireFox while
> reading that post).
> The required behavior is thatmenudrop down is closed whenever mouse

> click occurs outside ofmenudropdown popup (so user can dismissmenu
> if required),

> GWTmenubar andmenuitems are rendered the same way. They only
> clears selection on items when mouse go out ofmenuand its dropdowns,

> But if you want you should override provided classes implemenations,
>
> regards,
> Peter
>
> hth,
> regards,
> peter
>
> On Sep 24, 11:15 pm, mj <maja...@gmail.com> wrote:
>
>
>
> > The following question was added to the forum a while ago:
>
> > ------- Start ----------
> > The menubar.setAutoOpen(true) function allows the menutoopenwhen

> > mouse moves over themenu. But when mosue moves away, themenu
> >remainsopen.
>
> > I want themenuto close when the mouse moves away. Any ideas?

> > ------- End -----------
>
> > I tried to use onBrowserEvent() approach, but it didn't work.
>
> > Does anyone have solution to the following thread?
>
> > Thanks,

> > Mahendra- Hide quoted text -
>
> - Show quoted text -

[Brig]

The default menu behavior for most applications is that the action
required for closing a menu matches the action required for opening
that menu. For example,
- if a menu requires a click to open its items it requires a click to
close its items (as in most applications), and
- if a menu only requires a mouse over to open its items it should
only require a mouse over to close its items (as in increasingly more
webapps).

The fact that the MenuBar functionality is asymmetrical with respect
how the menu is opened and closed when setAutoOpen is true is a GWT
bug, and needs to be reported.

I was unable to resolve this myself outside of the GWT framework
(overriding MenuBar.onBrowserEvent) because so much of the
functionality to fix this in private fields and methods.

I was able to resolve this by modifying
com.google.gwt.user.client.ui.MenuBar.java

Add the following fields:

// a timer object that will close this menubar and its parents
// if there is no selected item.
private Timer hideMenuTimer = new Timer() {
public void run() {
if (selectedItem == null) {
closeAllParents();
}
};
};

private static final int HIDE_MENU_MILLIS = 800;

Change the implementation of itemOver to:

void itemOver(MenuItem item) {
if (item == null) {
// Don't clear selection if the currently selected item's menu
is showing.
MenuBar submenu = selectedItem.getSubMenu();
if ((selectedItem != null) && (submenu != null) &&
(shownChildMenu == submenu)) {
return;
} else {
hideMenuTimer.schedule(HIDE_MENU_MILLIS);
}
}

// Style the item selected when the mouse enters.
selectItem(item);

// If child menus are being shown, or this menu is itself
// a child menu, automatically show an item's child menu
// when the mouse enters.
if (item != null) {
if ((shownChildMenu != null) || (parentMenu != null) ||
autoOpen) {
doItemAction(item, false);
}
}
}

The only problem with this solution is if the menu style has a non
zero border AND the mouse hovers on the border between menu items for
more than HIDE_MENU_MILLIS, the menu will be closed.

If there's a better solution or some other patch in GWT for this,
please post.

[Brice S.]

Hello,

here's my solution to fix another similar unwanted behaviour : when
the menu is set to autoOpen, that you select a node item (i.e. an item
without subMenu), and that you leave the menu, this item stays
selected.


private class MyMenuBar extends MenuBar {
public MyMenuBar(boolean vertical) {
super(vertical);
}

public void onBrowserEvent(Event event) {
MenuItem item =
findItem(DOM.eventGetTarget(event));
switch(DOM.eventGetType(event)) {
case Event.BUTTON_LEFT:
super.onBrowserEvent(event);
break;
case Event.ONMOUSEOVER:
super.onBrowserEvent(event);
if(item != null)
item.addStyleName("gwt-
MenuItem-selected");
break;
case Event.ONMOUSEOUT:
if(item != null)
item.removeStyleName("gwt-
MenuItem-selected");
break;
default:
break;
}
}

private MenuItem findItem(Element hItem)
{
for(int i = 0; i < menuItems.size(); i++)
{
MenuItem item =
(MenuItem)menuItems.get(i);
if(DOM.isOrHasChild(item.getElement(),
hItem))
return item;
}
return null;
}
}

[Paul]

> ------- Start ----------

> The menubar.setAutoOpen(true) function allows the menu to open when
> mouse moves over the menu. But when mosue moves away, the menu
> remains open.

> I want the menu to close when the mouse moves away. Any ideas?

> ------- End -----------
> I tried to use onBrowserEvent() approach, but it didn't work.
> Does anyone have solution to the following thread?
> Thanks,
> Mahendra

I solved this same issue with the onBrowserEvent() approach.
Basically I wanted two things. I wanted a page to be able to be
displayed if the user clicked on the main menu item. Also I wanted
the sub menu to no longer display if I left the menu area. You see
this behavior on many web pages. It is not typical in desktop apps,
but sometimes we want our web apps to look like web apps.

Here is the onBrowserEvent() method from my main menu:

public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
MenuItem mi = this.getSelectedItem();
if (mi != null) {
if (mi.getSubMenu() != null) {
switch (DOM.eventGetType(event)) {
case Event.ONCLICK :
Command c = mi.getCommand();
if (c != null) {
c.execute();
mi.getSubMenu().setVisible(false);
}
break;
case Event.ONMOUSEOVER :
mi.getSubMenu().setVisible(true);
break;
case Event.ONMOUSEOUT :
if (DOM.eventGetClientY(event) <=
getAbsoluteTop()) {
mi.getSubMenu().setVisible(false);
}
break;
}
}
}
}

and here is the onBrowserEvent() method from my sub menu:
public void onBrowserEvent(Event event) {
super.onBrowserEvent(event);
switch (DOM.eventGetType(event)) {
case Event.ONMOUSEOUT :
if (DOM.eventGetClientX(event) <=
getAbsoluteLeft()) {
setVisible(false);
} else if (DOM.eventGetClientX(event) >=
getAbsoluteLeft() + getOffsetWidth()) {
setVisible(false);
} else if (DOM.eventGetClientY(event) >=
getAbsoluteTop() + getOffsetHeight()) {
setVisible(false);
}
}
}

I hope this helps you solve your issue