java GWT UiBinder CSS 样式

GWT UiBinder CSS styling

提问by Fotinopoulos Giorgos

I declare some colors for the border of a VerticalLayout panel, like in:

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

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

Then i want to change the color of the panel's border according to the position of the mouse, and i add to the constructor of my widget the following:

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

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

    });

But ... nothing happens! What i do wrong?

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

Code after suggestion (does not work):

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

<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> 

and the java class:

和 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");
            }
*/
}

采纳答案by Hilbrand Bouwkamp

You can't refer to the css styleName like this. In your example the stylename in <ui:style>can only be used as such in the ui binder file because it's obfuscated by GWT. You should put the style in a CSSResource. And place the style in a css file instead of the uibinder file and set the css resource stylename instead of the plain string.

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

Butif you only want to change some css you could also use the hover selector without any code needed:

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

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

and set the border style on you widget in the uibinder file as an attribute: styleName="{style.border}"

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

回答by Freddy Boucher

By default all the styles declared in a UiBinder are obfuscated.

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

It means your style 'onMouseOverBorderColor' will propably become something like 'GLX0QCICAR'.

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

But when in your JAVA code you do:

但是在您的 JAVA 代码中，您会这样做：

border.setStyleName("onMouseOverBorderColor");

your border element will really have the style 'onMouseOverBorderColor'.

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

So 2 solutions:

所以2个解决方案：

Use externalto not obfuscate style names:

使用external不混淆样式名称：

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

Use the obfuscated stylein your JAVA code:

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