Ui:style or css class in GWT/UiBinder

Question

What is more preferable to use <ui:style> or write class in css file for HTML elements (for GWT Widgets) in GWT ui.xml file. I know that if to use <ui:style> so the class attribute has very difficult name. Help me please find out when to use <ui:style>

<ui:style>
   .panel {
        width: 100%;
   }
   .decPanel {
        height:100%;
   }
</ui:style>

<g:HTMLPanel addStyleNames='{style.panel}'>
    <fieldset addStyleNames='{style.decPanel}'>
        <legend>
            ...
        </legend>
    </fieldset>
</g:HTMLPanel>

and when to use class

CSS file

   .panel {
        width: 100%;
   }
   .decPanel {
        height:100%;
   }

ui.xml file

<g:HTMLPanel class="panel">
   <fieldset class="decPanel">
        <legend>
            ...
        </legend>
   </fieldset>
</g:HTMLPanel>

Answer 1

It might help you to understand the advantage of using <ui:style> over constant static class name.

Hello Stylish World

With the <ui:style> element, you can define the CSS for your UI right where you need it.

Sample:

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

    <ui:style>
      .pretty { background-color: Skyblue; }
    </ui:style>

    <div class='{style.pretty}'>
      Hello, <span ui:field='nameSpan'/>.
    </div>

</ui:UiBinder>

Advantage

• A CssResource interface is generated for you, along with a ClientBundle. This means that the compiler will warn you if you misspell the class name when you try to use it (e.g. {style.prettty}).

• Also, your CSS class name will be obfuscated, thus protecting it from collision with like class names in other CSS blocks—no more global CSS namespace!

---

Note: Most real world projects will probably keep their CSS in a separate file. In the example given below, the src values are relative to the location of the ui.xml file.

Sample

  <ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>
    <ui:style src="MyUi.css" />
    <ui:style field='otherStyle' src="MyUiOtherStyle.css">

    <div class='{style.pretty}'>
      Hello, <span class='{otherStyle.pretty}' ui:field='nameSpan'/>.
    </div>
  </ui:UiBinder>

Prefer <span class='{otherStyle.pretty}' instead of <span class='pretty'.

======================

EDIT

As per suggestion by @Thomas in comments, prefer to use <ui:with>

Sometimes your template will need to work with styles or other objects that come from outside of your template. Use the <ui:with> element to make them available.

<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='com.my.app.widgets.logoname.Resources'/>

  <g:HTMLPanel>

    <g:Image resource='{res.logo}'/>

    <div class='{res.style.mainBlock}'>
      <div class='{res.style.userPictureSprite}'/>

      <div>
        Well hello there
        <span class='{res.style.nameSpan}' ui:field='nameSpan'/>
      </div>
    </div>

  </g:HTMLPanel>
</ui:UiBinder>

/**
 * Resources used by the entire application.
 */
public interface Resources extends ClientBundle {
  @Source("Style.css")
  Style style();

  @Source("Logo.jpg")
  ImageResource logo();

  public interface Style extends CssResource {
    String mainBlock();
    String nameSpan();
    Sprite userPictureSprite();
  }
}
// Within the owner class for the UiBinder template
@UiField Resources res;

...

res.style().ensureInjected();

Refer GWT documentation on Using an external resource