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

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.