GWT - CssResource - 常用風格 - 最佳做法

我有5個視圖（.ui.xml）。在每一個觀點我粘貼soemthing這樣的：GWT - CssResource - 常用風格 - 最佳做法

<ui:style src="../MyStyle.css" />

，並在每一頁上的每個按鈕我放的styleName屬性：

<g:Button ui:field="buttonName" styleName="{style.myButtonStyle}" />

我的問題是：我必須把styleName已爲我所有的按鈕？我想爲這種小部件做一些一般的風格。這種情況的最佳做法是什麼？

來源

2012-01-24 chris

您是否嘗試過自定義GWT themes或創建自己的？我認爲這是你需要做的。

來源

2012-01-24 11:08:33

通過擴展Composite創建您自己的按鈕MyButton，並使用樣式定義此Button的UIBinder。

接下來，您可以通過在視圖中添加自己的名稱空間來重新使用此按鈕。

這是你的小工具：

package com.example.widgets; 
... 
public class MyButton extends Composite { 

    interface MyButtonUiBinder extends UiBinder<Widget, MyButton> { 
    } 

    private static MyButtonUiBinder uiBinder = GWT.create(MyButtonUiBinder.class); 

    @UiField 
    Button wrapped; 

    public MyButton() { 
     initWidget(uiBinder.createAndBindUi(this)); 
    } 

}

和UiBinder的文件：

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

    <ui:style> 
     .myStyle { 
      text-shadow: gray; 
      color: gray; 
      font-size: 12px; 
      text-decoration: italic;  
     } 
    </ui:style> 

    <g:HTMLPanel> 
      <g:Button ui:field="wrapped" styleName="{style.myStyle}" /> 
    </g:HTMLPanel> 
</ui:UiBinder>

在您的看法，您現在可以在UiBinder的文件這個按鈕：

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent"> 
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder" 
    xmlns:g='urn:import:com.google.gwt.user.client.ui' xmlns:k='urn:import:com.example.widgets'> 

<g:AbsolutePanel width="350px" height="225px"> 
     <g:at left='10' top='0'> 

       <k:MyButton></k:MyButton> 
</g:at> 
</g:AbsolutePanel> 

</ui:UiBinder>

如果您需要在您的個人小部件上設置文本或其他屬性，只需將其中的方法委託給包裹的按鈕來暴露他們。

來源

2012-01-24 11:22:40 koma

一種方法是使用addStyleDependentName()，它將通過將其附加到主樣式名稱來創建附加樣式，並允許您應用特定樣式。

例如，.gwt-Button是Button的默認主要樣式。如果您有一組您喜歡以相同方式設置的5（N）按鈕，您可以使用它們進行實例化，這會爲此按鈕添加一個附加樣式：.gwt-Button-customButton，您可以將其添加到.css文件幷包括在模塊中一次。

來源

2012-01-24 11:48:05 milan

GWT - CssResource - 常用風格 - 最佳做法

回答

相關問題