Динамические вложенные неупорядоченные списки в GWT UIBinder

Question

Я пытаюсь реализовать простое CSS-меню в GWT UIBinder, но у меня возникают некоторые трудности с одной конкретной частью.

В меню есть два элемента основного уровня: «Новая сессия» и «Текущие сеансы». Когда пользователь нажимает «Новый сеанс», новый элемент списка следует добавить в подсписку в разделе «Текущие сеансы».

Вот простая 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 и Widgets внутри HTMLPanel, виджеты не могут быть вложены в HTML. Если это так, как я могу добавить элементы в подсписку? Я надеялся пойти по маршруту виджетов, чтобы позже добавить возможность программно удалить конкретный элемент списка.

Я не хочу использовать меню GWT, MenuItem и т. Д., Потому что они компилируются в таблицы.

Answer 1

Затруднение это пройти через HTMLPanel:

menuDiv.add(item, currentSessionSublistItem); 

Answer 2

Попробуйте динамически добавить элемент в список (упорядоченный/неупорядоченный):

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