3

GWT UIBinder で単純な CSS ベースのメニューを実装しようとしていますが、特定の部分で問題が発生しています。

このメニューには、「新しいセッション」と「現在のセッション」という 2 つの主要な項目があります。ユーザーが [新しいセッション] をクリックすると、[現在のセッション] の下のサブリストに新しいリスト項目が追加されます。

メニューのプレーンな HTML バージョンは次のとおりです。

<div id="cssmenu">
    <ul>
        <li>New Session</li>
        <li class="has-sub">Current Sessions
          <ul>
             <li>Session 1</li>
             <li>Session 2</li>
          </ul>
       </li>
    </ul>
</div>

UIBinder で基本的な形式を実装するのは非常に簡単でしたが、動的なサブリストが問題を引き起こしています。

私が思いついた基本的なUIBinderテンプレートは次のとおりです。

XML:

<!-- Menu.ui.xml -->
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'>
    <g:HTMLPanel id="cssmenu" ui:field="menuDiv">
        <ul>
            <li ui:field="newSessionItem">New Session</li>
            <li class="has-sub" ui:field="currentSessionItem">
                Current Sessions
                <ul id="currentSessionSublist" ui:field="currentSessionSublistItem">
                    <li>Session 1</li>
                    <li>Session 2</li>
                </ul>
            </li>
        </ul>
    </g:HTMLPanel>
</ui:UiBinder>

ジャバ:

// Menu.java
public class Menu extends UIObject {
    interface MenuBinder extends UiBinder<DivElement, Menu> {}
    private static MenuBinder uiBinder = GWT.create(MenuBinder.class);

    @UiField HTMLPanel menuDiv;
    @UiField LIElement newSessionItem;
    @UiField LIElement currentSessionItem;
    @UiField UListElement currentSessionSublistItem;

    public Menu() {
        setElement(uiBinder.createAndBindUi(this));
    }

    @UiHandler("newSessionItem")
    void handleClick(ClickEvent e) {
        addCurrentSession();
    }

    private void addCurrentSession() {
        // dynamic LI should be added here
    }
}

に動的リスト項目を追加する方法がわかりませんaddCurrentSession()。要素にコンパイルするカスタム ウィジェットを追加しようとしました<li>が、 を使用して追加できませんでしたRootPanel.get("currentSessionSublist").add(item)。HTML とウィジェットの両方を HTMLPanel 内にネストすることは可能ですが、ウィジェットを HTML 内にネストすることはできないことをどこかで読みました。この場合、サブリストにアイテムを追加するにはどうすればよいですか? 後で特定のリスト項目をプログラムで削除する機能を追加できるように、ウィジェット ルートに行きたいと思っていました。

GWT の Menu、MenuItem などはテーブルにコンパイルされるため、使用したくありません。

4

2 に答える 2

4

リストにアイテムを動的に追加するには、これを試してください（順序付き/順序なし）： 

final LIElement listItem = Document.get().createLIElement();
listItem.setInnerText("your text"); // or setInnerHTML("...")
this.currentSessionSublistItem.appendChild(listItem);
于 2013-11-20T14:54:05.607 に答える
2

核心は通過することHTMLPanelです： 

menuDiv.add(item, currentSessionSublistItem);
于 2013-04-09T15:37:08.473 に答える