3

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

それに加えて、すべてのハイパーリンクでクリックハンドラーを使用し、リンク「ドロップダウン」にカーソルを合わせたいと思います。NavBar、NavBarItemなどのさまざまなウィジェットを生成し、後でプログラムでnavBar.add（ "historytoken1"、 "Text"）などのNavBarウィジェットに追加することを考えました。これにより、liタグにハイパーリンクなどが追加されます。

li要素にいくつかの新しいクラスを設定できるように、ナビゲーションとcss操作にクリックハンドラーが必要です。

私は現在、この小さなウィジェットでほぼ1日中実験していますが、GWTは常にliタグ間または他の場所に愚かなdivを配置しているため、結果は得られません。フローパネルなどでウィジェットのみを使用するという制限も、私を夢中にさせています:-)。

私は完成した解決策を探していませんが、誰かが私にこれを行う方法のヒントを与えることができますか？メニューにulとliを使用するのはそれほどユニークではないということです:-)そしてGwtがこれをサポートしていない理由がわかりません。多分私は何かを監督しています。

ところで-私はここからこのHTMLブートストラップを取り入れようとしています。

Twitter Boostrap

ありがとう

4

2 に答える 2

5

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>
于 2011-08-22T04:48:29.313 に答える
1

David Chandler は、あなたの質問に対する適切な回答を書いています。

https://turbomanage.wordpress.com/2010/02/11/writing-plain-html-in-gwt/

于 2012-05-02T14:52:15.260 に答える