StateでincludeInを使っているときは生成タイミングを意識する

Flex4からはStateが簡単に書けるようになったのもあって、よく使っているのではないでしょうか。
で、状態に応じてボタンの表示、非表示を切り替えたりといった事をよくStateで行うのではないかと思います。
この際にincludeInを使う方法と、個別のプロパティにstateを記述する方法がありますが、コンポーネントの生成タイミングが変わったりしますので、注意が必要です。

具体例。
何かデータを新規保存する際は、まだデータがないので、削除ボタンを表示させず、データが既にあり、修正、削除を行える状態時には削除ボタンを表示する、というような場合です。
設定に合わせて、削除ボタンの文字色を変更も親コンポーネントが生成されたタイミングで行います。

includeIn版

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

//省略....................................................................

			protected function component_creationCompleteHandler(event:FlexEvent):void {
				if(doColorSetting=="black"){
					deleteButton.setStyle("color",0x000000);
				}else {
					deleteButton.setStyle("color",0xFFFFFF);
				}
				this.currentState="newSetting";
			}

//省略.....................................................................
		]]>
	</fx:Script>
	<s:states>
		<s:State name="newSetting"/>
		<s:State name="modify"/>
	</s:states>
//省略.....................................................................
	<s:Button id="saveButton"
			  label.newSetting="作成"
			  label.modify="修正"/>
	<s:Button id="deleteButton"
			  includeIn="modify"
			  label="削除"/>
//省略.....................................................................

includeInで制御している場合、親コンポーネントのcreationCompleteの段階では、 stateのmodifyに切り替わっていませんので、 deleteButtonコンポーネントは生成されていません。したがって、setStyleの所で、deleteButtonがnullなのでエラーになります。

プロパティにstateを記述した場合

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;

//省略....................................................................

			protected function component_creationCompleteHandler(event:FlexEvent):void {
				if(doColorSetting=="black"){
					deleteButton.setStyle("color",0x000000);
				}else {
					deleteButton.setStyle("color",0xFFFFFF);
				}
				this.currentState="newSetting";
			}

//省略.....................................................................
		]]>
	</fx:Script>
	<s:states>
		<s:State name="newSetting"/>
		<s:State name="modify"/>
	</s:states>
//省略.....................................................................
	<s:Button id="saveButton"
			  label.newSetting="作成"
			  label.modify="修正"/>
	<s:Button id="deleteButton"
			  visible.newSetting="false"
			  visible.modify="true"
			  label="削除"/>
//省略.....................................................................

この場合はvisibleにstateを記述して制御しています。
deleteButtonは親コンポーネントのcreationCompleteのタイミングでは既に生成されていますのでエラーにはなりません。