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?

This answer in different thread might be helpful: [http://stackoverflow.com/a/10035774/490369](http://stackoverflow.com/a/10035774/490369) — alshan, Apr 05 '12 at 20:52

z00bs · Answer 1 · 2010-11-11T08:04:16.317

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.

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. — David, Nov 10 '10 at 22:57
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... — PhiLho, Feb 29 '12 at 12:19

score 1 · Answer 2 · answered Aug 06 '12 at 18:15

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.

score 0 · Answer 3 · answered Aug 20 '10 at 20:26

0

You should be able to use

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

answered Aug 20 '10 at 20:26

Sudhir Jonathan

16,998
13
66
90

Thanks Sudhir. Sadly, it won't work. The doco (http://code.google.com/p/google-web-toolkit/wiki/CssResource#Compile-time_import) 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." – David Aug 21 '10 at 00:17
Isn't Resources.css a cssResource? A compile time import is what I'm talking about... – Sudhir Jonathan Aug 21 '10 at 02:42

Need app-wide CSS constants in GWT

3 Answers3

Linked