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

回答

相關問題