Dynamic nested unordered lists in GWT UIBinder

Question

I'm trying to implement a simple CSS-based menu in GWT UIBinder, but I'm having some difficulties with one particular part.

The menu has two main-level items: "New session" and "Current sessions." When the user clicks "New session", a new list item should be added to the sublist under "Current sessions."

Here is the plain HTML version of the menu:

<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>

The basic format was pretty simple to implement in UIBinder, but the dynamic sublist is giving me difficulties.

Here's the basic UIBinder template that I came up with:

The 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>

The 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
    }
}

I'm unsure how to add the dynamic list items in addCurrentSession(). I tried adding a custom widget that compiles to a <li> element, but was unable to add it using RootPanel.get("currentSessionSublist").add(item). I read somewhere that while it's possible to nest both HTML and Widgets inside an HTMLPanel, Widgets cannot be nested within HTML. If this is the case, how would I go about adding items to the sublist? I was hoping to go the widget route so I could later add the ability to remove a specific list item programmatically.

I don't want to use GWT's Menu, MenuItem, etc because those compile to tables.

Rob Rob · Accepted Answer · 2013-11-20T14:54:05

Try this to dynamically add an item to a list (ordered/unordered):

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

Dynamic nested unordered lists in GWT UIBinder

2 Answers