如何在UiBinder中使用生成的单元格中的CssResources
How can I use CssResources in UiBinder a generated Cell?
我想用UiBinder(UiRenderer(为CellWidget生成一个Cell。我生成单元格的步骤在MyCell.java:中
public class MyCell implements AbstractCell<MyDto> {
public interface Resources extends ClientBundle {
@Source({Css.DEFAULT_CSS })
Css css();
}
public interface Css extends CssResource {
String DEFAULT_CSS = "test/MyStyle.css";
String test();
}
interface MyUiRenderer extends UiRenderer {
void render(SafeHtmlBuilder sb, String name, SafeStyles styles);
}
private static MyUiRenderer renderer = GWT.create(MyUiRenderer.class);
Resources resources = GWT.create(Resources.class);
@Override
public void render(SafeHtmlBuilder safeHtmlBuilder, MyDto model) {
SafeStyles style = SafeStylesUtils.fromTrustedString(resources.css().test().toString());
renderer.render(safeHtmlBuilder, model.getName(), style);
}
}
我的MyCell.ui.xml文件如下所示:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
<ui:with field="name" type="java.lang.String" />
<ui:with field='styles' type='com.google.gwt.safecss.shared.SafeStyles'/>
<div style="{styles}"><ui:text from="{name}" /></div>
</ui:UiBinder>
MyStyle.css:
.test {
background-color: red;
font-size: 20px;
display: flex;
...
}
当我运行我的代码时,我得到以下错误:
[DEBUG] [mobile] - Rebinding test.client.app.MyCell.MyUiRenderer
[DEBUG] [mobile] - Invoking generator com.google.gwt.uibinder.rebind.UiBinderGenerator
[ERROR] [mobile] - java.lang.String required, but {styles} returns com.google.gwt.safecss.shared.SafeStyles: <div style='{styles}'> (:9)
[ERROR] [mobile] - Deferred binding failed for 'test.client.app.MyCell.MyUiRenderer'; expect subsequent failures
[ERROR] [mobile] - (GWT.java:72) 2014-06-08 17:15:05,214 [FATAL] Uncaught Exception:
然后我试着这样做:
<ui:with field="styles" type="java.lang.String" />
在我的UiBinder中,但它不起作用。
如何在我的UiRenderer中使用CssResource中的css样式
<div style="{styles}">
这里有两个问题。首先,为了更改元素的样式,您有两个选项,将style属性设置为包括特定属性,或者将class属性设置为指向您在CSS中定义的某个类。所以,你真的想在这里设置class
,而不是style
。
其次,您创建了一个名为"test"的css类,但在这里只分配了整个接口和样式。相反,引用styles.test:
<div class="{styles.test}" />
编辑:你可能缺少的最后一个部分(但由于"这不起作用"太模糊了,我不知道这是否是你的实际问题(:在你的例子中,我没有看到任何对ensureInjected()
的调用。在使用之前,请确保在Css
实例上调用此函数。
您必须将.asString放在xml:中的样式后面
<div style="{styles.asString}"><ui:text from="{name}" /></div>
相关文章:
- 使用jquery在单击时在单元格中输入值
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 可以'我不明白为什么;t将行和单元格添加到表中
- 如何在Angular中的表的所有单元格中添加链接
- 表中单元格的总和
- ExtJS网格单元格编辑器,防止焦点松动问题
- 有没有一种方法可以仅使用HTML/CSS来隐藏基于特定值的数据单元格
- 区分电子表格中的空单元格和0值
- ui网格将单元格显示为选择标记
- 单元格的工具提示或标题不显示超过2000个字符
- ui网格日期单元格过滤器,过滤日期格式导致显示错误的日期
- 允许表单元格内容水平展开
- 如何将jQuery/AAJAX结果放入表格单元格
- 使用jQuery只返回选中复选框后的第一个表单元格值
- jQuery-通过AJAX调用动态添加具有值的表单元格
- 需要将单元格值复制到html表中的其他单元格中
- 从Javascript中选定的行中获取特定单元格的值
- 使用JavaScript获取Gridview单元格值
- jQuery如何获取td单元格值
- 在 SlickGrid 中编辑后,根据不同列中的另一个单元格清除单元格