UIBinder, CssResource and CSS (GWT)

Few month ago I blogged about ClientBundle, UIBinder and CSS (GWT). I just realized that an important use case was missing. And here it is.

4) Using CssResource for CSS expressed in the UIBinder. When creating a UI with the UIBinder it might happen to include some CSS rules in the ui.xml file.

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style>
       .outer {
          width: 100%;
       }
    </ui:style>
    <g:SimplePanel ui:field='sideBar'>
    </g:SimplePanel>
</ui:UiBinder>

It is possible to refer to those CSS rules from the GWT code. For doing so we have to declare a 'type' for ui:style:

<ui:UiBinder
  xmlns:ui='urn:ui:com.google.gwt.uibinder'
  xmlns:g='urn:import:com.google.gwt.user.client.ui'>

    <ui:style type='org.example.Example.ExStyle'>
       .outer {
          width: 100%;
       }
    </ui:style>
   
    <g:SimplePanel ui:field='sideBar'>
    </g:SimplePanel>
</ui:UiBinder>

Now, in the class  org.example.Example, we can reference the CSS rules and use them:

public class Example extends Composite {

    interface Binder extends UiBinder { }    
    private static final Binder binder = GWT.create(Binder.class);
   
    @UiField SimplePanel sideBar;
    @UiField ExStyle style;

    interface ExStyle extends CssResource {
        String outer();
    }

    public Example() {
        initWidget(binder.createAndBindUi(this)); 
        sideBar.setStyleName(style.outer()); 
    }
   ...