[Flex] spark:TextAreaのdisabled時(enabled=false時)スタイル指定

2012年3月29日 propg Flex, 0

TextAreaのenabledプロパティをfalseにした時は、通常はグレイがかった感じになって入力不可となります。

この時のスタイルを変える方法をご紹介します。

TextAreaのenable=falseの時には、ステートがdisabledになります。
このステートに対してのスタイルを指定します。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
	xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>

	<fx:Declarations>
	</fx:Declarations>

	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		@namespace mx "library://ns.adobe.com/flex/mx";
		global {
			fontSize:20;
		}
		
		s|TextArea {
			contentBackgroundColor: yellow;
		}

		s|TextArea:disabled {
			contentBackgroundColor: red;
			color:black;
		}
	</fx:Style>

	<s:CheckBox label="TextAreaのenabled"
		change="{textArea1.enabled = CheckBox(event.currentTarget).selected}" selected="true"/>

	<s:TextArea id="textArea1" width="300" height="100" text="ここはTextAreaです"/>

</s:Application>

サンプルコードの「s|TextArea:disabled」のスタイル指定が、enabled=falseの時のスタイルとなります。
コロンの後ろにステート名をつければそのステートでのスタイル指定となるようです。

実際の動作はコチラ
[embedSWF]http://propg.ee-mall.info/wp-content/uploads/TextAreaTest.swf,300,200[/embedSWF]

実際にenabled=falseにしてみると、スタイルに指定した”red”ではなく、少し薄い色になります。
これは、disabledステート時にalpha値が0.5になるためで、こちらはスタイルでは制御できません。

よく、enabled=false時に入力されている文字が薄くなって見にくいというクレームを受けます。
この薄さを変更するには、スキンを作って指定を変更する必要があります。

TextAreaのスキンをFlashBuilderから作成し、作成されたスキンの最初の定義部を見ます。

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
    xmlns:fb="http://ns.adobe.com/flashbuilder/2009" 
    alpha.disabledStates="0.5" blendMode="normal">

「alpha.disabledStates=”0.5″」の指定が、enabled=false時のalpha指定となりますので、この値を1.0とすれば、スタイルに指定した通りの色になります。

スキン変更後の動作はコチラ
[embedSWF]http://propg.ee-mall.info/wp-content/uploads/TextAreaTest2.swf,300,200[/embedSWF]

ココだけのためにスキンを作るのはわずらわしいですね。

 

== ランキングに参加しています。ぜひクリックお願いします ==

TextArea

[Flex] 機種依存文字チェックバリデータ 機種依存文字チェッカープログラムを公開しました