css - 在 UiBinder 中设置样式时出现乱码 css 名称

Question

对于我的 GWT 应用程序，我想在 FlexTable 中显示所选行，为此，我向特定行添加样式:

@UiField FlexTable productTable;
int row;
[...]
/* select row */
productTable.getRowFormatter().addStyleName(row, "row-selected");

在相应的ui.xml文件中，我添加了如下样式:

ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui"
xmlns:u="urn:import:myapplication.client.ui">
<ui:style>
    tr.row-selected {
        background: #92C1F0;
    }
</ui:style>
<g:VerticalPanel>
    <g:ScrollPanel>
        <g:FlexTable ui:field="productTable" width="100%" height="100%">
        </g:FlexTable>
    </g:ScrollPanel>
</g:VerticalPanel>
</ui:UiBinder> 

这不起作用，而在我的全局 .css 文件中添加样式却可以。在 FireBug 中，我看到名称 tr.row-selected 被乱码成这样:tr.GB1HWLGEI

为什么这不起作用？它应该如何起作用？

Answer 1

UiBinder uses ClientBundle for ui:style ，因此 CssResource 的规则和语法/功能适用。

这意味着您的 CSS 类名称将被混淆(以便它们是唯一的，并且不会与另一个 CssResource 或外部样式表中的同名 CSS 类冲突)。

在您的情况下，您可以定义一个 CssResource 接口(interface)并声明 ui:style 来扩展该接口(interface)并将实例注入(inject)到 @UiField;所以你可以在你的 addStyleName 中使用混淆的样式；如http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
或者您可以在 ui:style 中使用 @external 来禁用 CSS 类的混淆；请参阅http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes .