Question

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

我不想使用GWT的Menu，MenuItem等，因为那些编译成表格。

Answer 1

尝试将动态添加到列表中（有序/无序）：

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

Answer 2

关键是要通过HTMLPanel：

menuDiv.add(item, currentSessionSublistItem);

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

2 个答案: