如何自动隐藏 GWT MenuBar 子菜单？

Question

我们最近将 GWT 菜单栏附加到我们应用程序的一部分，用于菜单目的。

基本上，我希望当您将鼠标悬停在顶级菜单上时打开子菜单，这很容易做到：

menubar.setAutoOpen(true);

我还希望当用户的鼠标离开子菜单时自动隐藏子菜单。理想情况下，有某种延迟，以防止它突然消失，但我会满足于只是隐藏。

这似乎不是内置的，并且 GWT 中的 MenuItem 对象直接子类化 UIObject，这意味着没有相对简单的 onBrowserEvent() 或附加鼠标侦听器的地方。可能扩展 MenuItem 和下沉/不下沉事件可以让我添加此行为，但我不确定这是否是最好的方法。

那么自动隐藏 GWT 子菜单的最佳方法是什么？

谢谢。

Answer 1

经过多次可怕的黑客尝试实现类似的目标后，我们编写了自己的 层叠菜单，作为 GWT Portlet 的一部分框架。它显示来自 HTML 模板的菜单项和子菜单，如下所示：

<a href="#home">Home</a>
<a href="#submenu1()">Sub Menu 1</a>
<a href="#away">Away</a>

<div id="submenu1">
    <a href="#hello_world">Hello World</a>
    <a href="#free_memory">Free Memory</a>
    <a href="#submenu2()">Sub Menu 2</a>
</div>

<div id="submenu2">
    <a href="#command_demo">Command Demo</a>
    <a href="#command1()">Command1</a>
    <a href="#command2(arg1,arg2)">Command2</a>
</div>

看起来像方法调用广播 CommandEvent 的 URL。其他人像平常一样触发历史令牌更改。请查看在线演示以查看实际菜单。

Answer 2

这是一个相当完整的解决方案，但并不完美，在代码后进行了解释：

public class MyMenuBar extends Composite {

    private class OpenTab implements ScheduledCommand {
        private String wid;

        public OpenTab(String windowId) {
            wid = windowId;
        }

        @Override
        public void execute() {
            WinUtl.newAppTab(wid);
        }
    }

    interface MyMenuBarUiBinder extends UiBinder<Widget, MyMenuBar> {}

    private static MyMenuBarUiBinder uiBinder =
                                GWT.create(MyMenuBarUiBinder.class);

    @UiField MenuBar mainMenu;

    @UiField MenuBar subsMenu;
    @UiField MenuItem subsChoice1;
    @UiField MenuItem subsChoice2;
    @UiField MenuItem subsChoice3;

    @UiField MenuBar svcPrvdrMenu;
    @UiField MenuItem svcPrvdrChoice1;
    @UiField MenuItem svcPrvdrChoice2;

    @UiField MenuBar netMgtMenu;
    @UiField MenuItem netMgtChoice1;

    @UiField MenuBar reportsMenu;
    @UiField MenuItem reportsChoice1;

    @UiField MenuBar auditsMenu;
    @UiField MenuItem auditsChoice1;

    @UiField MenuBar securityMenu;
    @UiField MenuItem securityChoice1;

    @UiField MenuBar helpMenu;
    @UiField MenuItem helpChoice1;

    private boolean subMenuPopped = false;
    private boolean subMenuEntered = false;

    private static Type<MouseOverHandler> OVR_EVT = MouseOverEvent.getType();
    private static Type<MouseOutHandler> OUT_EVT = MouseOutEvent.getType();

