How to distribute stylesheet types in GWT widgets

Question

I am trying to create a composite widget that will show a "list" of child widgets, but I am having trouble getting css to work in this setting. They built a simple demo to try and find a solution. Tried to specify a 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 indicated 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, both of them refer to the resource package:

public interface Resources extends ClientBundle {

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

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

which again refers to CssDemo.css: .parentStyle {background-color: gray; }

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

- CSS div . , ? .css , CSS?

Answer 1

, , .

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

( )

public interface Resources extends ClientBundle {

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

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

, ( "{res.style.someClass}" ) + , CssResource.

, ui: (, css) .

Answer 2

, - ( styleName=<whatever> stylePrimaryName=<whatever>, ).

Firebug, (1), DOM, (2) CSS .

@external parentStyle, childStyle; CSS, GWT , Firebug, .

:

• DevMode , - ( ) - DevMode.
• , Composite, .