3

我正在尝试在 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>

爪哇：

// 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 回答