如何正确使用进口的CSS样式的GWT
-
20-09-2019 - |
题
假设你创建与UiBinder的以下简单小窗口:
<!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 type="my.package.Widget1.Widget1Style">
.childWidgetStyle {
border-width: 1px;
border-style: dotted;
}
</ui:style>
<g:TextArea styleName="{style.childWidgetStyle}"/>
</ui:UiBinder>
package my.package;
// some imports here
public class Widget1 extends Composite {
private static Widget1UiBinder uiBinder = GWT.create(Widget1UiBinder.class);
interface Widget1UiBinder extends UiBinder<Widget, Widget1> {
}
public interface Widget1Style extends CssResource {
String childWidgetStyle();
}
@UiField
TextArea textArea;
public Widget1(String text) {
initWidget(uiBinder.createAndBindUi(this));
textArea.setText(text);
}
}
比使用在另一个(父)这种简单的插件窗口小部件所创建:
<!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>
.parentWidgetStyle .childWidgetStyle {
margin-bottom: 10px;
}
</ui:style>
<g:VerticalPanel ui:field="listPanel" addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>
package my.package;
// imports go here
public class ParentWidget extends Composite {
private static ParentWidgetUiBinder uiBinder = GWT.create(ParentWidgetUiBinder.class);
interface ParentWidgetUiBinder extends UiBinder<Widget, ParentWidget> {
}
@UiField
VerticalPanel listPanel;
public ParentWidget(final String... texts) {
initWidget(uiBinder.createAndBindUi(this));
for (final String text : texts) {
final Widget1 entry = new Widget1(text);
listPanel.add(entry);
}
}
}
什么你想达到的,就是以使用CSS列表中的条目WIDGET1之间一定的余量。但是,这是行不通的。因为GWT会混淆的CSS名称。而对于在.childWidgetStyle
ParentWidget
混淆的名称将在.childWidgetStyle
的Widget1
不同。将所得的CSS将类似于这样:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
因此,距设置不会适用。我该怎么做这正确?
解决方案
诀窍是导入css类名到ParentWidget
:
<!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 import="my.widget.Widget1.Widget1Style">
.parentWidgetStyle .Widget1Style-childWidgetStyle {
margin-bottom: 10px;
}
</ui:style>
<g:VerticalPanel addStyleNames="{style.parentWidgetStyle}" />
</ui:UiBinder>
最重要的部分是,如果你不使用的 ImportedWithPrefix 注释GWT将与资源的CSS类是在类名前缀导入的样式名称。所以childWidgetStyle
成为.Widget1Style-childWidgetStyle
。
(编辑:约@Shared以下评论和文档一个去除的部分>。)
不隶属于 StackOverflow