Top / 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

などプロパティ経由で、内部のデータにアクセスすることができますね。

myComp.png

イベントを定義する。

通常の属性はカスタムコンポーネント側に変数を用意しました。イベントになる属性は

<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に書いてある処理が呼ばれる

となります。


この記事は

選択肢 投票
おもしろかった 57  
そうでもない 48  

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

現在のアクセス:23391


*1 通常はApplicationで始めていた

添付ファイル: filemyComp.png 1153件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2015-01-28 (水) 23:27:36 (1669d)