title: Dynamic nested unordered lists in GWT UIBinder
body: <p>I'm trying to implement a simple CSS-based menu in GWT UIBinder, but I'm having some difficulties with one particular part.</p>
  
  <p>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."</p>
  
  <p>Here is the plain HTML version of the menu:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="cssmenu"&gt;
      &lt;ul&gt;
          &lt;li&gt;New Session&lt;/li&gt;
          &lt;li class="has-sub"&gt;Current Sessions
            &lt;ul&gt;
               &lt;li&gt;Session 1&lt;/li&gt;
               &lt;li&gt;Session 2&lt;/li&gt;
            &lt;/ul&gt;
         &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The basic format was pretty simple to implement in UIBinder, but the dynamic sublist is giving me difficulties.</p>
  
  <p>Here's the basic UIBinder template that I came up with:</p>
  
  <p>The XML:</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;!-- Menu.ui.xml --&gt;
  &lt;ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' xmlns:g='urn:import:com.google.gwt.user.client.ui'&gt;
      &lt;g:HTMLPanel id="cssmenu" ui:field="menuDiv"&gt;
          &lt;ul&gt;
              &lt;li ui:field="newSessionItem"&gt;New Session&lt;/li&gt;
              &lt;li class="has-sub" ui:field="currentSessionItem"&gt;
                  Current Sessions
                  &lt;ul id="currentSessionSublist" ui:field="currentSessionSublistItem"&gt;
                      &lt;li&gt;Session 1&lt;/li&gt;
                      &lt;li&gt;Session 2&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/g:HTMLPanel&gt;
  &lt;/ui:UiBinder&gt;
  </code></pre>
  
  <p>The Java:</p>
  
  <pre class="lang-java prettyprint-override"><code>// Menu.java
  public class Menu extends UIObject {
      interface MenuBinder extends UiBinder&lt;DivElement, Menu&gt; {}
      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
      }
  }
  </code></pre>
  
  <p>I'm unsure how to add the dynamic list items in <code>addCurrentSession()</code>. I tried adding a custom widget that compiles to a <code>&lt;li&gt;</code> element, but was unable to add it using <code>RootPanel.get("currentSessionSublist").add(item)</code>. 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.</p>
  
  <p>I don't want to use GWT's Menu, MenuItem, etc because those compile to tables.</p>