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接口并声明ui:style以扩展该接口并将实例注入@UiField;所以你可以在我的addStyleName中使用混淆的样式;如http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access中所述或者，您可以在@external中使用ui:style来禁用CSS类的混淆;见http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes。

Answer 2

Garbled实际上是混淆的，在浏览器中会更快，而且对某些人来说更难以进行逆向工程。这也意味着您不必担心css名称空间冲突。

因此，在开发期间只需在ModuleName.gwt.xml文件中使用以下行来禁用混淆。

<set-configuration-property name="CssResource.style" value="pretty" />

UiBinder中的样式时出现乱码的CSS名称

2 个答案: