包含列表项目的GWT无序列表 [英] GWT Unordered List with List Items

问题描述

我完全停留在gwt中创建一个css驱动菜单。在呈现的结果中，它应该看起来像这样：

$ b

 < div class =topbar > 
< div class =容器固定> 
< h3> 
< a href =class =logo>测试< / a> 
< / h3> 
< ul class =nav secondary-nav> 
 
< a class =menuhref =＃>下拉菜单< / a> 
< ul class =menu-dropdown> 
< li>< a href =>次要连结< / a>< / li> 
< li>< a href =>其他的东西在这里< / a>< / li> 
< li class =divider>< / li> 
< li>< a href =>另一个连结< / a>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / div> 
  

除此之外，我希望在所有超链接中使用clickhandler，并且链接悬停落下。我想过如何生成不同的小部件，例如NavBar，NavBarItem，并将它们稍后添加到NavBar小部件中，例如navBar.add（historytoken1，Text），这会导致附加一个带有超链接的li标签等。

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

我现在几乎整天在这个小部件上进行实验，并且我没有得到任何结果，因为GWT总是在li标签或其他地方之间放置愚蠢的div。在流程面板中只使用小部件的限制也令我疯狂： - ）。

我不是在寻找完成的解决方案，但是有人能给我一个提示去做这个？我的意思是有菜单的ul和li不是那么独特:-)我不明白为什么Gwt不支持这个。也许我正在监督一些事情。

顺便说一句，我正在尝试将这个HTML Bootstrap合并到我真正喜欢的中：

Twitter Boostrap

谢谢

解决方案

您是否尝试过使用UiBinder？例如，以下内容会生成您想要的标记。如果您想要将链接添加点击处理程序，您可以将它们指定为GamboMenu类中的@ UiField's。
$ b

  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扩展了UiBinder< Widget，GamboMenu> {
} 
} 
  

和相应的UiBinder文件：

$ b

 <！ - <！DOCTYPE ui：UiBinder SYSTEMhttp://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 =容器固定> 
< h3>< a href =class =logo>测试< / a>< / h3> 
< ul class =nav secondary-nav> 
< li ui：field =menuOpenclass =menu open> 
< g：InlineHyperlink styleName =menu>下拉式< / g：InlineHyperlink> 
< ul class =menu-dropdown> 
< li>< g：InlineHyperlink>辅助链接< / g：InlineHyperlink>< / li> 
< li>< g：InlineHyperlink>其他内容< / g：InlineHyperlink>< / li> 
< li class =divider>< / li> 
< li>< g：InlineHyperlink>另一个链接< / g：InlineHyperlink>< / li> 
< / ul> 
< / li> 
< / ul> 
< / div> 
< / g：HTMLPanel> 
 
< / ui：UiBinder> 
  

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

解决方案

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>

这篇关于包含列表项目的GWT无序列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！