Adobe Flex 3 ヘルプ

カスタムコンポーネントの作成

カスタムコンポーネントは、MXML ファイルまたは ActionScript ファイルのいずれかとして作成します。

MXML コンポーネントの作成

Flex は、ユーザーから住所情報を収集するフォームの一部として使用できる ComboBox コントロールを提供しています。フォームに ComboBox コントロールを組み込み、ユーザーが住所の州の部分を米国 50 州のリストから選択できるようにすることができます。アプリケーションに、ユーザーが住所を入力する複数のフォームが含まれる場合、全 50 州に関する同じ情報を持つ複数の ComboBox コントロールを作成して初期化するのは大変なことです。

代わりに、ComboBox コントロールを含む MXML コンポーネントを作成し、その中に全 50 州を定義します。作成後は、アプリケーションに州のセレクタを追加する必要があるたびに、そのカスタム MXML コンポーネントを使用できます。次の例は、カスタム ComboBox コントロールの有効な定義を示しています。

<?xml version="1.0"?>
<!-- intro\StateComboBox.mxml -->

<!-- Specify the root tag and namespace. -->
<mx:ComboBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:dataProvider>   
        <mx:String>AK</mx:String>
        <mx:String>AL</mx:String>
        <!-- Add all other states. -->
    </mx:dataProvider>
</mx:ComboBox>

この例は、次のことを示しています。

  1. カスタム MXML コンポーネント定義の 1 行目では、XML バージョンの宣言を指定します。
  2. ルートタグと呼ばれるコンポーネントの最初の MXML タグは、Flex コンポーネントまたはカスタムコンポーネントを指定します。MXML コンポーネントは ActionScript クラスに対応しているため、ルートタグは MXML コンポーネントのスーパークラスを指定します。この例では、MXML コンポーネントはスーパークラスとして Flex ComboBox コントロールを指定します。
  3. ルートタグ内の xmlns プロパティは、Flex XML 名前空間を指定します。この例では、xmlns プロパティは、MXML 名前空間内のタグが接頭辞 mx: を使用することを示しています。
  4. コンポーネントの残りの行は、その定義を指定します。

次の例に示すように、メインアプリケーションまたはその他の MXML コンポーネントファイルは StateComboBox コンポーネントを参照します。

<?xml version="1.0"?>
<!-- intro/IntroMyApplication.mxml -->

<!-- Include the namespace definition for your custom components. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:MyComp="*">

    <!-- Use the filename as the MXML tag name. -->
    <MyComp:StateComboBox/>

</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

カスタムコンポーネントの MXML タグ名は、名前空間の接頭辞（この場合はMyComp ）とタグ名の 2 つの部分で構成されます。名前空間の接頭辞は、カスタムコンポーネントを実装するファイルの検索先を Flex に指示します。タグ名はコンポーネントのファイル名（この場合は、StateComboBox.mxml）に対応しています。そのため、StateComboBox.mxml ファイルは、タグ名 <namespace:StateComboBox> を持つコンポーネントを定義します。

<mx:Application> タグの一部として、メインアプリケーションファイルには、名前空間定義、xmlns:MyComp="*" が含まれます。この定義は、コンポーネントがメインアプリケーションファイルと同じディレクトリ、または ActionScript ソースパスがあるディレクトリにあることを指定します。MXML コンポーネントの展開方法について詳しくは、シンプルな XML コンポーネントを参照してください。

ベストプラクティスとして、カスタムコンポーネントをアプリケーションのサブディレクトリに配置することをお勧めします。これにより、異なる名前空間を持つことになり、コンポーネント名の重複を避けることができます。コンポーネントをアプリケーションの myComponents サブディレクトリに格納した場合は、名前空間定義を xmlns:MyComp="myComponents.*" として指定します。

StateComboBox.mxml ファイルは、ルートタグとして ComboBox コントロールを指定します。そのため、カスタムコンポーネントの MXML タグ内、または <mx:Script> タグ内に指定された ActionScript 内の ComboBox コントロールのすべてのプロパティを参照できます。例えば、次の例では、ComboBox.rowCount プロパティとカスタムコントロールの ComboBox.close イベントのリスナーを指定します。

<?xml version="1.0"?>
<!-- intro/MyApplicationProperties.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:MyComp="myComponents.*">

    <mx:Script>
        <![CDATA[
            import flash.events.Event;

            private function handleCloseEvent(eventObj:Event):void {
                // ...
            }
        ]]>
    </mx:Script>

    <MyComp:StateComboBox rowCount="5" close="handleCloseEvent(event);"/>

</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

MXML コンポーネントについて詳しくは、シンプルな XML コンポーネントを参照してください。

ActionScript コンポーネントの作成

ActionScript クラスを定義することで、ActionScript コンポーネントを作成します。ActionScript では、次のタイプのコンポーネントを作成できます。

ユーザーインターフェイス（ビジュアル）コンポーネント 

