GWT UiBinder的CSS样式

我宣布了一些色彩，为VerticalLayout的面板边框，像：GWT UiBinder的CSS样式

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

来源

2011-07-15 Fotinopoulos Giorgos

您不能引用的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}"

来源

2011-07-15 10:42:37

感谢您的建议，我改变了我的代码 - 如我原来的帖子所示 - 但我没有看到预期的效果。代码是否正确？ –

你忘了大括号：'styleName =“{style.border}”' –

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

这意味着你的风格'onMouseOverBorderColor'将可能成为'GLX0QCICAR'之类的东西。

但是，当在Java代码中你这样做：

border.setStyleName("onMouseOverBorderColor");

你的边界元素将真正有风格“onMouseOverBorderColor”。

SO 2的解决方案：

使用外部不要混淆样式名称：

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

来源

2012-06-20 17:23:10

GWT UiBinder的CSS样式

回答

相关问题