Flex Builder改め、Flash Builderでは、MXMLスキンの作成というのがメニューに加わり、
よりスキンの作成も簡単になるのかとおもい、ちょっと挑戦してみた。

ここで、単純なSkinの作成ではほかのサイトを見た方が詳しく書いてあると思うので、
私なりにちょっとはまった部分を乗せる。

具体的には、SparkのButtonを作成することにした。
しかし、Buttonに、2つのラベルが設定できるようにしたいのだ。
どうしてかと言えば、STEP 1 とか STEP 2とかのようなナビゲーションボタンを作りたい。

ここで、

<local :StepButton label="初期設定" step="STEP 1" />

のようにして、以下のような図のボタンを作りたい。

blog_20100903

Buttonのスキンを作ると、デフォルトでソースがコピーされるが、
いらない部分を消していき、必要となるラベルを以下のように追加した

<local :step width="{width}" height="{height}" />
<s :Label id="stepDisplay"
		 textAlign="center"
		 verticalAlign="top"
		 maxDisplayedLines="1"
		 horizontalCenter="0" verticalCenter="1"
		 left="10" right="10" top="13" bottom="2" color="#FFFFFF" fontSize="14" >
</s>


<!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
<s :Label id="labelDisplay"
           textAlign="center"
           verticalAlign="middle"
           maxDisplayedLines="1"
           horizontalCenter="0" verticalCenter="1"
           left="10" right="10" top="7" bottom="2" color="#FFFFFF" fontSize="16">
</s>

ちなみに、<local :step />というのはFXGで作成した背景画像です。

どうやら、labelDisplayというのが、labelで設定したものなので、これと同様にして、
stepDisplayのラベルを作成してみた。

さて、設定できる先は作成したものの、このLabelにどうやって値を設定するのだろうか?と悩んでしまった。

結論から先に言えば、以下のコードでできた。

< ?xml version="1.0" encoding="utf-8"?>
<s :Button xmlns:fx="http://ns.adobe.com/mxml/2009" 
		  xmlns:s="library://ns.adobe.com/flex/spark" 
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  width="160" height="75"
		  >
	<fx :Declarations>
		<s :State name="current" />
	</fx>
	<fx :Script>
		< !&#91;CDATA&#91;
			import spark.components.supportClasses.TextBase;
			
			&#91;SkinPart(required="false")&#93;
			public var stepDisplay:TextBase;
			
			private var _stepLabel:String;
			
			public function set stepLabel(label:String):void{
				
				if(stepDisplay){
					stepDisplay.text = label;
				}
				_stepLabel = label;
			}
			
			override protected function partAdded(partName:String, instance:Object):void{
				super.partAdded(partName,instance);
				
				if(instance == stepDisplay){
					stepDisplay.text = _stepLabel;
				}
			}
		&#93;&#93;>
	</fx>
</s>

肝は、partAdded(partName:String, instance:Object) の部分。
ここで、instance部分にSkinPartで定義したインスタンスが渡ってくるので、そのインスタンスに文字列を設定すると
Skinで定義した stepDisplayに文字列が設定される。

まだまだ、疑問はのこるが、とりあえずはこれで目的は達成できた。

疑問は
1)SkinのIDと部品の変数名は同じでないといけないのか?
 マッピングをどこかに記述することができるのか?

2)SkinとMXMLの部品をどう使い分けるか?
 別に上の用途はSkinでなくてもこれまで通りMXMLで対応できる。
 特にコンポーネントとして作る必要がないケースなどは特に悩みますね。

お仕事のご依頼・相談を承ります
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら

Leave a Reply

お仕事のご依頼・相談
この記事に関連するお仕事のご依頼やご相談をお待ちしております。 詳しくは、こちら
ソフトウェア&ライブラリ




ライブラリ
airxmail(en)
AIR版メール送受信ライブラリ
airxzip
AIR版ZIP圧縮・解凍ライブラリ
執筆書籍
本、雑誌等

WEB記事:CodeZine
執筆記事はこちら
カレンダー
2010年9月
« 8月   10月 »
 12345
6789101112
13141516171819
20212223242526
27282930  

カスタム検索
RSS
Add to Google < !–adsense–>
アーカイブ
カテゴリ
にほんブログ村 IT技術ブログへ