Question

Simple example. I have 2 styles declared in UiBinder:

    <ui:style>
    .success {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #FFF1A8;
    }
    .error {
        font-size: 13px;
        margin: 15px;
        font-weight: bold;
        display: inline;
        padding: 3px 7px;
        background: #990000;
        color: #fff;
    }
</ui:style>

I also have a label that one of them is applied too.

    <g:Label ui:field="statusLabel" styleName='{style.success}' />

Within UiBinder, is there a way that I would be able to go about programatically switching the style to the error style? It’s nice being able to organize my CSS right there in the widget, and I haven’t found another good way of organizing it.

If what I’m asking isn’t possible, how should I be organizing my CSS in gwt, so that I don’t end up with a giant pool of styles, and is also easy, and usable? I imagine there is a smart way to use a ClientBundle for this, but I haven’t figured it out. I also think it’d be more convenient to be able to do the above mentioned way by just keeping everything in UiBinder without messing with another file. Either way, please help me before this gets out of hand!

Answer 1

Yes, you have to do it in you code behind file. A description can be found here:
Programmatic access to inline Styles.

Here is an example:

testBinder.ui.xml

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">
    <ui:style type='XXXXXXXXXXX.client.testBinder.MyStyle'>
        .enabled {
            color: black;
        }

        .disabled {
            color: gray;
        }
    </ui:style>
    <g:HTMLPanel>
        <g:Button ui:field="button" text="ChangeButton" styleName="{style.enabled}" />

    </g:HTMLPanel>
</ui:UiBinder> 

testBinder.java

package XXXXXXXXXXX.client;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.CssResource;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.uibinder.client.UiHandler;
import com.google.gwt.event.dom.client.ClickEvent;

public class testBinder extends Composite {

    private static testBinderUiBinder uiBinder = GWT
            .create(testBinderUiBinder.class);
    @UiField
    Button button;

    @UiField
    MyStyle style;

    interface MyStyle extends CssResource {
        String enabled();

        String disabled();
    }

    interface testBinderUiBinder extends UiBinder<Widget, testBinder> {
    }

    public testBinder() {
        initWidget(uiBinder.createAndBindUi(this));
    }

    boolean enabled = true;

    @UiHandler("button")
    void onButtonClick(ClickEvent event) {
        if(enabled){
            enabled = false;
            button.setStyleName(style.disabled());
        }
        else{
            enabled = true;
            button.setStyleName(style.enabled());
        }
    }
}

If you click this button, you can see the it’s style changing according to your CSS definition in your UiBinder file. (In this case switching from black to gray an visa verse)