Question

I’m writing a GWT widget using UIBinder and MVP. The widget’s default styles are defined in TheWidgetView.ui.xml:

<ui:style type="com.widgetlib.spinner.display.TheWidgetView.MyStyle">
    .textbox {
        border: 1px solid #red;
    }
    .important {
        font-weight: bold;
    }
</ui:style>

The widget’s CssResource interface is defined in TheWidgetView.java:

public class TheWidgetView extends HorizontalPanel implements TheWidgetPresenter.Display {
    // ... some code
    @UiField MyStyle style;
    public interface MyStyle extends CssResource {
        String textbox();
        String important();
    }
    // ... more code
}

I’d like the consumer of this widget to be able to customize part of the widget’s styles and to have this in their MyExample.ui.xml:

<ui:style type="com.consumer.MyExample.MyStyle">
    .textbox {
        border: 2px solid #black;
    }
</ui:style>

And this be their MyExample.java:

public class MyExample extends Composite {
    // ... some code
    @UiField MyStyle style;
    interface MyStyle extends TheWidgetView.MyStyle{
        String textbox();
    }
    // ... more code
}

Is there a way that my widget can have default styles, but that the consumer of the widget can override one of them? When an interface extends TheWidgetView.MyStyle, the of the widget consumer needs to define all the styles listed in that parent interface. I’ve seen some widget libraries have the widget’s constructor take in a ClientBundle as parameter, which I suppose could apply to CssResource. Although, I’m not sure how I’d pass in this style object in a constructor invoked by UIBinder.

Thanks much in advance!

Answer 1

I have playing around with something similar to make my application skinable. I would start by looking at the source code for any of the cell widgets. They seem to take the resources as a constructor, however they also have constructors that use GWT.create(Resources.class) to create the resources if they are not provided. As far as your question about using this template for UIBinder, there are 3 options mentioned here. However you may run into chicken and the egg issues when trying to define the style inside the UIBinder.

The issue you are running into with your other code is that your 2 different implementations of the style because uibinder creates it’s own resource bundle which doesn’t reference the parent’s css. There are 3 solutions:

1) Tear the css out of the ui binder file into it’s own file and use ui:with combined with either a provided field or uifactory to inject the style using your own resource bindle where you can compound the sources (i.e. @Source({DEFAULT_CSS, “myCss.css”})).

2) Your other option is to look at the generated code and use the syntax they are using to refernce the css within the uibinder file, however there are 2 issues you will have to overcome: the chicken and the egg problem and the fact that google can change this without telling you and break your stuff. Here is an example of the generated client bundle from one of my files:

@Source("uibinder:com.foo.gwt.client.workspace.select.SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style.css")
SelectWorkspaceViewImpl_SelectWorkspaceViewImplUiBinderImpl_GenCss_style style();

3) The last solution is to use deferred binding to replace the default style.

<replace-with class="com.foo.gwt.laf.mpe.resource.CellTableResources">
    <when-type-is class="com.google.gwt.user.cellview.client.CellTable.Resources" />
    <when-property-is name="laf" value="MPE" />
</replace-with>