Java GWT UiBinder CSS样式

我为垂直布局面板的边框声明了一些颜色，如：

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

但是。。。什么也没发生！我做错了什么

建议后的代码（不起作用）：

---

您不能像这样引用css样式名。在您的示例中，

中的样式名只能在ui绑定文件中使用，因为它被GWT混淆了。你应该把这种风格放在一个适当的位置。并将样式放置在css文件而不是uibinder文件中，并设置css资源样式名而不是普通字符串

但是，如果您只想更改某些css，也可以使用悬停选择器，而无需任何代码：

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

.border{边框颜色：黑色；边框样式：开始}
.border:悬停{边框颜色：红色；边框样式：开始}

---

并将uibinder文件中小部件上的边框样式设置为属性：

styleName=“{style.border}”

默认情况下，uibinder中声明的所有样式都是模糊的

这意味着你的风格“OnMouseOfOrderColor”很可能会变成类似“GLX0QCICAR”的东西

但是，当在JAVA代码中执行以下操作时：

border.setStyleName("onMouseOverBorderColor");

您的边框元素将真正具有“onmouseoverordercolor”样式

So 2解决方案：

使用external不混淆样式名称：

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

@外部onmouseoverordercolor onMouseOutBorderColor；
.onMouseOverOrderColor{边框颜色：红色；边框样式：开始}
.onMouseOutBorderColor{边框颜色：黑色；边框样式：开始}

在JAVA代码中使用模糊样式：

<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);
            }
        });
        ...
    }
}

.onMouseOverOrderColor{边框颜色：红色；边框样式：开始}
.onMouseOutBorderColor{边框颜色：黑色；边框样式：开始}
公共类UiWidget{
...
公共接口MyStyle扩展了CssResource{
字符串onMouseOverForderColor（）；
字符串onMouseOutBorderColor（）；
}
@尤菲尔德
保护我的风格；
公共UiWidget（字符串路径、字符串标题）{
...
clickable.addMouseOverHandler（新的MouseOverHandler（）{
@凌驾
MouseOver上的公共无效（MouseOverEvent事件）{
border.setStyleName（style.onMouseOrderColor）；
}
});
...
}
}

谢谢你的建议，我更改了代码-如我原来的帖子所示-但我没有看到预期效果。代码对吗？您忘记了大括号：

styleName=“{style.border}”

border.setStyleName("onMouseOverBorderColor");

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

<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);
            }
        });
        ...
    }
}