與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。