How to customize the CSS of a theme generated with the ThemeBuilder?

Question

I have used the ThemeBuilder to create a theme, but now I need to add an attribute in a CSS class so I can have a different font color in the selected element of a ListView, for example.

Ideally I would expect that the builder have support for specifying such a configuration in the .theme file, specially because font color is something that will not affect the image generation process that is used to support older browsers. In fact the builder should have support for all standard CSS3 attributes that don't affect the generated images.

Obviously it is possible to modify the ThemeBuilder jar to achieve this, but this is not a good idea.

I had a look in the appearance classes that are generated and my first try was to use the following constructor:

public Css3ContentPanelAppearance(Css3ContentPanelResources resources) {
    this(resources, GWT.<Css3ContentPanelTemplate> create(Css3ContentPanelTemplate.class));
}

This did not work well, because all components using Css3ContentPanelAppearance are affected regardless of which Css3ContentPanelResources was used. I believe this happens because the CSS class name is based on the appearance class name and on the CssResource class name.

Answer 1

The solution was very simple: create a sub-class of the generated appearance class like this:

public class CustomCss3ListViewAppearance extends Css3ListViewAppearance {
    public interface CustomCss3ListViewResources extends Css3ListViewAppearance.Css3ListViewResources {
        // Load the original resources first and then the custom one, so the customizations will take precedence.
        @ClientBundle.Source({"com/example/client/base/listview/Css3ListView.css","CustomCss3ListView.css"})
        @Override
        Css3ListViewAppearance.Css3ListViewStyle css();
    }
    public CustomCss3ListViewAppearance() {
        super(GWT.<Css3ListViewAppearance.Css3ListViewResources>create(CustomCss3ListViewResources.class));
    }
}

Then, you can create a separate JAR module that depends on the generated theme, specify some bindings in the .gwt.xml file and it will behave exactly as a plain generated theme (just need to add a dependency and import it in the application .gwt.xml file):

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='myCustomTheme'>
    <inherits name="com.example.Theme"/>

    <replace-with class="com.example.client.base.listview.CustomCss3ListViewAppearance">
        <when-type-is class="com.sencha.gxt.widget.core.client.ListView.ListViewAppearance" />
        <when-property-is name="gxt.theme" value="myTheme" />
    </replace-with>

    <source path="myCustomTheme/client"/>

</module>