setting CSS style Uibinder Gwt

Question

I want to change the color of a g:label using java code on a onBlur event. I am using eclipse, UIBinder.

This is what I have in mind although it doesn't work.

In my StandardDocumentDownload.ui.xml file

<ui:style>     
   .testStyle {
   }
   .styleRequiredData
   {
        color:red;

    }
 </ui:style>

this is the event in my standardDocumentDownload.java file

@UiHandler("comboTitle")
void onComboTitleBlur(BlurEvent event) {
    int title = comboTitle.getSelectedIndex();

    if(title == 0)
    {
        labTitleReq.setText("Please enter a value");
        labTitle.addStyleName("styleRequiredData");
    }
    else
    {
        labTitleReq.setText("");
    }

}

How could I add the color red to the existing style of the label upon the firing of the event.

Kind regards

Answer 1

See here under Programmatic access to inline Styles

for you, it shoulbe be something like :

<ui:style type="com.yourapp.YourClass.MyStyle">     
    .testStyle {
    }
    .styleRequiredData
    {
        color:red;
    }
</ui:style>

public class YourClass extends Widget {
    interface MyStyle extends CssResource {
        String testStyle();
        String styleRequiredData();
    }

    @UiField MyStyle style;

    /* ... */

    @UiHandler("comboTitle")
    void onComboTitleBlur(BlurEvent event) {
        int title = comboTitle.getSelectedIndex();
        if(title == 0){
            labTitleReq.setText("Please enter a value");
            labTitle.getElement().addClassName(style.styleRequiredData);
        } else {
            labTitleReq.setText("");
        }
    }
}

Answer 2

Took me a while to find it but the Documentation; "Declarative Layout with UiBinder: Programmatic access to inline Styles" tells you how. Here the code snippets

UiBinder:

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }
    .enabled { color:black; }
    .disabled { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.enabled}'>I'm a red box widget.</div>

</ui:UiBinder>

Code behind:

public class MyFoo extends Widget {
  interface MyStyle extends CssResource {
    String enabled();
    String disabled();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addClassName(enabled ? style.enabled() : style.disabled());
    getElement().removeClassName(enabled ? style.disabled() : style.enabled());
  }
}

Description:

The element has a new attribute, type='com.my.app.MyFoo.MyStyle'. That means that it needs to implement that interface (defined in the Java source for the MyFoo widget above) and provide the two CSS classes it calls for, enabled and disabled.

Now look at the @UiField MyStyle style; field in MyFoo.java. That gives the code access to the CssResource generated for the block. The setEnabled method uses that field to apply the enabled and disabled styles as the widget is turned on and off.

You're free to define as many other classes as you like in a style block with a specified type, but your code will have access only to those required by the interface.