掲示板をつくってみる３(カスタムコンポーネントの作り方)

Flex



今回は管理者ログインフォームを作りました。


こんな感じ


そのフォームをカスタムコンポーネントとして作ったのでその作り方を紹介します。


まずFlexBuilderのファイル→新規→MXMLコンポーネント


フォルダを選択し、ファイル名を入力して終了


ここからはコーディング
とりあえずログインフォームを作るためにこんな感じに書きました。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="324" height="198">
	<mx:Panel width="324" height="198" layout="absolute">
		<mx:Form x="0" y="10" width="304" height="116">
			<mx:FormHeading width="243" textAlign="left" label="ログイン認証"/>
			<mx:FormItem label="管理者名" required="true">
				<mx:TextInput id="name_input"/>
			</mx:FormItem>
			<mx:FormItem label="パスワード" required="true">
				<mx:TextInput id="pass_input" displayAsPassword="true"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Button x="237" y="134" label="送信"/>
		<mx:Button x="173" y="134" label="閉じる"/>
	</mx:Panel>
</mx:Canvas>


そしてメインのMXMLファイルでこのコンポーネントを設置。



この一行を書き加えれば設置は完了。


でも、これだけではフォームに入力された管理者名やパスワードをとってくるためには


login_form.name_input.text
login_form.pass_input.text


と書かないといけません。なんとなくいやだったので


login_form.admin_name
login_form.password


で参照できるようにしたいと思います。


さらに、このままではフォーム内の送信ボタンと閉じるボタンのクリックイベントがメインMXMLファイル内で定義できません。


これらを出来るようにしたのが下のコード

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="324" height="198">
	<mx:Metadata>
  		[Event(name="form_button_clicked", type="flash.events.Event")]
  		[Event(name="close_button_clicked", type="flash.events.Event")]
	</mx:Metadata>
	<mx:Panel width="324" height="198" layout="absolute">
		<mx:Form x="0" y="10" width="304" height="116">
			<mx:FormHeading width="243" textAlign="left" label="ログイン認証"/>
			<mx:FormItem label="管理者名" required="true">
				<mx:TextInput id="name_input" text="{admin_name}"/>
			</mx:FormItem>
			<mx:FormItem label="パスワード" required="true">
				<mx:TextInput id="pass_input" displayAsPassword="true" text="{password}"/>
			</mx:FormItem>
		</mx:Form>
		<mx:Button x="237" y="134" label="送信" click="dispatchEvent(new Event('form_button_clicked'))"/>
		<mx:Button x="173" y="134" label="閉じる" click="dispatchEvent(new Event('close_button_clicked'))"/>
	</mx:Panel>
	<mx:Binding destination="admin_name" source="name_input.text"/>
	<mx:Binding destination="password" source="pass_input.text"/>
	<mx:String id="admin_name"/>
	<mx:String id="password"/>
</mx:Canvas>


まず、




この２行を書きます。mxタグで書いたものはpublicなのでメインMXMLファイルからもアクセスできるようになります。

例えば
login_form.admin_name


さらに



でname_input.text、pass_input.textの値が
admin_nameとpasswordそれぞれに対応するようになります。


ただこれだけだと

name_input.text →　admin_name
pass_input.text →　password

の一方向の対応。例えば、name_input.textを書き変えたらadmin_nameも対応して書き換わるけど。admin_nameの方を書き換えた場合name_input.textは書き換わりません。


それで両方向の対応にするためにTextInputに少し書き加えます。





次にメインMXML内で閉じるボタンと送信ボタンのクリックイベントを定義するためには


↓の追加



[Event(name="form_button_clicked", type="flash.events.Event")]
[Event(name="close_button_clicked", type="flash.events.Event")]


さらにButtonタグ内に少し書き加える。





これで、メインMXML内で

<local:Manager_login_form id="login_form" close_button_clicked="close()"/>
<mx:Script>
        <![CDATA[
              private function close():void{
              }
        ]]>
</mx:Script>

みたいな感じで書けます。


ソース
メイン
フォーム