使用UiBinder为普通的html元素设置样式

Question

我有以下UiBinder代码:

...
    <div>
        <g:Label>Hello,</g:Label>
        <g:Button ui:field="button" />
    </div>
...

现在我想设置div元素的样式,然后让它给它一个红色边框.据我所知,明确的方法是定义一个像这样的样式:

    <ui:style>
    .redborder {
        border: 1px solid red;
    }
    ...

</ui:style>

所以代码总是看起来像这样:

...
        <div styleName="{style.redborder}">
            <g:Label>Hello,</g:Label>
            <g:Button ui:field="button" />
        </div>
...

但在HTML页面中没有绘制红色边框.现在我用Firebug查看页面(或者你如何在Google Chrome中调用这个东西)并看到div元素具有正确的类名,但是borwser还找不到类.如果在另一方面,我把相同的样式元素放到按钮一切正常.

有没有人知道它的行为是什么？

此致,斯特凡

Answer 1

在常规DOM元素上,在这种情况下你的DIV没有setStyleName()方法,所以只需使用class属性:

<div class="{style.redborder}"> ... </div>

styleName="..." 适用于GWT小部件,因为它被转换为调用setStyleName()方法.

顺便说一下,你可能想考虑addStyleNames="..."在你的小部件上使用,因为这允许你添加(多个)CSS类名而不会意外地丢弃已经存在的类名.