How to share stylesheet types across GWT widgets

Question

Hi

I'm attempting to create a composite widget, which will show a 'list' of child widgets, but I'm having some trouble getting css to work in this setting. Have constructed a simple demo, to try and figure out a solution. Have tried to specify the parent widget like this

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

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

 <g:FlowPanel ui:field="childPanel" stylePrimaryName='{res.style.parentStyle}'>

 </g:FlowPanel>

</ui:UiBinder>

with code

public class CssParent extends Composite{

interface MyUiBinder extends UiBinder<Widget, CssParent> {}
private static MyUiBinder uiBinder = GWT.create(MyUiBinder.class);

@UiField FlowPanel childPanel;

   public CssParent() {
      initWidget(uiBinder.createAndBindUi(this));

       CssChild child = new CssChild();
      childPanel.add(child);
   }  
}

the child widget is simply specified as

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

 <ui:with field='res' type='egov.widgets.discussion.client.poc.Resources' />

    <g:HTMLPanel stylePrimaryName='{res.style.childStyle}'>
       Howdy folks
    </g:HTMLPanel>

  </ui:UiBinder>

now, as you can see they both reference a resource bundle:

public interface Resources extends ClientBundle {

@Source("CssDemo.css")
Style style();

  public interface Style extends CssResource{
     String parentStyle();
     String childStyle();
  }
}

which again references CssDemo.css: .parentStyle{ background-color: grey; }

.parentStyle .childStyle{
    background-color: yellow;
}

but for some reason these css rules are never applied to the two div elements above. Any idea as to why this fails? Or a better way of sharing a .css style sheets between widgets, when the styles include dependency-rules between different css classes?

Answer 1

It's not obvious to me what's wrong - your code is at least close to correct (I've been using styleName=<whatever> instead of stylePrimaryName=<whatever>, so that's one thing you might look into).

The way to debug issues like this is to use Firebug to see (1) what class names have been applied to the DOM elements, and (2) what CSS rules take effect on the basis of those styles.

If you put @external parentStyle, childStyle; at the start of your CSS file, then GWT won't obfuscate the style names, and you'll be able to tell in Firebug what names have been applied.

A couple more suggestions:

1. Use DevMode and look to see if it shows any errors (they'll be in red text) when you load the page - scroll to the bottom of the DevMode window's top pane.
2. You can try this with a simpler example, with a single Composite class rather than two.

Answer 2

Found out that you need to inject styles used in this way

 static{
     Resources.INSTANCE.style().ensureInjected();
 }

(added this singleton-ish instance field to the bundle)

public interface Resources extends ClientBundle {

    public static final Resources INSTANCE =  GWT.create(Resources.class);

    @Source("Resources.css")
    Style style();

it works now, but I really don't like having to do it this way ("{res.style.someClass}") + all the methods I have to define in the CssResource interface.

Would be nice if one could do a shared ui:style declaration (perhaps based on a css file), and just use it like a normal internal style block.