Edu*_*rch 5 css import gwt gwt2 cssresource
想象一下,您使用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>
Run Code Online (Sandbox Code Playgroud)
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);
}
}
Run Code Online (Sandbox Code Playgroud)
在您创建的另一个(父)窗口小部件中使用此简单窗口小部件:
<!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>
Run Code Online (Sandbox Code Playgroud)
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);
}
}
}
Run Code Online (Sandbox Code Playgroud)
你想要实现的是使用css在列表中的Widget1条目之间获得一些余量.但这不起作用.因为GWT会混淆css名称..childWidgetStyle
in 的混淆名称ParentWidget
将与.childWidgetStyle
in中的不同Widget1
.生成的css看起来与此类似:
.G1unc9fbE {
border-style:dotted;
border-width:1px;
}
.G1unc9fbBB .G1unc9fDa {
margin-bottom:10px;
}
Run Code Online (Sandbox Code Playgroud)
因此保证金设定不适用.我该怎么做呢?
技巧是将 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>
Run Code Online (Sandbox Code Playgroud)
重要的是,如果您不使用ImportedWithPrefix注释,GWT 会在导入的样式名称前加上 css 类所在资源的类名作为前缀。所以childWidgetStyle
就变成.Widget1Style-childWidgetStyle
.
(编辑:删除了有关 @Shared 以下评论和文档的部分。)
归档时间: |
|
查看次数: |
6361 次 |
最近记录: |