2

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?

Roalt
  • 8,330
  • 7
  • 41
  • 53

2 Answers2

3

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.

Thomas Broyer
  • 64,353
  • 7
  • 91
  • 164
  • Thank you, I'll use the @external because I don't need programmatic access to the styles, and using it is the simplest way to have my style defined in the .ui.xml file. – Roalt Oct 23 '11 at 09:32
  • 1
    Well, `productTable.getRowFormatter().addStyleName(row, "row-selected");` to me implies "programmatic access": add `@UiField MyStyle style;` and then `productTable.getRowFormatter().addStyleName(row, style.rowSelected());` and you benefit from the guaranteed uniqueness of the obfuscated CSS class name. – Thomas Broyer Oct 23 '11 at 15:19
2

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" />
Joseph Lust
  • 19,340
  • 7
  • 85
  • 83