gwt - GWT UIBinder 中的动态嵌套无序列表

Question

我正在尝试在 GWT UIBinder 中实现一个简单的基于 CSS 的菜单，但我在某个特定部分遇到了一些困难。

菜单有两个主要级别的项目:“新 session ”和“当前 session ”。当用户点击“新 session ”时，一个新的列表项应该被添加到“当前 session ”下的子列表中。

这是菜单的纯 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>

Java:

// 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) 添加它.我在某处读到，虽然可以在 HTMLPanel 中同时嵌套 HTML 和 Widget，但 Widget 不能嵌套在 HTML 中。如果是这种情况，我将如何将项目添加到子列表？我希望走小部件路线，以便以后可以添加以编程方式删除特定列表项的功能。

我不想使用 GWT 的菜单、菜单项等，因为它们会编译成表格。

Answer 1

尝试将项目动态添加到列表(有序/无序):

final LIElement listItem = Document.get().createLIElement();
listItem.setInnerText("your text"); // or setInnerHTML("...")
this.currentSessionSublistItem.appendChild(listItem);