Question

I am completely stuck with the creation of a css driven menu in gwt. In the rendered result it should look exactly like this:

    <div class="topbar">
                <div class="container fixed">
                    <h3>
                        <a href="" class="logo">test</a>
                    </h3>
        <ul class="nav secondary-nav">
              <li class="menu open">
                <a class="menu" href="#">Dropdown</a>
                <ul class="menu-dropdown">
                  <li><a href="">Secondary link</a></li>
                  <li><a href="">Something else here</a></li>
                  <li class="divider"></li>
                  <li><a href="">Another link</a></li>
                </ul>
              </li>
        </ul>
</div>
</div>

In addition to that I want to get use of the clickhandler in all Hyperlinks and the hover of the link “Dropdown”. I thought about generating different widgets like NavBar, NavBarItem and adding them later programmaticaly to the NavBar widget like navBar.add(“historytoken1”, “Text”) and this will result in appending a li tag with a hyperlink to it etc.

I need the clickhandler for navigation and as well for css manipulation so that I can set some new classes on the li elements.

I am experimenting now almost the whole day on this little widget and I am getting no results as GWT is always putting stupid divs between the li tags or somewhere else. The limitation of using only widgets in flowpanels etc. is also driving me crazy :-).

I am not looking for a finished solution but can somebody giving me a hint how to do this? I mean having ul and li for menu is not that unique 🙂 and I dont understand why Gwt is not supporting this. Maybe I am overseeing something.

BTW- i am trying to incorporate this HTML Bootstrap from here which I really like:

Twitter Boostrap

Thanks

Answer 1

Have you tried using UiBinder? For instance, the following will generate your desired markup. If you wanted to add click handlers to the links, you can specify them as @UiField’s in the GamboMenu class.

public class GamboMenu extends Composite {

            @UiField LIElement menuOpen;

    public GamboMenu() {
        initWidget(uiBinder.createAndBindUi(this));
                    menuOpen.getStyle().setDisplay(Display.NONE);
    }

    GamboMenuUiBinder uiBinder = GWT.create(GamboMenuUiBinder.class);

    interface GamboMenuUiBinder extends UiBinder<Widget, GamboMenu> {
    }
}

And the corresponding UiBinder file:

<!-- <!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> -->
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui"
    >

    <g:HTMLPanel styleName="topbar">
        <div class="container fixed">
              <h3><a href="" class="logo">test</a></h3>
            <ul class="nav secondary-nav">
                    <li ui:field="menuOpen" class="menu open">
                    <g:InlineHyperlink styleName="menu">Dropdown</g:InlineHyperlink>
                    <ul class="menu-dropdown">
                      <li><g:InlineHyperlink>Secondary link</g:InlineHyperlink></li>
                      <li><g:InlineHyperlink>Something else here</g:InlineHyperlink></li>
                      <li class="divider"></li>
                      <li><g:InlineHyperlink>Another link</g:InlineHyperlink></li>
                    </ul>
                    </li>
            </ul>
        </div>
    </g:HTMLPanel>

</ui:UiBinder>