带有 GWT 的 CSS 菜单

Question

谁能告诉我如何将 CSS 菜单与 GWT 集成？我发现了一个很棒的网站，名为 http://www.cssmenumaker.com/，我喜欢它创建的菜单，但我不确定如何将其集成到我的 GWT 应用程序的其余部分中。如何使菜单中的链接与 GWT 交互。

如有任何帮助，我们将不胜感激。

Answer 1

使用uri片段作为gwt视图位置的链接地址并实现历史监听器。使用这种方法，您的 gwt 应用程序不会将事件绑定到菜单，而只是响应 uri 片段更改（通过历史侦听器）

例如，菜单中的链接可能指向：

/staticPage1.html

/staticPage2.html

/gwt.html#token1

/gwt.html#token2

然后，您可以在菜单中让一些链接指向非 gwt 页面，而其他链接则指向托管 gwt 应用程序的页面。然后，您的历史侦听器可以触发 gwt 应用程序中的视图。我目前正在使用这种方法与 css 菜单和 gwt。

Answer 2

我发现了另一种方法可以实现这一点。我使用 GQuery 来选择具有类名的所有元素。在我的 HTML 中，我将该类名称放在我需要与其关联的操作的所有列表项中。然后，我在

hookUpMenu()

方法中调用

onModuleLoad()

，并使用内置的 History 方法来管理页面更改。

然后我实现了

ValueChangeHandler

接口来处理页面更改以及交换内容。

private void hookUpMenu() {
  $(".actionable").click(new Function() {
    @Override
    public boolean f(com.google.gwt.user.client.Event event) {
      handlePageChange($(event).attr("href"));
      return true;
    }
  });

  History.addValueChangeHandler(new HistoryManager());
}

private void handlePageChange(String href) {
  if (ClientUtil.isNotBlank(href)) {
    String[] split = href.split("#");
    String token = split[split.length-1];
    History.newItem(token);
  }
}

HTML 片段：

<li><a class="actionable" href="#clientcode">Client Code</a></li>

Answer 3

看来我发帖有点太早了。这是我能想到的（但我愿意采用更优雅的方式来做到这一点）：

带有菜单的静态 HTML 文件如下所示：

<li><a href="#" id="manage_events">Manage Events</a></li>

我能够注册鼠标按下事件并通过将其分配给该元素来监听它。我看到的主要缺点是我必须对每个菜单项执行此操作。这是我想出的一些代码：

Element e = RootPanel.get("manage_events").getElement();
DOM.sinkEvents(e, com.google.gwt.user.client.Event.ONMOUSEDOWN);
DOM.setEventListener(e, new EventListener() {
        
    @Override
    public void onBrowserEvent(com.google.gwt.user.client.Event event) {
        Log.debug("test");
    }
});