与GWT的CSS菜单

Question

任何人都可以告诉我如何整合CSS菜单与GWT？我发现了一个名为http://www.cssmenumaker.com/的好网站，我喜欢它创建的菜单，但我不确定如何将其整合到我的其他GWT应用中。如何让菜单中的链接与GWT进行交互。

任何帮助，将不胜感激。

Answer 1

我发现了另一种可以实现的方式。我使用GQuery来选择具有类名称的所有元素。在我的HTML中，我将所有列表项中的类名放在需要与之关联的操作上。然后我在onModuleLoad()方法中调用hookUpMenu()，并使用内置的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 2

看起来我发布了一些过早。以下是我能拿出，请大家帮帮忙，如果你有一个更优雅的方式来做到这一点：

与我的菜单我的静态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"); 
    } 
}); 

有没有人有更好的方法？

Answer 3

使用uri片段作为gwt视图位置的链接地址并实现历史监听器。用这种方法你的GWT应用程序不绑定事件菜单，而不是仅仅响应URI片段变化（通过历史监听器）

举个例子在菜单中的链接可能指向：

/staticPage1。 HTML

/staticPage2.html

/gwt.html#token1

/gwt.html#token2

的ñ你可以在菜单中有一些链接指向非gwt页面，并指向承载gwt应用程序的页面。您的历史监听器然后可以在您的gwt应用程序中触发视图。我目前使用这种方法与CSS菜单和gwt。