GWT中的動態嵌套無序列表UIBinder

我試圖在GWT UIBinder中實現一個簡單的基於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中，但Widgets不能嵌套在HTML中。如果是這種情況，我會如何將項目添加到子列表中？我希望能夠使用小部件路由，以便稍後添加以編程方式刪除特定列表項的功能。

我不想使用GWT的菜單，MenuItem等，因爲這些編譯到表。

來源

2013-04-09 Roddy of the Frozen Peas

關鍵是要經過HTMLPanel：

menuDiv.add(item, currentSessionSublistItem);

來源

2013-04-09 15:37:08

試試這一個項目動態地添加到列表（有序/無序）：

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

來源

2013-11-20 14:54:05 Rob

GWT中的動態嵌套無序列表UIBinder

回答

相關問題