java - 如何在生成的 Cell 的 UiBinder 中使用 CssResources？

Question

我想使用 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 样式？

Answer 1

<div style="{styles}">

这里有两个问题。首先，为了改变元素的样式，您有两个选择，将样式属性设置为包含特定属性，或者将类属性设置为指向您在 CSS 中某处定义的类。所以，你真的想在这里设置 class，而不是 style。

其次，您创建了一个名为“test”的 css 类，但在这里只分配了整个界面和样式。相反，引用 styles.test:

<div class="{styles.test}" />

---

编辑:您可能遗漏了最后一 block (但由于“这不起作用”非常含糊，我不知道这是否是您的实际问题):我没有看到对 ensureInjected( ) 在你的例子中。确保在使用前在 Css 实例上调用它。