GWT: Returning multiple styles for the same CSS field

Question

In a CssResource, Can I return multiple style class names from the same method?

[please forgive any mistakes in code - I'm trying to recreate at home, from memory]. I have the following library code (which I can't change):

void render(ClientBundle1 bundle) {
    setInnerHtml("<div class=\" + bundle.css().style() + \"/>");
}

The bundle is straight forward:

interface ClientBundle1 extends ClientBundle {
    @Source("css1.css")
    CssResource1 css();
}

and the css resource:

interface CssResource1 extends CssResource {
    style1();
}

and the css1.css:

.style1 {width=10; height=20}

Now - I'd like to _partially_ override "style1" with another style (only override the height, not the width) of from my own css (css2.css). However, my css2.css is declared like this:

.style2 {height=30}

So I'd like to partially override css1.style1 with css2.style2 (different class name).

If this was vanilla HTML, I would've just written:

...import css1 then css2...

  <div class="style1 style2"/>

However, since this is GWT, I would need something like this:

interface ClientBundle2 extends ClientBundle1 {
    @Source("css1.css", "css2.css")
    CssResource2 css();
}

and the css resource:

interface CssResource2 extends CssResource1 {
    @Classname("style1", "style2")
    style();
}

but of course, the above isn't possible in GWT.

Is there a way of assigning two style class names per a single style method?

Colin Alworth · Accepted Answer · 2012-07-10 03:45:23Z

2

Several options, none of which are exactly what you are asking for:

Add more than one class:

Where ever you are applying that style, just as you would say <div class="style1 style2"/>, add both styles. If in UiBinder, do something like <g:Widget addStyleNames="{css.style1} {css.style2}" />, and if in Java, just add both classes:

widget.addStyleNames(css.style1() + " " + css.style2());

or

widget.addStyleNames(css.style1());
widget.addStyleNames(css.style2());

Override just that style:

Why not have more than one style rule for either style1 or style2? Several ways, depending on what you are after:

css1.css:

.style1 {width:10px; height:20px}

and css2.css:

.style1 {height:30px}

Used in this CssResource/ClientBundle:

interface CssResource2 extends CssResource1 {
    String style();
}
interface MyClientBundle extends ClientBundle {
    @Source({"css1.css", "css2.css}) 
    CssResource2 css();
}

Will result in this being (more or less) the style:

.style1 {width:10px; height:30px}

Since later CSS rules with equal weight override earlier ones.

Alternatively, something like:

css1.css:

.style1, .style2 {width:10px; height:20px}

css2.css:

.style2 {height:30px}

Will result in anything with style1 being 10x20, while anything with style2 would be 10x30. The @ClassName annotation can be used to make CssResource2 more or less ignore the earlier defined style.

answered Jul 10, 2012 at 3:45

Colin Alworth

18.5k2 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ran Biron Over a year ago

Thanks, but, as you've said, it doesn't help. The first solution is a no go because it's library code, not my code that generates the HTML. The second solution is a no go because the whole idea is to have css2 with all of my customizations matching different parts in the library. Since each part of the library use "generic" names (like "trigger" or "button") it's problematic for me to override one part without overriding the other.

Colin Alworth Over a year ago

I'm not sure you are seeing how CssResource/ClientBundle works then - this isn't what you asked for, but it should work, as when you create a new CssResource type with its own @Source, it will get new obfuscated names, which won't conflict with those generated from other CssResources (i.e. CssResource1.trigger might be 'GXHT' while CssResource2.trigger might be 'GXRT')

Ran Biron Over a year ago

Yes, but is still need a CSS with the style name dictated by the library. Which means I need multiple CSS files to override different parts of the library because they chose to reuse style names from different CSS files.

Carl Over a year ago

great to find that "addStyleNames" can be used in a UiBinder widget! thanks.

Collectives™ on Stack Overflow

GWT: Returning multiple styles for the same CSS field

1 Answer 1

Add more than one class:

Override just that style:

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Add more than one class:

Override just that style:

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related