我正在尝试创建一个复合小部件,它将显示子小部件的“列表”,但我在让 CSS 在此设置中工作时遇到了一些问题。构建了一个简单的演示,试图找出解决方案。曾尝试像这样指定父小部件
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />
<g:FlowPanel ui:field="childPanel" stylePrimaryName='{res.style.parentStyle}'>
</g:FlowPanel>
</ui:UiBinder>
代码
public class CssParent extends Composite{
interface MyUiBinder extends UiBinder<Widget, CssParent> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);
@UiField FlowPanel childPanel;
public CssParent() {
initWidget(uiBinder.createAndBindUi(this));
CssChild child = new CssChild();
childPanel.add(child);
}
}
子部件简单地指定为
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />
<g:HTMLPanel stylePrimaryName='{res.style.childStyle}'>
Howdy folks
</g:HTMLPanel>
</ui:UiBinder>
现在,如您所见,它们都引用了一个资源包:
public interface Resources extends ClientBundle {
@Source("CssDemo.css")
Style style();
public interface Style extends CssResource{
String parentStyle();
String childStyle();
}
}
再次引用 CssDemo.css: .parentStyle{ 背景色:灰色;
.parentStyle .childStyle{
background-color: yellow;
}
但由于某些原因,这些 css 规则从未应用于上面的两个 div 元素。关于为什么失败的任何想法?或者当样式包含不同 css 类之间的依赖规则时,在小部件之间共享 .css 样式表的更好方法?
最佳答案
发现需要注入(inject)这样使用的样式
static{
Resources.INSTANCE.style().ensureInjected();
}
(将这个单例实例字段添加到包中)
public interface Resources extends ClientBundle {
public static final Resources INSTANCE = GWT.create(Resources.class);
@Source("Resources.css")
Style style();
它现在可以工作了,但我真的不喜欢这样做(“{res.style.someClass}”)+ 我必须在 CssResource 接口(interface)中定义的所有方法。
如果可以做一个共享的 ui:style 声明(可能基于一个 css 文件),并且像普通的内部样式 block 一样使用它,那就太好了。
关于gwt - 如何跨 GWT 小部件共享样式表类型,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2302779/