MenuButton: Show submenu on mouse over instead of click?

[ESherbakova]

MenuButton shows its submenu on mouse click.
If there is a built-in "rollover" behavior? A property or something that I can set to change "click" menu action to "hover"?

Or the only way is to use "overCanvas" as a submenu?

[Isomorphic]

You'd use the overCanvas feature, or just use the mouseOver/mouseOut events.

[thehammeranderson]

I am also interested in changing this behavior, but I am a total newbie to GWT and SmartGWT. I am not sure what you mean by the overCanvas feature or what you mean by use the events.

Please give a bit more detail.

Thanks

[jerome915]

I am very interested with this feature too.
I can open a menu programatically using showMenu() method of MenuBar class
but I didn't figure out how to close it (there is no hideMenu() method).

isc.MenuBar.create({
ID: "menuBar",
menus:[
isc.Menu.create({
ID: "menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
data: [ {title: "New", keyTitle: "Ctrl+N"} ]
})
]
});

menuBar.showMenu(0);


Any help greatly appreciated

[ESherbakova]

I can share my implementation of the "hover" behavior (may be not the best).

Yes, the tricky part is to hide the menu. You can do it by calling this method:

isc.Menu.hideAllMenus();

Moreover, hiding should be "smooth": it should not hide when going through submenus even if mouse accidentally leaves the submenu for a moment, but should disappear once mouse out of the menu/submenus completely.
I used timer for hiding to make it "smooth".

Here is my implementation:

1) override "mouseOver" for the menu button, its Menu object and EACH submenu items to keep track of mouse movements.
In this code you should be able to get the menu "root" - the parent MenuButton (I just get it by the parent's global ID).

mouseOver: function() {
    // Implementation of menu hover behaviour for menu buttons:
    // the method should be overriden for the MenuButton canvas, Menu object and all submenus
    // to keep track of mouse movement

    // Get root - MenuButton
    var root = ...; // get root MenuButton
    if (root.isHoverMenuTimer != null) {
      // clear hiding timer if set: need to kep showing
      isc.Timer.clear(root.isHoverMenuTimer);
      root.isHoverMenuTimer = null;
    }
    // Check if the menu is not shown:
    // isVisible() returns true for undrawn menus, so check for isDrawn() as well
    if(root.menu != null && !(root.menu.isVisible() && root.menu.isDrawn())) {
      // hide all other menus on the page and show the menu
      isc.Menu.hideAllMenus();
      root.showMenu();
    }
}

2) override "mouseOut" for the menu button, its Menu object and EACH submenu items:

  mouseOut: function() {
    // Implementation of menu hover behaviour for menu buttons:
    // the method should be overriden for the MenuButton canvas, Menu object and all submenus
    // to keep track of mouse movement
    var root = ...; // get root MenuButton
    if (root.isHoverMenuTimer != null) {
      // clear old timer if set
      isc.Timer.clear(root.isHoverMenuTimer);
    }
    // Check if the menu is not shown:
    if(root.menu != null && root.menu.isVisible() && root.menu.isDrawn()) {
      // Hide on timer: timer is used to implement smooth hiding;
      // ignore accidental mouse out when moving to submenu: next mouseOver will cancel the timer
      root.isHoverMenuTimer = isc.Timer.setTimeout(function() {
        // Double check if the menu is still showing: only then hide
        if(root.menu != null && root.menu.isVisible() && root.menu.isDrawn()) {
          isc.Menu.hideAllMenus();
          root.isHoverMenuTimer = null;
        }
      }, 250);
    }
  }

3) Set autoDismissOnBlur=false for the Menu element.
By default it's true, so when the submenu is showing it adds special event mask so all mouse events for other elements are getting blocked (except for the currently showing component).
For example, this will need to hide the menu immediately when mouse goes out of the current menu to the neighbor menu button.

[jerome915]

Thanks a lot for your example.
It's almost working now.
There is just one last thing:
To display the menu, I use the method show()
But instead of displaying under the Button, it displays on the far left of the screen.
But, if you click once on the button, then it works after that.

Here is a minimal code that show it

<------------

isc.Menu.create({
ID: "my_menu",
autoDraw: false,
showShadow: true,
shadowDepth: 10,
title: "Run",
data: [
{title: "my_menu_1"},
{title: "my_menu_2"}
]
});

isc.MenuButton.create({
ID: "menuButtonRun",
title: "Run",
left:200,
width: 100,
menu: my_menu
});

mouseIN=function() {
this.menu.show();
}
mouseOUT=function() {
isc.Menu.hideAllMenus();
}

menuButtonRun.mouseOver=mouseIN;
menuButtonRun.menu.mouseOut=mouseOUT;

--------->


(this issue have already been the object of a thread here
=> http://forums.smartclient.com/showthread.php?t=1278)

As a turnaround, is it possible to programatically do the same as what do the button click event ?

[ESherbakova]

I am using the method:

root.showMenu();

in your case it will be

menuButtonRun.showMenu();

It shows the menu at the correct position, same as click.

[jerome915]

Great!!!!
It's work
Thanks a lot !
I should have tried this before
(I didn't do it, because the documentation mention showMenu() method only for menuBar class, not for MenuButton class)

[Isomorphic]

We've added this as a feature, MenuButton.showMenuOnRollOver - you can test it out in tomorrow's nightly

[avninfo]

I am new to this smartgwt. please help me to give me a full program.

Thanks,
Vinoth


Be sure your post includes:

1. the SmartGWT or SmartClient version and browser version(s) involved;

2. for a server-side problem, the complete logs generated during processing of the request;

3. for a client-side problem, the contents of the Developer Console (see FAQ for usage);

4. if there is a JavaScript error, the stack trace logged in the Developer Console (from Internet Explorer if possible); and

5. sample code.

Posts with incomplete information are much more likely to be ignored.