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

あなたはこのようなCSSのは、styleNameを参照することはできません。それはGWTで難読化されますので、あなたの例では<ui:style>でスタイル名は、UIバインダーファイルにそのまま使用することができます。スタイルはCSSResourceにする必要があります。そして、代わりにUiBinderサンプルメッセージファイルのCSSファイルでスタイルを配置し、プレーンな文字列ではなく、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}"

Answer 2

は、デフォルトではUiBinderサンプルメッセージで宣言されたすべてのスタイルは、難読化されています。

それはあなたのスタイルを意味は、「onMouseOverBorderColor」propably「GLX0QCICAR」のようなものになるだろう。

しかし、あなたのJavaコードにあなたがする場合：

border.setStyleName("onMouseOverBorderColor"); 

あなたの境界要素は本当にスタイルを持っています「onMouseOverBorderColor」。

だから、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); 
      } 
     }); 
     ... 
    } 
}