CSS Menu with GWT

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

Looks like I posted a little too soon. Here is what I was able to come up with, please help out if you have a more elegant way to do this:

My static HTML file with my menu looks like so:

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

I was able to register the mouse down event and listen for it by assigning it to that element. The main downside I see is that I have to do this for every menu item. Here is some code I came up with:

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

Does anyone have a better way?

Answer 2

Use uri fragments as the link addresses for the gwt view locations and implement a history listener. With this approach your gwt app does not bind events to the menu and instead just responds to the uri fragment changing (via history listener)

As an example the links in the menu might point to:

/staticPage1.html

/staticPage2.html

/gwt.html#token1

/gwt.html#token2

Then you can have some links in the menu point to non-gwt pages and other point to a page that hosts your gwt app. Your history listener can then trigger the views in your gwt app. I am currently using this approach with a css menu and gwt.

Answer 3

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>