GWT UIBinder 中的动态嵌套无序列表答案

【问题标题】：Dynamic nested unordered lists in GWT UIBinderGWT UIBinder 中的动态嵌套无序列表
【发布时间】：2013-04-01 03:02:35
【问题描述】：

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

菜单有两个主要级别的项目：“新会话”和“当前会话”。当用户单击“新会话”时，应将一个新列表项添加到“当前会话”下的子列表中。

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

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

【问题讨论】：

标签： gwt uibinder

【解决方案1】：

试试这个动态添加一个项目到列表（有序/无序）：

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

【讨论】：

【解决方案2】：

关键是通过HTMLPanel：

menuDiv.add(item, currentSessionSublistItem);

【讨论】：