Flex/カスタムコンポーネント

Flexは、ボタンとかいろいろなコンポーネントをのせたMXMLファイルを作成しておいて、他のファイルからタグライブラリ形式で呼び出すことができます。ようするにペタペタコンポーネントを貼り付けておいてそれをMyComponent?.mxmlと保存しておくと、他のMXMLファイルから、

<local:MyComponent xmlns:local="*" id="hoge" />

と呼び出すことができます。この機能をカスタムコンポーネントと呼んでいます。

カスタムコンポーネントを作成するためのルールとしては

• タグをコンテナ(VBoxとか)で始める*1。

くらいですね。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>

こうすると、

• カスタムコンポーネント側でボタンがクリックされる
• ボタンタグのclickイベントが発生し dispatchEvent({type:'buttonClicked'}) が呼ばれる
• このタグのbuttonClickedに書いてある処理が呼ばれる

となります。

この記事は

• コンポーネントは必ずしもコンテナである必要はありませんよ。ここの第３段落目あたりとか参考→ http://livedocs.adobe.com/flex/201_jp/html/wwhelp/wwhimpl/js/html/wwhelp.htm?href=Part7_Build_Deploy_112_1.html -- 2007-11-06 (火) 17:27:36

現在のアクセス:25128