具有列表项的GWT无序列表

Question

我完全坚持在gwt中创建一个css驱动的菜单.在渲染结果中,它应该看起来像这样:

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

除此之外,我想在所有超链接中使用clickhandler并悬停链接"Dropdown".我想过产生不同的小部件一样的NavBar,NavBarItem和增加他们后来programmaticaly到的NavBar控件像navBar.add("historytoken1","文本"),这将导致追加L1标签,并链接到它等等.

我需要用于导航的clickhandler以及css操作,以便我可以在li元素上设置一些新类.

我现在几乎整天在这个小小部件上进行实验,我没有得到任何结果,因为GWT总是在li标签之间或其他地方放置愚蠢的div.在flowpanels等中仅使用小部件的限制也让我发疯:-).

我不是在寻找一个完整的解决方案,但有人可以给我一个提示如何做到这一点？我的意思是有菜单的ul和li不是那么独特:-)我不明白为什么Gwt不支持这个.也许我在监督某些事情.

顺便说一下 - 我正在尝试将这个HTML Bootstrap从这里加入,我非常喜欢:

Twitter Boostrap

谢谢

Answer 1

你尝试过使用UiBinder吗？例如,以下内容将生成所需的标记.如果要将链接处理程序添加到链接,可以在GamboMenu类中将它们指定为@UiField.

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> {
    }
}

和相应的UiBinder文件:

<!-- <!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>