CssResource examples?

Question

I am going to use CssResource. However, I do not understand how to use prefix styles: (... Something like:

.prefix .label {
 padding: 10px;
}

.prefix .button {
 padding: 20px;
}

How to convert this into a class CssResourceand use it in the code: (... I've played with @Importand @ImportedWithPrex, @Sharebut it's a little confusing, and the documentation is difficult to understand: (... please help?

Ed

Answer 1

Here is code demonstrating the use of ImportedWithPrefix annotation

 interface Bundle extends ClientBundle {
    @Source("CssImportScopeSample.css")
    InnerStyle innerStyle();

    @Source("CssImportScopeSample.css")
    OuterStyle style();
  }

  @ImportedWithPrefix("inner")
  interface InnerStyle extends Style {
  }

  @ImportedWithPrefix("outer")
  interface OuterStyle extends Style {
  }

  interface Style extends CssResource {
    String body();
  }

And a little UiBinder code ..

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder' >
  <ui:with field='bundle' type='com.google.gwt.uibinder.test.client.CssImportScopeSample.Bundle' />

  <ui:style import='com.google.gwt.uibinder.test.client.CssImportScopeSample.OuterStyle
        com.google.gwt.uibinder.test.client.CssImportScopeSample.InnerStyle'>
    .outer-body .inner-body { width: 100px; background-color: red; }   
  </ui:style>

  <div class='{bundle.style.body}'> 
    <span ui:field='outer'/>
    <div ui:field='inner' class='{bundle.innerStyle.body}'>Inner!</div>
  </div>
</ui:UiBinder>

Hope this helps you on the right track ....