Help needed animating menu on ToolStrip

[cjustice]

I would like to animate the appearance of a menu from a ToolStrip by mousing over a ToolStripMenuButton. When the user mouses over the ToolStripMenuButton, the menu should slide in by animation, and when the user moves the mouse off the ToolStripMenuButton or the resulting menu, the menu should then slide out by animation.

I've built code that I think should do this, but when the user moves the mouse cursor over the ToolStripMenuButton, the menu animates from 0, 0 (top left) instead of under the ToolStripMenuButton. Mouse out events never fire, so the menu doesn't hide as desired.

If you click on the ToolStripMenuButton, the menu appears where it should, under the ToolStripMenuButton. Subsequent mouse overs then cause the animated menu slide in to occur under the ToolStripMenuButton. Mouse out events still don't fire.

Here is a simple test case that reproduces the behavior.

package com.smartgwt.sample.client;


import com.google.gwt.core.client.EntryPoint;
import com.smartgwt.client.core.KeyIdentifier;
import com.smartgwt.client.types.AnimationEffect;
import com.smartgwt.client.util.KeyCallback;
import com.smartgwt.client.util.Page;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Label;
import com.smartgwt.client.widgets.events.MouseOutEvent;
import com.smartgwt.client.widgets.events.MouseOutHandler;
import com.smartgwt.client.widgets.events.MouseOverEvent;
import com.smartgwt.client.widgets.events.MouseOverHandler;
import com.smartgwt.client.widgets.layout.VStack;
import com.smartgwt.client.widgets.menu.Menu;
import com.smartgwt.client.widgets.menu.MenuItem;
import com.smartgwt.client.widgets.toolbar.ToolStrip;
import com.smartgwt.client.widgets.toolbar.ToolStripMenuButton;


/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class CustomDS implements EntryPoint
{

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad()
	{

		KeyIdentifier debugKey = new KeyIdentifier();
		debugKey.setCtrlKey( true );
		debugKey.setKeyName( "D" );

		Page.registerKey( debugKey, new KeyCallback()
		{
			public void execute(String keyName)
			{
				SC.showConsole();
			}
		} );

		VStack vStack = new VStack();
		vStack.setLeft( 175 );
		vStack.setTop( 75 );
		vStack.setWidth( "70%" );
		vStack.setMembersMargin( 20 );

		Label label = new Label();
		label.setContents( "<ul>" + "<li>On first mouse over of Menu Button, menu animates at 0, 0 (top left) instead of "
				+"under the Menu Button.</li><li>If the menu is activated by mouse clicking, the menu appears correctly under the menu"
				+ " Button.  Subsequent mouse overs then cause the animated menu to appear under the Menu button.</li>"
				+"<li>Note that mouse out events do not fire as expected.</li>"
				+ "</ul>" );
		vStack.addMember( label );

		ToolStrip toolstrip = new ToolStrip();;
		final Menu menu = new Menu();
		menu.setShowShadow( true );
		menu.setShadowDepth( 3 );

		MenuItem menu1 = new MenuItem( "menu 1");
		MenuItem menu2 = new MenuItem( "menu2" );

		menu.setItems( menu1, menu2 );
		
		ToolStripMenuButton menuButton = new ToolStripMenuButton( "Menu Button", menu );
		menuButton.setWidth( 200 );
		menuButton.setMenuAnimationEffect( "slide" );

		menuButton.addMouseOverHandler( new MouseOverHandler()
		{
			@Override
			public void onMouseOver(MouseOverEvent event)
			{
				System.out.println("Mouse over settings button");
				menu.animateShow( AnimationEffect.SLIDE );								
			}
		});
		menuButton.addMouseOutHandler( new MouseOutHandler()
		{
			
			@Override
			public void onMouseOut(MouseOutEvent event)
			{
				System.out.println("No longer hovering over settings button.");
				menu.animateHide( AnimationEffect.SLIDE );				
			}
		});
		
		toolstrip.addMenuButton( menuButton );
		
		
		vStack.setMembers( label, toolstrip );

		vStack.draw();

	}

}

I'm running SmartGWT Pro 2.5 from the nightly build of January 25th, 2011, on Firefox 3.6.13 on Ubuntu 10.04.

TIA for your help and advice.

[Isomorphic]

If you directly show the menu yourself, you'll need to add code to place it under the MenuButton.

[cjustice]

Okay, I was able to do that by using the code below. However, I still don't get MouseOut events, so when I leave the menu, the menu remains open until the user clicks outside the Menu. I'd like the menu to close (via slide animation) when the user's mouse cursor leaves the MenuButton or the menu. Any ideas how to do that?

	menuButton.addMouseOverHandler( new MouseOverHandler()
		{
			@Override
			public void onMouseOver(MouseOverEvent event)
			{
				System.out.println("Mouse over settings button");
				menu.moveTo( menuButton.getAbsoluteLeft(), menuButton.getAbsoluteTop() + menuButton.getBottom());
				menu.animateShow( AnimationEffect.SLIDE );				
			}
		});

Thanks!
Chris

[kylemwhite]

Did you ever figure this out? I have the same issue.

[gwtdeveloper2011]

i am having the same issue , i have a ToolStripMenuButton and when i mouseover on the toolstripmenubutton i get a menu and when i mouse out on the menu i am able to hide the menu, but the issue is when i mouse over again after the mouseout i dont get the menu, i will have to click on a different section of the page then have to mouseover to get the menu.

Can someone please help me out here if i am missing anything here.

ToolStripMenuButton toolStripButton;

Menu menu = getToolStripMenuButton(application.getTabWidgetList());
toolStripButton.setMenu(menu);

toolStripButton.addMouseOverHandler(new MouseOverHandler()
                {
                    public void onMouseOver(MouseOverEvent event)
                    {
                        toolStripButton.setShowMenuBelow(true);                                         
                        toolStripButton.getMenu().show();
                    }
                });

menu.addMouseOutHandler(new MouseOutHandler()
                {
                    public void onMouseOut(MouseOutEvent event)
                    {
                                                         
                        toolStripButton.getMenu().hide();
                    }
                });

menu.addMouseOverHandler(new MouseOverHandler()
                {
                    public void onMouseOver(MouseOverEvent event)
                    {
                        toolStripButton.setShowMenuBelow(true);                                         
                        toolStripButton.getMenu().show();
                    }
                });