Question

Can anyone tell me how to integrate a CSS Menu with GWT? I found a great site called http://www.cssmenumaker.com/ and I like the menu it creates, but I’m not sure how I can integrate that into the rest of my GWT app. How can I make the links in the menu interact with GWT.

Any help would be appreciated.

Answer 1

I found yet another way this can be achieved. I used GQuery to select all elements with a class name. In my HTML, I put that class name on all my list items I need to have an action associated with it. I then callhookUpMenu()in theonModuleLoad()method and use the built-in History methods to manage page change.

I then implemented theValueChangeHandlerinterface to handle the page changes and swap content in and out.

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);
  }
}

A snippet of HTML:

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