Accessing CSS Constants in GWT UiBinder Style

4
votes

Using GWT 2.1, I am trying to create a CSS file that contains numerous constants and common styles. I would like to use the ui:style tag to include it in the UiBinder template:

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

  <ui:style field="css" src="constants.css" />
</ui:UiBinder>

I can easily utilize the styles for elements:

<g:FlowPanel styleName="{css.panel}">...</g:FlowPanel>

But attempting to use the constants in another Style block fails:

<ui:Style>
  .templateSpecificStyle {
      background-color: {css.royalBlue};
      padding: 1em;
  }
</ui:Style>

Oddly I do not receive a compile error. The obfuscated CSS class is created; however, the content is empty. Is there any way to access these CSS constants within another Style block? Is it possible using the older ResourceBundle / CssResource pattern?

2
cssgwtuibinder

2 Answers

7
votes

After re-reading https://stackguides.com/questions/3533211/need-app-wide-css-constants-in-gwt/4143017#4143017 I see that the constants work if you add the template specific style within the style block:

<ui:Style src="constants.css">
  .templateSpecificStyle {
      background-color: royalBlue;
      padding: 1em;
  }
</ui:Style>

This is perfect for my needs.

4
votes

It may be in your best interest to define these constants in some class, then use runtime substitution to include this constant in each CSS resource you intend to use.

CSSConstants.java

package com.foo.client;
public final class CSSConstants {
    public static final String ROYAL_BLUE = "#4169E1";
}

Style block in UiBinder template

<ui:style>
  @eval royalBlue com.foo.client.ROYAL_BLUE
  .templateSpecificStyle {
    background-color: royalBlue
  }
</ui:style>

Note that even the name of the technique is "runtime substitution", the GWT compiler will replace royalBlue with a string literal because the value of royalBlue can be evaluated at compile time.

For more cool stuff that you can do in CSS resources, take a look at http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html#CssResource