Dynamic CSS class names in GWT

Question

I am in the process of porting a simple CSS grid system to GWT. My CSS file currently has classes like .size1, .size2 etc., and I have a CSS resource that looks like -

interface MyResource extends CSSResource {

  @ClassName("size1")
  String size1();

  @ClassName("size2")
  String size2();

  // And so on
}

However what I really want, is to have a single function like the following -

String size(int size);

which will generate the appropriate class when passed the size as an integer at runtime. This is needed as I perform some calculations to determine the actual space available/needed for a widget in javascript and then attach the appropriate class name.

Is this something that is even possible with GWT?

Edit: To clarify, I can easily write such a method myself like so -

String size(int size) {
  switch(size) {
    case 1: return size1();
    case 2: return size2();
    ... and so on
  }
}

However MyResource is an interface and its implementation is generated at runtime by GWT. This means I cannot add my size method to the MyResource type. So I guess I am asking for a way to add custom methods to the MyResource class.

Well, I'm not sure what part of the question I should elaborate upon. Basically, a CSSResource in GWT is an interface with method that have a one-to-one mapping with CSS classes. I need a single method to generate different class names, based on the parameters passed to that method. I could easily write that method myself however, a CSSResource is an interface and cannot have concrete implementations of methods. — Anupam Jain, Mar 19 '12 at 10:55

score 1 · Answer 1 · answered Mar 19 '12 at 11:45

1

I think you should not try to solve this via css files, but if you want to have dynamic values in your style you should set those values in code via myWidget.getElement().getStyle().setSomeCssMethod(). Or in this case you seem to want to set size, as in height and width. For most widgets those values can be set directly. Unless I'm missing something, why do you want to use css classes and not set it directly in code?

answered Mar 19 '12 at 11:45

Hilbrand Bouwkamp

13,509
1
45
52

I'm trying to use an existing CSS grid system which defines classes like "size1" - "size16", "offset1" - "offset16", etc. This is a pretty common thing for a CSS grid system to do. However, trying to fit that scheme into GWT CSSResource is having me run up against one wall after another. I of course can set width and height (and other CSS properties) myself, but that defeats the whole point of CSSResource. – Anupam Jain Mar 19 '12 at 12:40

score 1 · Answer 2 · answered Mar 20 '12 at 04:59

You can't pass method names to the CSSResource.

Remember that CSSResource's purpose is to minify and obfuscate the CSS class names.

However, just because CSS Resource can do this, doesn't mean you have to use it for all you code.

For example you already know that the CSS Resource methods return a string, so just create your own method that returns a string (your dynamic class names) and to load your CSS use the @CssResource.NotStrict annotation when adding it to your resource.

Dynamic CSS class names in GWT

2 Answers2