ユーザーインターフェイスコンポーネントには、処理ロジックとビジュアルエレメントの両方が格納されます。カスタムユーザーインターフェイスコンポーネントを作成して、既存のビヘイビアを変更するか、新しい機能をコンポーネントに追加します。通常、これらのコンポーネントは、Flex コンポーネント階層を拡張します。UIComponent クラスや、Button、ComboBox、DataGrid などの任意の Flex コンポーネントを拡張できます。ActionScript のカスタムコンポーネントは、スーパークラスのメソッド、プロパティ、イベント、スタイルおよびエフェクトをすべて継承します。



非ビジュアルコンポーネント 

非ビジュアルコンポーネントはビジュアルエレメントを定義しません。Flex には、フォーマッタ、バリデータ、エフェクトなど、ユーザーが作成可能ないくつかのタイプの非ビジュアルコンポーネントがあります。非ビジュアルコンポーネントを作成するには、Flex コンポーネント階層からサブクラスを作成します。バリデータの場合は Validator クラスのサブクラス、フォーマッタの場合は Formatter クラスのサブクラス、エフェクトの場合は Effect クラスのサブクラスを作成します。



例えば、次の例に示すように、Flex Button クラスに基づいてカスタムボタンコンポーネントを定義できます。 

package myComponents
{
    // intro/myComponents/MyButton.as
    import mx.controls.Button;

    public class MyButton extends Button {
    
        // Define the constructor. 
        public function MyButton() {
            // Call the constructor in the superclass. 
            super();
            // Set the label property to "Submit".
            label="Submit";
        }
    }
}

この例では、MyButton クラスを MyButton.as ファイルに記述します。

ActionScript パッケージ内でカスタムコンポーネントを定義する必要があります。このパッケージには、アプリケーションのディレクトリ構造における、コンポーネントのディレクトリの場所が示されます。通常、カスタム ActionScript コンポーネントの配置先は、ActionScript ソースパスに含まれているディレクトリ内、アプリケーションのサブディレクトリ内、または Adobe® LiveCycle™ Data Services ES の場合は WEB-INF/flex/user_classes ディレクトリ内になります。この例では、package ステートメントは、MyButton.as ファイルの配置先として、Flex アプリケーションの myComponents サブディレクトリ内を指定します。

次の例に示すように、カスタムコンポーネントを参照する MXML ファイルでは、MXML ファイル内で名前空間を定義して参照します。

<?xml version="1.0"?>
<!-- MyApplicationASComponent.mxml -->

<!-- Include the namespace definition for your custom components. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:MyComp="myComponents.*">

    <!-- Use the filename as the MXML tag name. -->
    <MyComp:MyButton/>

</mx:Application>

前の例で実行する SWF ファイルは以下のとおりです。

この例では、アプリケーションのディレクトリ構造内のカスタムコンポーネントの位置を指定する MyComp 名前空間を最初に定義します。次に、名前空間の接頭辞を使用して、コンポーネントを MXML タグとして参照します。

詳しくは、ActionScript のシンプルなビジュアルコンポーネントを参照してください。

コンポーネントの展開

カスタムコンポーネントを MXML ファイルまたは ActionScript ファイルとして展開する場合は、通常、それらをアプリケーションファイルと同じディレクトリ構造内、ActionScript ソースパスに指定されたディレクトリ内、または LiveCycle Data Services ES の場合は WEB-INF/flex/user_classes ディレクトリ内に展開します。

セキュリティ上の理由から、カスタムコンポーネントをソースコードファイルとして展開しないようにしても差し支えありません。また、コンポーネントを SWC ファイルとして展開することも、ラインタイム共有ライブラリ（RSL）の一部として展開することもできます。

SWC ファイルは、Flex コンポーネントのアーカイブファイルです。SWC ファイルを使用することで、Flex 開発者は互いに効率よくコンポーネントをやり取りできます。1 つのファイルを交換するだけで済み、MXML ファイルや ActionScript ファイル、イメージなどのリソースファイルを送信する必要はありません。また、SWF ファイルは SWC ファイル内にコンパイルされているため、コードを不用意に見られることはありません。

SWC ファイルには少なくとも 1 つのコンポーネントが格納され、PKZip アーカイブ形式でパッケージ化および展開されます。SWC ファイルは、WinZip や JAR などのアーカイブツールで開くことができます。ただし、SWC ファイルの内容を直接変更したり、SWC ファイルに格納された SWF ファイルを SWC ファイルの外部で実行することはできません。

SWC ファイルを作成するには、flex_install_dir\bin ディレクトリにある compc ユーティリティを使用します。compc は、MXML コンポーネントや ActionScript コンポーネントのソースファイルから SWC ファイルを生成するユーティリティです。compc について詳しくは、Flex コンパイラの使用を参照してください。

アプリケーションの SWF ファイルのサイズを抑える 1 つの方法として、共有アセットを外部化し、個別にダウンロードしてクライアントにキャッシュできるスタンドアローンのファイルにすることができます。共有アセットは、任意の数のアプリケーションから実行時にロードされますが、クライアントには一度しか送信する必要がありません。これらの共有ファイルをランタイム共有ライブラリまたは RSL と呼びます。

RSL ファイルの作成方法などについて詳しくは、ランタイム共有ライブラリの使用を参照してください。

様々なタイプのコンポーネントを作成する方法の詳細については、次のトピックを参照してください。

 

このページに新しいコメントが追加された場合に、電子メールでの通知を希望する。 | コメントレポート