Flexは、ボタンとかいろいろなコンポーネントをのせたMXMLファイルを作成しておいて、他のファイルからタグライブラリ形式で呼び出すことができます。ようするにペタペタコンポーネントを貼り付けておいてそれをMyComponent?.mxmlと保存しておくと、他のMXMLファイルから、
<local:MyComponent xmlns:local="*" id="hoge" />
と呼び出すことができます。この機能をカスタムコンポーネントと呼んでいます。
カスタムコンポーネントを作成するためのルールとしては
くらいですね。SWTで言うところの、Compositeをextendsしてカスタムコンポーネントをつくるイメージです。
属性の定義は、カスタムコンポーネントのMXMLファイル側で、変数を定義すれば良いみたいです。たとえば
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%" verticalGap="0"> <!-- 属性の定義--> <mx:Script> <![CDATA[ var dataObject; ]]> </mx:Script> <mx:DataGrid id="list" width="100%" height="100%" dataProvider="{dataObject}"> <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Name" columnName="name" width="300"/> <mx:DataGridColumn headerText="Price" columnName="price" textAlign="right" marginRight="4"/> </mx:Array> </mx:columns> </mx:DataGrid> </mx:VBox>
とすることで、呼び出し元は
<local:MyComponent xmlns:local="*" id="gridView" dataObject="{catalog}" />
などとして、変数を属性として使用することができます。これで属性を経由して外から任意のオブジェクトを渡すことができるようになります。
逆に、
gridView.dataObject
などプロパティ経由で、内部のデータにアクセスすることができますね。
通常の属性はカスタムコンポーネント側に変数を用意しました。イベントになる属性は
<mx:Metadata> [Event("changed")] </mx:Metadata>
とMetadataタグを使用します。で、イベントを発生させたいタイミングで、
dispatchEvent({type:'changed'})
とイベントをディスパッチします。
たとえば、ボタン付のカスタムコンポーネントがあり、そのボタンをクリックしたときのイベントを取得したい場合はこうします。
<local:GridView xmlns:local="*" id="gridView" dataObject="{catalog}" buttonClicked="mx.controls.Alert.show('message', 'Message');" /> ↑ buttonClickedはボタンをクリックしたときに発生するイベント。
<?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.macromedia.com/2003/mxml" width="100%" height="100%" verticalGap="0"> <mx:Metadata> [Event("buttonClicked")] </mx:Metadata> <!-- 属性の定義--> <mx:Script> <![CDATA[ var dataObject; ]]> </mx:Script> <mx:DataGrid id="list" width="100%" height="100%" dataProvider="{dataObject}" > <mx:columns> <mx:Array> <mx:DataGridColumn headerText="Name" columnName="name" width="300"/> <mx:DataGridColumn headerText="Price" columnName="price" textAlign="right" marginRight="4"/> </mx:Array> </mx:columns> </mx:DataGrid> <mx:Button label="Button" click="dispatchEvent({type:'buttonClicked'})" /> </mx:VBox>
こうすると、
となります。
この記事は
現在のアクセス:24784