garbled css name when styling within UiBinder

Question

For my GWT application, I want to show the selected row in a FlexTable, and for that purpose I add a style to the specific row:

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

In the corresponding ui.xml file, I have the style added as follows:

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> 

This does not work, while adding the style in my global .css file does. In FireBug I see that the name tr.row-selected is garbled into something like: tr.GB1HWLGEI

Why does this not work and how should it work instead?

Answer 1

Garbled is really obfuscated which will be faster in the browser and harder for someone to reverse engineer. It also means you don't need to worry about css namespace conflicts.

So, just use the following line in your ModuleName.gwt.xml file during development to disable obfuscation.

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

Answer 2

UiBinder uses ClientBundle for ui:style, so the rules and syntax/features of CssResource apply.

This means that your CSS class names will be obfuscated (so that they're unique and won't conflict with a same-named CSS class from another CssResource or external stylesheet).

In your case, you can either define a CssResource interface and declare the ui:style to extend that interface and inject the instance into a @UiField; so you can use the obfuscated style into your addStyleName; as in http://code.google.com/webtoolkit/doc/latest/DevGuideUiBinder.html#Programmatic_access
Or you can use @external in your ui:style to disable obfuscation for the CSS class; see http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#External_and_legacy_scopes.