Question

I have some code in HTML and CSS where HTML looks like this:

<div id="avmenu">
<h2 class="hide">Menu:</h2>
<ul>
<li><a href="#">Welcome!</a></li>

And my CSS looks like this:

#avmenu
{
Style details
}

#avmenu li a:hover
{
Style details
}

a:hover{ Hover styles }

So above piece of code shows a menu item and does some animation like color change etc when you hover your mouse over the menu. I have show bare minimum styles sufficient to explain problem at hand.

Now when I migrate this to GWT. We have used Label as menu items, and I want to achieve same effect in GWT too. Here is what I have tried

1. I tried to apply CSS Style named “avmenu”, this applied basic styles, but of course didn’t get animation
2. Then I tried DOM.setElementAttribute(orgLbl.getElement(), "id", "avmenu"); but that also didn’t help.

What would be my best option with minimal time and effort to achieve same effect? I can of course listen to events on Label and then change the style, but doing that for all of the widgets would be an overkill!

EDIT- More info: I am building Menu using Label, and adding that to tree

userMgmtLbl = new Label("User mgmt");
userMgmtLbl.setStyleName(HOME_MENU_LBL_STYLE);
treeItem_1 = configParentTL.addItem(userMgmtLbl);
userMgmtLbl.addClickHandler(Click logic)


Answer 1

One of the problems that you’re running into is that Tree and TreeItem in GWT are composed of arbitrary divs, rather than ul and li as in your original html. (When indoubt you can inspect the DOM of GWT’s showcase to see how the underlying widgets are created).

What this means is that your selectors, such as “#avmenu li a:hover” will no longer work.

If your navigation menu is static, your best bet is probably to use GWT ui-binders, which are basically gwts templating system. If you use a HTMLPanel as your root widget, you can effectively use all your original HTML verbatim and not worry about trying to mash all the DOM elements into corresponding widgets.

A basic widget would look something like this:

NavigationWidget.java
public final class YourWidget extends Composite {

  YourWidget() {
    initWidget(binder.createAndBindUi(this));
  }

  private static final Binder binder = GWT.create(Binder.class);
  interface Binder extends UiBinder<Widget, YourWidget> {}
}

NavigationWidget.ui.xml

<ui:UiBinder
   xmlns:gwt="urn:import:com.google.gwt.user.client.ui"
   xmlns:ui="urn:ui:com.google.gwt.uibinder">

  <gwt:HTMLPanel>
    <div id="avmenu">
      <h2 class="hide">Menu:</h2>
      <ul>
      <li><a href="#">Welcome!</a></li>
    </div>
  </gwt:HTMLPanel>

</ui:UiBinder>

As an aside, in this example HTMLPanel adds a DIV of its own to the DOM, making the second div a bit redundant. Unfortunately, widgets in gwt don’t have an easy way of setting the ID attribute from templates, so you’re stuck with the second div unless you want to switch your #avmenu selector to .avmenu