Google Web Toolkit - UiBinder with CSS styling

Question

I am new in GWT. Here is my questions:

Form.css

.text{
color: orange;
font-size: 16pt;}

FormResources.java

public interface FormResources extends ClientBundle{

@Source("Form.css")
MyCSS style();

public interface MyCSS extends CssResource{
    String text();
}}

Form.ui.xml

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
         xmlns:g="urn:import:com.google.gwt.user.client.ui"
         xmlns:res="urn:with:com.org.yournamehere.client.FormResources">

<ui:with field='res' type='org.yournamehere.client.FormResources' />

<g:HTMLPanel>
    <g:Label res:styleName="style.text">ABC</g:Label>
</g:HTMLPanel></ui:UiBinder>

Form.java

public class Form extends Composite {

private static final FormUiBinder uiBinder = GWT.create(FormUiBinder.class);

@UiTemplate("Form.ui.xml")
interface FormUiBinder extends UiBinder<Widget, Form> {}

@UiField(provided = true)
final FormResources res;

public Form() {
    this.res = GWT.create(FormResources.class);
    res.style().ensureInjected();
    initWidget(uiBinder.createAndBindUi(this));
}}

My problem is can show the ABC word, but not in orange color and size is 16pt. The Css part cannot shown. Please help me to solve this problem. Thanks.

Answer 1

You are almost doing right.

Just replace below line in Form.ui.xml file.

<g:Label res:styleName="style.text">ABC</g:Label>

with

<g:Label res:styleName="{res.style.text}">ABC</g:Label>

screenshot:

---

Problem : "style.text" is not referring to your style defined in FormResources#MyCSS#text.

Always enclose the value in {...} if you want to use some dynamic values.

For more info have a look at sample on GWT UiBinder - Hello Stylish World