0

'editable' プロパティが false に設定されているフレックス プログラムで、すべての textinput および textarea コンポーネントのスタイル (背景色) を変更する方法はありますか?

ありがとう

4

1 に答える 1

2

カスタムスキンを作成する

これには特定のスタイルがないため、カスタムスキンを作成する必要があります。次の手順に従ってください。

  • TextInputのカスタムスキンを作成します。最初に、新しいmxmlファイル（たとえば、MyTextInputSkin.mxmlと呼ばれる）を作成します。現在の最も簡単なアプローチは、すべてのコードをspark.skins.spark.TextInputSkin新しいクラスにコピーすることです。
  • メソッドをオーバーライドし、ホストコンポーネントのプロパティupdateDisplayList()に基づいて、スキンのクラスに必要な変更を適用します。editable例えば：

。

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);
    //when editable the background will be red and otherwise it'll be blue
    background.color = hostComponent.editable ? 0xff0000 : 0x0000ff;
}
  • 次のように、CSSセレクターを介してこのスキンをすべてのTextInputsに適用します。

。

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
}
  • TextAreaコンポーネントに対して繰り返します

より一般的にする

次のようなことを行うことで、より一般的にすることができます。
updateDisplayList（）メソッドの場合：

override protected function updateDisplayList(
    unscaledWidth:Number, unscaledHeight:Number):void {

    super.updateDisplayList(unscaledWidth, unscaledHeight);

    var bgColorStyle:String = "backgroundColor";
    if (!hostComponent.editable) = "nonEditableBackgroundColor";
    background.color = getStyle(bgColorStyle);
}

そしてCSSでは：

@namespace s "library://ns.adobe.com/flex/spark";

s|TextInput {
    skinClass: ClassReference("my.skins.MyTextInputSkin");
    backGroundColor: #ff0000;
    nonEditableBackgroundColor: #0000ff;
}

このようにして、カスタムスキンをどこでも再利用し、スタイリングを通じてさまざまな色を適用できます。ホストコンポーネントのメタデータでそのスタイルが宣言されていないため、MXMLを介し
て設定できないことに注意してください。これはデフォルトのスタイルであり、TextInputのメタデータで宣言されているため、nonEditableBackgroundColor適用されません。backGroundColor

于 2013-01-28T17:33:55.670 に答える