29

TextAreaを含む単純な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">

    <g:TextArea visibleLines="3" />
</ui:UiBinder>

このテキストエリアの背景色を、書き込み可能および読み取り専用の状態に制御したいと思います。GWTは、これを実現するために「-readonly」スタイルの名前デコレータを使用します。だから私はこれを試してみます：

<!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">

    <ui:style>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>

CssResourcesのスタイル名が難読化されているため、明らかにこれは機能しません。その結果、次のようになります。

.G1x26wpeN {
    background-color:yellow
 }
.G1x26wpeO {
    background-color: lightgray;
}

書き込み可能なテキストエリアの結果のHTMLは次のようになります。

<textarea tabindex="0" class="G1x26wpeN" rows="3"/>

読み取り専用のテキストエリアは次のようになります。

<textarea tabindex="0" class="G1x26wpeN G1x26wpeN-readonly" readonly="" rows="3"/>

GWTが主要部分を難読化するが、「読み取り専用」デクドレーターは難読化しないように、スタイルを宣言するにはどうすればよいですか？

スタイル名全体の難読化を無効にできることを知っています。しかし、デコレータを利用しながら、難読化を維持したいと思います。

4

6 に答える 6

20

現時点 (GWT 2.4) ではサポートされておらず、いつサポートされるかは不明です。GWT イシュー トラッカーのイシュー 4746を参照してください。

@external回避策は、これらのスタイルの難読化を無効にするを追加することです。この場合、次のようになります。

@external textBoxStyle, textBoxStyle-readonly;
于 2011-10-05T15:35:42.870 に答える
5

このようなsthを試してみませんか

public class MyFoo extends Widget {
  interface MyStyle extends CssResource {
    String normal();
    String readonly();
  }

  @UiField MyStyle style;

  /* ... */

  void setEnabled(boolean enabled) {
    getElement().addStyle(enabled ? style.normal() : style.readonly());
    getElement().removeStyle(enabled ? style.readonly() : style.normal());
  }
}

これにより、テキストボックスが「通常」または読み取り専用の場合にスタイルを変更できます。

そしてもちろん、UiBinderでは次のようなものが必要です

<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'>

  <ui:style type='com.my.app.MyFoo.MyStyle'>
    .redBox { background-color:pink; border: 1px solid red; }
    .normal { color:black; }
    .readonly { color:gray; }
  </ui:style>

  <div class='{style.redBox} {style.normal}'>I'm a red box widget.</div>

</ui:UiBinder>
于 2010-04-23T17:15:32.467 に答える
5

このスタイルをすべての読み取り専用に使用したい場合は、GWT テーマの CSS ファイルでスタイルをTextArea変更することをお勧めします。それ以外の場合は、読み取り専用 に設定したときにカスタム スタイルをプログラムで追加することしか考えられません。.gwt-TextArea-readonly
TextArea

PS：ドキュメントから：

<set-configuration-property name="CssResource.obfuscationPrefix" value="empty" />` can be used for minimal-length selector names, but this is only recommended when the GWT module has total control over the page.

これを (「空」または「X」またはその他の未使用のプレフィックスと共に) はるかに短いクラス名に使用することをお勧めします。デフォルト設定では、難読化 (textBoxStyle - 12 文字、G1x26wpeN - 9 文字、X0 - 2 文字) によってそれほど得られないためです。 ;)))。

于 2010-01-13T12:45:20.357 に答える
3

今すぐお試しください。
要素を使用<ui:style>すると、必要な場所で UI の CSS を定義できます
注: <ui:style>要素はルート要素の直接の子である必要があります

    <!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">
        <g:TextArea visibleLines="3" />
    </ui: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">

    <ui:style field='MyStyle'>
        .textBoxStyle {
            background-color:yellow;
        }
        .textBoxStyle-readonly {
            background-color:lightgray;
        }
    </ui:style>

    <g:TextArea name="myText" styleName="{MyStyle.textBoxStyle}" visibleLines="3" />
</ui:UiBinder>
于 2011-10-12T08:02:39.013 に答える
1

UIBinder にタイプミスはありませんか?

あなたが持っている：

    <g:TextArea styleName="{style.textBoxStyle}" visibleLines="3" />

..しかし、「stylePrimaryName」を使用する必要があると思います。

    <g:TextArea stylePrimaryName="{style.textBoxStyle}" visibleLines="3" />

しかし、私はこの質問が本当にすでに答えられていると思います..

于 2011-11-11T20:31:45.600 に答える
0

特に、このスレッドの他の投稿からの情報をまとめることで、私が理解した貴重なものがあります...

@external を使用すると、gwt スタイルをオーバーライドできます。問題は、この変更がグローバルに適用されることです! ただし、ウィジェット タイプのすべてのインスタンスに影響を与えることなく、select 属性を拡張およびオーバーライドすることは可能です。(これは、gwt クラス名 + サフィックスを使用して addStyleDependantName() を使用して css クラスを作成する、プログラムによるスタイリング方法に似ています。)

UIBinder + CssResource を使用して gwt スタイルを拡張する例を次に示します。CssResource の部分は省きましたが、お分かりいただけると思います...

xxxx.ui.xml ファイルで、gwt スタイルを公開しますが、いじらないでください。

<ui:style>
    @external .gwt-Button; .gwt-Button {}
</ui:style>

次に、styleName 属性で 2 つ (またはそれ以上) のスタイルを指定して、ウィジェットのスタイルを設定します。つまり、gwt スタイルと、リソースの 1 つ (または複数) です。

<g:Button ui:field="submitButton_" text="Submit" styleName="{style.gwt-Button} {res.loginStyles.submitButtonStyle}" />

css クラスは次のとおりです。

.submitButtonStyle{
   margin: 3px 5px 5px 0px;
}

この場合、標準的な方法 (モジュールの継承によって簡単に変更できます) でスタイル設定されたボタンを定義しましたが、特定のマージンは固定されたままです。これにより、グローバル スタイルが台無しになることはなく、すべての属性を手動で定義する必要がなく、グローバル スタイルを clean.css、dark.css などと自由に交換することができました。

于 2013-08-09T14:40:40.023 に答える