カスタムコンポーネント

mxml はクラスになります

実行ページ

以下の例ではコンテナを使っていますが、コントロールでもかまいません。

ダウンロード

ct_password.mxml

<mx:HBox
	xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[

	public var passText:String;

]]>
</mx:Script>

	<mx:TextInput
		id="pass"
		displayAsPassword="true"
	/>
	<mx:Button
		label="送信"
		click="passText = pass.text"
	/>

</mx:HBox>

これで、ct_password というクラスが出来上がるので、Main.mxml と同じディレクトリに置けば、
ただ書くだけで、いっしょにビルドしてくれますので、何も気にせず使えます。

タグでそのコンテナを記述したい場合は、mx:Application に、 xmlns="*"　を記述しておけば、
クラス名をタグとして利用できます

以下の例では、タグで書いたコンテナが先に(はじめから)作成されて、new したクラスが後から追加されています

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="*"
>

<mx:Script>
<![CDATA[

	import lightbox.*;

	// クラスを使用するだけで良い
	private var pass_02:ct_password = new ct_password();

	// *********************************************************
	// アプリケーションの初期化
	// *********************************************************
	public function initData():void {

		// カスタムコンポーネント内のコントロールに id でアクセスしています
		// スタイルに対するアクセスは、setStyle・getStyle です
		pass_01.pass.setStyle("backgroundColor", 0xD0D0D0 );

		// このアプリケーションコンテナに、
		// カスタムコンポーネントを追加しています
		this.addChild( pass_02 );

		// メッセージ
		debug.firebug("initData() が実行されました" );
		debug.open();

	}

]]>
</mx:Script>

<!-- タグとしてクラスを使用 -->
<ct_password id="pass_01" 
	click="debug.firebug(pass_01.passText);"
/>

</mx:Application>

カスタムコンポーネント内へのアクセスは、それぞれインスタンス(pass_02)かまたは id(pass_01) で行います

1) public 変数( passText )は、プロパティ扱い
2) カスタムコンポーネント内の id( pass ) も、プロパティ扱い
3) スタイルには、setStyle・getStyle で( カスタムコンポーネントに限らない、一般的な仕様 )

タグ記述のほうに名前空間を付加したい場合は、以下のようにします