如何將html與gwt小部件混合？

我嘗試生成一個動態gwt UI。因此，我會得到一個HTML片段是這樣的：如何將html與gwt小部件混合？

<ol> 
<li>MyLabel</li> 
<li><input type="text"></li> 
</ol>

標籤應該是一個GWT標籤和輸入應該是一個GWT文本框。我如何用GWT實現這一目標？我試過使用HTMLPanel類，但我怎樣才能注入

<li>

標籤？

我不能使用UIBinder，因爲我想動態創建如上所示的片段。

來源

2010-09-10 flash

您應該創建自己的ComplexPanel子類。這會給你一些與HorizontalPanel或VerticalPanel非常相似的東西，只是基於列表元素而不是表格元素。它應該看起來像這樣：

public class OListPanel extends ComplexPanel { 
final OListElement ol = Document.get().createOLElement(); 

public OListPanel() { 
    setElement(ol); 
} 

public void add(Widget w) { 
    LIElement li = Document.get().createLIElement(); 
    ol.appendChild(li); 
    add(w, (Element)li.cast()); 
} 

public void insert(Widget w, int beforeIndex) { 
    checkIndexBoundsForInsertion(beforeIndex); 

    LIElement li = Document.get().createLIElement(); 
    ol.insertBefore(li, ol.getChild(beforeIndex)); 
    insert(w, (Element)li.cast(), beforeIndex, false); 
} 

public boolean remove(Widget w) { 
    Element li = DOM.getParent(w.getElement()); 
    boolean removed = super.remove(w); 
    if (removed) { 
     ol.removeChild(li); 
    } 
    return removed; 
} 
}

我還沒有測試過，但它基本上是正確的。 WRT，你在你的問題張貼的標記，該代碼會產生一個微小的差別，因爲GWT標籤有自己的<div>元素：

<ol> 
<li><div>MyLabel</div></li> 
<li><input type="text"></li> 
</ol>

你可能更喜歡InlineLabel，它是基於較少干擾<span>元素。

來源

2010-09-12 01:11:43 dslh

適合我的完美解決方案。謝謝。 – flash 2010-09-13 04:29:45

爲什麼不把這個片段放在通過UiBinder創建的獨立Widget中？（如果你知道結構將如何預覽，只想插入MyLabel和TextBox）
不要害怕像這樣拆分你的小部件 - GWT編譯器擅長優化，UiBinder模板在編譯時處理不應該有任何性能損失（基準仍然強烈建議 - YMMV）。我甚至會說如果試圖通過DOM包添加這個結構會更快 - 使用UiBinder，編譯器知道它在處理什麼，你基本上說的是DOM：「我知道我在做什麼，不要不要碰我的代碼！「（至少這是我的看法:)）。 HTMLPanel可能是一種替代方案，但是您必須爲每個要修改/附加內容的元素分配一個ID：/

底線：爲此使用UiBinder，這就是它的目的。

來源

2010-09-10 15:27:54

你總是可以這樣做：

Document doc = Document.get(); 
    final OListElement ol = doc.createOLElement(); 
    LIElement li = doc.createLIElement(); 
    li.appendChild((new Label()).getElement()); 
    ol.appendChild(li); 
    li = doc.createLIElement(); 
    li.appendChild((new TextBox()).getElement()); 
    ol.appendChild(li); 
    panel.add(new Widget() {{ 
     setElement(ol); 
    }});

來源

2010-09-11 00:42:10 morisil

當然，但是嘗試在x周後（或者更糟的是，由另一個開發人員）閱讀此代碼 - * nightmare *。 GWT的整個想法是讓開發人員保持「更高」的水平 - 而不用擔心DOM（或者爲他/她提供了輕鬆創建DOM的工具，比如UiBinder）。 – 2010-09-12 15:52:50

我完全同意。我想展示的只是達到預期效果的技術。 UiBinder是一個很棒的工具，但是對於一般的佈局/定製，比我認爲的高度動態組件更適合這裏。我不會在我自己的代碼中使用這種DOM意大利麪條。然而，在可重用面板組件中包裝呈現的技術（如hambend所示）似乎非常有用。例如，它可以用來創建列表樹，這對UiBinder來說會很痛苦。 – morisil 2010-09-13 13:39:59

如何將html與gwt小部件混合？

回答

相關問題