GWT UiBinder CSS 样式

Question

我为 VerticalLayout 面板的边框声明了一些颜色，例如：

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

然后我想根据鼠标的位置改变面板边框的颜色，我在我的小部件的构造函数中添加以下内容：

    clickable.addMouseOverHandler(new MouseOverHandler() {

        @Override
        public void onMouseOver(MouseOverEvent event) {
            GWT.log("mouse over");
            border.setStyleName("onMouseOverBorderColor");
        }

    });
    clickable.addMouseOutHandler(new MouseOutHandler() {

        @Override
        public void onMouseOut(MouseOutEvent event) {
            GWT.log("mouse out");
            border.setStyleName("onMouseOutBorderColor");
        }

    });

但是……什么也没有发生！我做错了什么？

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

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

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

    <g:FocusPanel ui:field="clickable">
            <g:VerticalPanel ui:field="border" borderWidth="1" styleName="style.border">
                <g:Image ui:field="myImage"/>
                <g:Label ui:field="myTitle" horizontalAlignment="ALIGN_CENTER" styleName="{style.fontStyleTitle}"/>
            </g:VerticalPanel>          
    </g:FocusPanel>

</ui:UiBinder> 

还有java类：

public UiWidget(String path, String theTitle) {
        initWidget(uiBinder.createAndBindUi(this));
        GWT.log(URL_PREFIX+path);
        myImage.setUrl(URL_PREFIX+path);
        myTitle.setText(theTitle);
        myImage.setSize(IMG_WIDTH, IMG_HEIGHT);
        /*
        clickable.addMouseOverHandler(new MouseOverHandler() {

            @Override
            public void onMouseOver(MouseOverEvent event) {
                GWT.log("mouse over");
            }

        });
        clickable.addMouseOutHandler(new MouseOutHandler() {

            @Override
            public void onMouseOut(MouseOutEvent event) {
                GWT.log("mouse out");
            }
*/
}

Answer 1

默认情况下，在 UiBinder 中声明的所有样式都被混淆了。

这意味着您的样式“onMouseOverBorderColor”很可能会变成类似于“GLX0QCICAR”的样式。

但是当你在你的 JAVA 代码中时：

border.setStyleName("onMouseOverBorderColor");

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

所以 2 个解决方案：

使用 external 不混淆样式名称：

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

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

Answer 2

你不能像这样引用css styleName。在您的示例中，<ui:style> 中的样式名只能在 ui 活页夹文件中使用，因为它已被 GWT 混淆。您应该将样式放在CSSResource 中。并将样式放在 css 文件而不是 uibinder 文件中，并设置 css 资源样式名而不是纯字符串。

但是如果你只想改变一些CSS，你也可以使用悬停选择器而不需要任何代码：

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

并在 uibinder 文件中将小部件的边框样式设置为属性：styleName="{style.border}"