Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Need app-wide CSS constants in GWT

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?

like image 681
David Avatar asked Aug 20 '10 17:08

David


2 Answers

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.

like image 122
z00bs Avatar answered Nov 06 '22 23:11

z00bs


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.

like image 25
Jay Avatar answered Nov 06 '22 22:11

Jay