How to add styleDependent names programmatically?

Question

I'm trying to create a separate Button css class, that should be accessible by a ClientBundle. My goal is to change button styles programmatically by application state.

The following applies the button style, but does not change the background, so somehow the -ok dependent stylename is not taken into account. Why?

.myButton {
    background: white;
}

.myButton-ok {
    background: green;
}

public interface MyButtonResource extends ClientBundle {
    public static final MyButtonResource INSTANCE = GWT.create(MyButtonResource.class);

    @Source("MyButtonResource.css")
    Style css();

    interface Style extends CssResource {
        @ClassName("myButton")
        String buttonStyle();

        @ClassName("myButton-ok")
        String buttonStyleOK();
    }
}


MyButtonResource.INSTANCE.css().ensureInjected();
setStyleName(MyButtonResource.INSTANCE.css().buttonStyle());
button.addStyleDependentName(MyButtonResource.INSTANCE.css().buttonStyleOK());

score 0 · Accepted Answer · answered Apr 08 '13 at 05:44

You cannot addStyleDependentName with obfuscated css resources, see this issue

The problem is that the addStyleDependentName appends a suffix -ok to the current style button setting the style of the element to button-ok

But when obfuscator acts, in your resource you will result AA for button and AB for button-ok. In consequence after applying your code in the OK status your button will have AA-AB which does not match any rule in your css section.

The only way to face this, is adding a second style to your widget, I would do:

button.addStyleName(MyButtonResource.INSTANCE.css().buttonStyleOK());

How to add styleDependent names programmatically?

1 Answers1