[英]How to mix html with gwt widgets?
I try to generate a dynamically gwt ui. 我尝试生成动态gwt ui。 As a result I would get a html fragment like this:
结果我得到一个像这样的html片段:
<ol>
<li>MyLabel</li>
<li><input type="text"></li>
</ol>
The Label should be a GWT Label and the input should be a GWT TextBox. Label应该是GWT标签,输入应该是GWT TextBox。 How can I achieve this with GWT?
我怎样才能通过GWT实现这一目标? I've tried to use the HTMLPanel class, but how can I inject the
我试过使用HTMLPanel类,但是如何注入
<li>
Tags? 标签?
I can't use UIBinder, since I would like to dynamically create such fragments as shown above. 我不能使用UIBinder,因为我想动态创建如上所示的片段。
You should create your own subclass of ComplexPanel
. 您应该创建自己的
ComplexPanel
子类。 This will give you something that works much the same as a HorizontalPanel
or VerticalPanel
, only based on list elements rather than table elements. 这将为您提供与
HorizontalPanel
或VerticalPanel
大致相同的功能,仅基于列表元素而不是表格元素。 It should look something like this: 它应该看起来像这样:
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;
}
}
I haven't tested that but it's basically right. 我没有测试过,但它基本上是正确的。 WRT the markup you posted in your question, this code will produce one slight difference, since GWT labels have their own
<div>
element: WRT您在问题中发布的标记,此代码将产生一个细微差别,因为GWT标签有自己的
<div>
元素:
<ol>
<li><div>MyLabel</div></li>
<li><input type="text"></li>
</ol>
You might prefer InlineLabel
, which is based on the less intrusive <span>
element. 您可能更喜欢
InlineLabel
,它基于较少侵入性的<span>
元素。
You can always do something like: 你总是可以这样做:
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);
}});
Why not put that fragment in a standalone Widget created via UiBinder? 为什么不将该片段放在通过UiBinder创建的独立小部件中? (if you know how the structure will look beforehand and just want to insert
MyLabel
and a TextBox
) (如果您事先了解结构的外观,只想插入
MyLabel
和TextBox
)
Don't be afraid to split your widgets like this - the GWT Compiler is great at optimizing and UiBinder templates are processed at compile time so there shouldn't be any performance penalty (benchmarking is still strongly recommended - YMMV). 不要害怕像这样分割你的小部件 - GWT编译器非常适合优化,UiBinder模板在编译时处理,所以不应该有任何性能损失(强烈建议基准测试 - YMMV)。 I'd even say that it'd be faster then trying to add this structure via the
DOM
package - with UiBinder, the compiler knows what it's dealing with, with DOM
you are basically saying: "I know what I'm doing, don't touch my code!" 我甚至会说,尝试通过
DOM
包添加这个结构会更快 - 使用UiBinder,编译器知道它正在处理什么,用DOM
你基本上会说:“我知道我在做什么,不要别碰我的代码!“ (at least that's my view on this :)). (至少那是我对此的看法:))。
HTMLPanel
could be an alternative, but you'd have to assign an id to every element you want to modify/attach stuff to... :/ HTMLPanel
可能是一种替代方案,但您必须为要修改/附加内容的每个元素分配一个ID ...:/
Bottom line: use UiBinder for this, that's what it was built for. 底线:为此使用UiBinder,这就是为它构建的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.