Question

I am working with gwt 2.3 UIbinder.In UIbider one apply css inline to gwt controls.Here is my UIBinderWidget.ui.xml file.

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">

.important {
font-weight: bold;
}
.grid
{
border: 1px solid #BBBBBB;
height: auto;
padding: 3px;
}

<g:>
<g:HTMLPanel>
Label,
    <g:Button styleName="{style.important}" ui:field="button" />
    <g:TextBox ui:field="text1" width="15em" />
    <g:Grid ui:field="grid1" styleName="{style.grid}">

        <g:row>
            <g:customCell>
                <g:TextBox ui:field="text2" width="15em" />
            </g:customCell>
            <g:customCell>
                <g:TextBox ui:field="text3" width="15em" />
            </g:customCell>
        </g:row>

        <g:row>
            <g:customCell>
                <g:Button ui:field="buttonA">Button A</g:Button>
            </g:customCell>
            <g:customCell>
                <g:Button ui:field="buttonB">Button B</g:Button>
            </g:customCell>
        </g:row>
        <g:row>
            <g:customCell>
                <g:Button ui:field="addNewRow">Add New Row</g:Button>
            </g:customCell>
        </g:row>
    </g:Grid>

</g:HTMLPanel>

Now in this xml file css which is applied to the gwt controls are in declared above.
I want to know it there any way to put all the css in only one file and I am able to apply css from that once css file only?

Instead of writing css in every ui.xml I want to apply from only one file. (Like style.css)
Thanks in advance.

Answer 1

You can declare the ui:style like:

<ui:style src='path/to/my/css' />

But in general, I think that is a good practice to keep the HTML with the CSS altogether.