Need app-wide CSS constants in GWT

Question

I'd like to define some colours as constants in a GWT CssResource, and use those constants throughout my application; but I don't know how to do that.

I'll tell you what what I've tried. I've created a ClientBundle and a CssResource as follows:

public interface Resources extends ClientBundle {
  public interface MyStyle extends CssResource {
    String JUNGLEGREEN();
    String example();
    ...
  }
  @Source("Resources.css")
  MyStyle css();
}

I've defined some constants in Resources.css:

@def JUNGLEGREEN #1F3D0A;

Within Resources.css, I use those constants like so:

.example { color:JUNGLEGREEN; }

I'm not aware of a way to re-use those constants in other CSS files and UiBinder templates. I'd like to do this in some other UiBinder file, say LoginView.ui.xml:

<ui:with field='resources' type='com.example.Resources' />
<ui:style>
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>

...but it doesn't seem to compile. Do you know how I can achieve my objective?

Unlookedfor

This answer in different thread might be helpful: https://mcmap.net/q/1471437/-gwt-problems-with-constants-in-css – Fermium

Answer 1

This is how we do it:

• we place all our constant attributes in a constant.css file

@def black #241b15;   /* text color */
@def orange #ff4f00;   /* links */

• in each ui.xml file you can reference to those constants the following way:

<ui:style src="../../resources/css/constants.css">
    .myStyle {
        color: orange;
    }
</ui:style>

Hope that helps.

EDIT:

To avoid the relative path in the <ui:style> element you could do the following:

• define your constants again in a css file (say constants.css)

@def junglegreen #1f3d0a;

• create a ClientBundle and CssResource to retrieve the defined constants

public interface MyResources extends ClientBundle {

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

    public interface Constants extends CssResource {

        String junglegreen();
    }

    Constants constants();
}

-use the @eval annotation to access the constant

<ui:style>
    @eval green com.gwt.client.widget.test.MyResources.INSTANCE.constants().junglegreen();

    .someClass {
        color: green;
    }
</ui:style>

The only way I know of how to deal with constants without referencing the css file itself.

Lixivium

Thank you, zOObs. Your solution is part-way there, but I don't like that the path to the CSS file is relative to the ui.xml file. There must be a better way. – Unlookedfor

Added a second approach. See my initial answer. – Lixivium

Thanks z00bs for the second approach. I was almost there, but I used something like ...MyResources.INSTANCE.Constants.junglegreen() instead, leading to quite cryptic error messages... – Clanton

Answer 2

I know this answer might be kind of late but may help someone. I was having the same problem and was able to solve it by adding the following:

Resources.css().ensureInjected()

I added it in my factory but tried it in a couple of places and no matter where I put it, it worked.

Steadman

Answer 3

You should be able to use

<ui:style>
  @IMPORT url("../../../global.css");
  .mainPanel {
    background:{resources.css.JUNGLEGREEN};
    ...
  }
</ui:style>

Firer

Thanks Sudhir. Sadly, it won't work. The doco (code.google.com/p/google-web-toolkit/wiki/…) says, "The @import statement will only work for other CssResources, not for URLs at runtime, since the .gwt.xml or StyleInjector can be used in those cases." – Unlookedfor

Isn't Resources.css a cssResource? A compile time import is what I'm talking about... – Firer