使用UiBinder时,创建这样的简单布局的首选方法是什么?
FlowPanel:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:FlowPanel styleName="{style.outer}">
<g:FlowPanel styleName="{style.inner}">
<g:Label ui:field="someLabel"/>
</g:FlowPanel>
</g:FlowPanel>
</ui:UiBinder>
HTML面板:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:style>
.outer {
display: table;
height: 100%;
width: 100%;
}
.inner {
background: #DDD;
display: table-cell;
vertical-align: middle;
}
</ui:style>
<g:HTMLPanel styleName="{style.outer}">
<div class="{style.inner}">
<g:Label ui:field="someLabel"/>
</div>
</g:HTMLPanel>
</ui:UiBinder>
编辑:我知道它们在渲染时会产生相同的html,我想知道是否有理由使用一种样式而不是另一种样式。
javadocs说FlowPanel是最简单的面板,但在什么时候使用HTMLPanel会变得更可取呢。例如
<FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
<FlowPanel>
<Widget>
</FlowPanel>
</FlowPanel>
与。
<HTMLPanel>
<div>
<Widget>
</div>
<div>
<Widget>
</div>
</HTMLPanel>
谢谢。
UiBinder-HTMLPanel与div是一个非常相似的问题,但询问了如何使用div与HTMLPanel。
实际上,在您的案例中,它们将呈现相同的div。除非您开始向FlowPanel添加更多元素,否则没有区别。
您可以在此处尝试FlowPanel行为:http://examples.roughian.com/index.htm#Panels~ FlowPanel
当您需要在页面上编写自己的自定义HTML代码时,应该使用HTMLPanel。它允许在HTMLPanel标记内部编写HTML代码。
例如,你不能用FlowPanel做这样的把戏。
我最近读了Tags First GWT编程。在我看来,他所描述的技术将使您能够更好地控制页面的最终呈现,同时保持GWT的优势。
我认为你所问的FlowPanel和HTMLPanel之间的二分法并不是一个正确的问题。相反,最好认识到它们是为不同的事情准备的。
HTMLPanel的功能远不止FlowPanel。当您需要动态添加和删除嵌入在某些自定义html中的小部件时,请使用HTMLPanel。如果你只是想让一些小部件在页面上与正常的html流(比如一些文本和图片)对齐,请使用FlowPanel。
我个人的建议是使用最简单的东西来做你需要的事情。
我推荐第二个例子。如果可能,您应该更喜欢使用诸如"div"之类的纯HTML标记,而不是诸如"FlowPanel"之类的小部件,因为有一个未使用的逻辑小部件会带来开销。
首先,这可能看起来微不足道,但当您必须处理大量项目时,它会为您省去很多麻烦(内存泄漏、gquery操作…)。