GWT UiBinder CSS styling

Question

I declare some colors for the border of a VerticalLayout panel, like in:

<ui:style>
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>

Then i want to change the color of the panel's border according to the position of the mouse, and i add to the constructor of my widget the following:

    clickable.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            GWT.log("mouse over");
            border.setStyleName("onMouseOverBorderColor");
        }

    });
    clickable.addMouseOutHandler(new MouseOutHandler() {

        @Override
        public void onMouseOut(MouseOutEvent event) {
            GWT.log("mouse out");
            border.setStyleName("onMouseOutBorderColor");
        }

    });

But... nothing happens? What i do wrong?

Code after suggestion (does not work):

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style>
        .fontStyleTitle {font-weight: bold }        
        .border {border-color: black; border-style: outset}
    .border:hover {border-color: red; border-style: outset}
    </ui:style>

    <g:FocusPanel ui:field="clickable">
            <g:VerticalPanel ui:field="border" borderWidth="1" styleName="style.border">
                <g:Image ui:field="myImage"/>
                <g:Label ui:field="myTitle" horizontalAlignment="ALIGN_CENTER" styleName="{style.fontStyleTitle}"/>
            </g:VerticalPanel>          
    </g:FocusPanel>

</ui:UiBinder> 

and the java class:

public UiWidget(String path, String theTitle) {
        initWidget(uiBinder.createAndBindUi(this));
        GWT.log(URL_PREFIX+path);
        myImage.setUrl(URL_PREFIX+path);
        myTitle.setText(theTitle);
        myImage.setSize(IMG_WIDTH, IMG_HEIGHT);
        /*
        clickable.addMouseOverHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {
                GWT.log("mouse over");
            }

        });
        clickable.addMouseOutHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                GWT.log("mouse out");
            }
*/
}

Answer 1

By default all the styles declared in a UiBinder are obfuscated.

It means your style 'onMouseOverBorderColor' will propably become something like 'GLX0QCICAR'.

But when in your JAVA code you do:

border.setStyleName("onMouseOverBorderColor");

your border element will really have the style 'onMouseOverBorderColor'.

So 2 solutions:

Use external to not obfuscate style names:

<ui:style>
    @external onMouseOverBorderColor onMouseOutBorderColor;
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>

Use the obfuscated style in your JAVA code:

<ui:style type="your.package.name.UiWidget.MyStyle">
    .onMouseOverBorderColor {border-color: red; border-style: outset}
    .onMouseOutBorderColor {border-color: black; border-style: outset}
</ui:style>

public class UiWidget {
    ...
    public interface MyStyle extends CssResource {
        String onMouseOverBorderColor();
        String onMouseOutBorderColor();
    }

    @UiField
    protected MyStyle style;

    public UiWidget(String path, String theTitle) {
        ...
        clickable.addMouseOverHandler(new MouseOverHandler() {
            @Override
            public void onMouseOver(MouseOverEvent event) {
                border.setStyleName(style.onMouseOverBorderColor);
            }
        });
        ...
    }
}

Answer 2

You can't refer to the css styleName like this. In your example the stylename in <ui:style> can only be used as such in the ui binder file because it's obfuscated by GWT. You should put the style in a CSSResource . And place the style in a css file instead of the uibinder file and set the css resource stylename instead of the plain string.

But if you only want to change some css you could also use the hover selector without any code needed:

<ui:style>
    .border {border-color: black; border-style: outset}
    .border:hover {border-color: red; border-style: outset}
</ui:style>

and set the border style on you widget in the uibinder file as an attribute: styleName="{style.border}"