    private MouseOverHandler mainOverHandler = new MouseOverHandler() {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            subMenuPopped = true;
        }
    };

    private MouseOutHandler mainOutHandler = new MouseOutHandler() {
        @Override
        public void onMouseOut(MouseOutEvent event) {
            Element e = event.getRelativeElement()
            boolean movedUp = (event.getRelativeY(e) < 0);
            if ((movedUp && subMenuPopped) || subMenuEntered) {
                subMenuPopped = false;
                subMenuEntered = false;
                mainMenu.closeAllChildren(true);
            }
        }
    };

    private MouseOverHandler subOverHandler = new MouseOverHandler() {
        @Override
        public void onMouseOver(MouseOverEvent event) {
            subMenuEntered = true;
        }
    };

    private MouseOutHandler subOutHandler = new MouseOutHandler() {
        @Override
        public void onMouseOut(MouseOutEvent event) {
            subMenuPopped = false;
            subMenuEntered = false;
            mainMenu.closeAllChildren(true);
        }
    };

    public MyMenuBar() {
        initWidget(uiBinder.createAndBindUi(this));

        mainMenu.addStyleName("npac-MenuBar");
        mainMenu.setAutoOpen(true);
        mainMenu.setAnimationEnabled(true);
        mainMenu.setFocusOnHoverEnabled(true);

        subsChoice1.setScheduledCommand(new OpenTab(Names.Wid.NPA));

        mainMenu.addDomHandler(mainOverHandler, OVR_EVT);
        mainMenu.addDomHandler(mainOutHandler, OUT_EVT);

        addHandlers(subsMenu);
        addHandlers(svcPrvdrMenu);
        addHandlers(netMgtMenu);
        addHandlers(reportsMenu);
        addHandlers(auditsMenu);
        addHandlers(securityMenu);
        addHandlers(helpMenu);
    }

    private void addHandlers(MenuBar m) {
        m.addDomHandler(subOverHandler, OVR_EVT);
        m.addDomHandler(subOutHandler, OUT_EVT);
    }
}

这处理鼠标悬停打开子菜单，然后用户向上移动鼠标，离开主菜单（子菜单关闭）的情况。它不处理鼠标沿对角线向下移动，经过子菜单的任一侧（子菜单保持打开状态）
当然可以改进，但我刚刚让它工作并想分享;-)

Answer 3

不需要可怕的黑客攻击或依赖 JAVA 中的 CSS 来实现带有子菜单的菜单栏的自动隐藏。我创建了一个完整的父+子下拉菜单示例，其中鼠标悬停打开和鼠标输出关闭，并提供每个部分的解释供其他人使用。

我见过人们遇到的常见问题是运行 ((JMenu)e.getSource()).doClick(); mouseEntered 上的 模拟单击​​ JMenu 父级之一，但不能简单地添加到 mouseExited 方法，因为 MouseListener 需要附加到子 MenuItems 以及 JMenu 父级。 （在对 MenuBar 的正常分配中它不会执行此操作 - 仅附加到父 JMenu 对象）。

此外，由于尝试让 MouseExit 侦听器仅在鼠标离开整个菜单结构（即子菜单下拉列表）时触发“关闭”方法，因此会出现问题。

下面是从我的实时应用程序中获取的完整工作答案：

我解决鼠标移出时菜单关闭的方法是在构造函数顶部运行一个布尔变量“isMouseOut”来跟踪，然后以更加面向对象的方式分配 MouseListener，以便在用户与菜单交互时跟踪多个 MouseIn-MouseOut 事件。它调用一个单独的 menuClear 方法，该方法作用于布尔值“isMouseOut”的状态。该类实现 MouseListener。这就是它的完成方式。

创建一个 ArrayList，首先将所有菜单项添加到该数组中。像这样：

    Font menuFont = new Font("Arial", Font.PLAIN, 12);
    JMenuBar menuBar = new JMenuBar();
    getContentPane().add(menuBar, BorderLayout.NORTH); 

// Array of MenuItems
    ArrayList<JMenuItem> aMenuItms = new ArrayList<JMenuItem>();
    JMenuItem mntmRefresh = new JMenuItem("Refresh");
    JMenuItem mntmNew = new JMenuItem("New");
    JMenuItem mntmNormal = new JMenuItem("Normal");
    JMenuItem mntmMax = new JMenuItem("Max");
    JMenuItem mntmStatus = new JMenuItem("Status");
    JMenuItem mntmFeedback = new JMenuItem("Send Feedback");
    JMenuItem mntmEtsyTWebsite = new JMenuItem("EtsyT website");
    JMenuItem mntmAbout = new JMenuItem("About");

    aMenuItms.add(mntmRefresh);
    aMenuItms.add(mntmNew);
    aMenuItms.add(mntmNormal);
    aMenuItms.add(mntmMax);
    aMenuItms.add(mntmStatus);
    aMenuItms.add(mntmFeedback);
    aMenuItms.add(mntmEtsyTWebsite);
    aMenuItms.add(mntmAbout);

