2012-01-24 4 views
0

ビュー(.ui.xml)が5つあります。GWT - CssResource - 一般的なスタイル - 優れた実践

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

と私はstyleNameに属性を置くすべてのページ上のすべてのボタンに:私はそのようなsoemthing貼り付けるすべてのビューに

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

を、私の質問は:私は私のすべてのボタンには、styleNameを配置する必要がありますか?私はこの種のウィジェットのために何か一般的なスタイルをしたいと思います。 このケースの良い習慣は何ですか?

答えて

1

GWT themesをカスタマイズしたり、独自に作成してみましたか?私はこれがあなたがする必要があると思います。

0

Compositeを拡張して独自のボタンMyButtonを作成し、このボタンの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> 

の場合個人的なウィジェットのテキストやその他のプロパティを設定する必要があります。それらを公開するラップボタン。

0

addStyleDependentName()を使用すると、プライマリスタイル名に追加することで追加のスタイルを作成し、特定のスタイリングを適用することができます。

たとえば、Buttonの場合、デフォルトのプライマリスタイルは.gwt-Buttonです。同じようにスタイルを設定したい5(N)ボタンのセットがある場合は、ボタンを追加するスタイルをインスタンス化します。.gwt-Button-customButton .cssファイルに追加することができます。モジュール内に1回。

関連する問題