CssResource examples?

Question

Hi All,

I am migrating to the use of the CssResource. However, I don't understand how to use prefixed styles :(... Something like:

.prefix .label {
 padding: 10px;
}

.prefix .button {
 padding: 20px;
}

How must I transform this to the CssResource classes and use it in code :(... I was playing with @Import and @ImportedWithPrex, @Share, but it's all a bit confusing and the documentation is hard to understand :(... Please some help ?

Ed

Answer 1

Here's some code that demonstrates usage 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 small 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 get's you on the right track....