然后在此阶段迭代 arrayList，使用 for() 循环添加 MouseListener：

  for (Component c : aMenuItms) {
        if (c instanceof JMenuItem) {
            c.addMouseListener(ml);
        }
    }

现在为 MenuBar 设置 JMenu 父级：

// Now set JMenu parents on MenuBar
    final JMenu mnFile = new JMenu("File");
    menuBar.add(mnFile).setFont(menuFont);
    final JMenu mnView = new JMenu("View");
    menuBar.add(mnView).setFont(menuFont);
    final JMenu mnHelp = new JMenu("Help");
    menuBar.add(mnHelp).setFont(menuFont);

然后将下拉菜单项子级添加到 JMenu 父级：

// Now set menuItems as children of JMenu parents
    mnFile.add(mntmRefresh).setFont(menuFont);
    mnFile.add(mntmNew).setFont(menuFont);
    mnView.add(mntmNormal).setFont(menuFont);
    mnView.add(mntmMax).setFont(menuFont);
    mnHelp.add(mntmStatus).setFont(menuFont);
    mnHelp.add(mntmFeedback).setFont(menuFont);
    mnHelp.add(mntmEtsyTWebsite).setFont(menuFont);
    mnHelp.add(mntmAbout).setFont(menuFont);

将 mouseListeners 作为单独的 JMenu 父级添加到步骤：

    for (Component c : menuBar.getComponents()) {
        if (c instanceof JMenu) {
            c.addMouseListener(ml);
        }
    }

现在子 menuItem 元素都有自己的侦听器，这些侦听器与父 JMenu 元素和 MenuBar 本身是分开的 - 识别 MouseListener() 实例化中的对象类型非常重要，以便在鼠标悬停时自动打开菜单（在本例中为 3x JMenu 父级）但也避免了子级异常错误，并允许清晰地识别菜单结构的 mouseOUT，而无需尝试监视鼠标位置。 MouseListener 如下：

MouseListener ml = new MouseListener() {
        public void mouseClicked(MouseEvent e) {
        }

        public void mousePressed(MouseEvent e) {
        }

        public void mouseReleased(MouseEvent e) {
        }

        public void mouseExited(MouseEvent e) {
            isMouseOut = true;
            timerMenuClear();
        }

        public void mouseEntered(MouseEvent e) {
            isMouseOut = false;
            Object eSource = e.getSource();
            if(eSource == mnHelp || eSource == mnView || eSource == mnFile){
                ((JMenu) eSource).doClick();
            }
        }
    }; 

上面仅模拟鼠标单击 JMenu“父级”（本例中为 3x），因为它们是子菜单下拉列表的触发器。 timerMenuClear() 方法调用 MenuSelectionManager 来清空在真正的 mouseOUT 时处于活动状态的任何选定路径点：

public void timerMenuClear(){
    ActionListener task = new ActionListener() {
      public void actionPerformed(ActionEvent e) {
          if(isMouseOut == true){
              System.out.println("Timer");
          MenuSelectionManager.defaultManager().clearSelectedPath();
          }
      }
  };        
    //Delay timer half a second to ensure real mouseOUT
  Timer timer = new Timer(1000, task); 
  timer.setInitialDelay(500);        
  timer.setRepeats(false);
  timer.start();
}

我进行了一些测试，监视在开发过程中我可以在 JVM 中访问哪些值 - 但它确实有效！即使使用嵌套菜单:)我希望很多人发现这个完整的示例非常有用。

Answer 4

使用此代码：

public class MenuBarExt extends MenuBar {

public MenuBarExt()
{
    super();
}

@Override
public void onBrowserEvent(Event event)
{
    switch (DOM.eventGetType(event))
    {
        case Event.ONMOUSEOUT:
            closeAllChildren(false);
            break;
        default:
            super.onBrowserEvent(event);
            break;

    } 
    super.onBrowserEvent(event);
}

}