SWFLoader コントロール -- Flex 2.01

SWFLoader コントロールを使用すると、ある Flex 2 アプリケーションを別の Flex アプリケーションにロードできます。Loader コントロールには、そのコンテンツを拡大 / 縮小するためのプロパティが実装されています。また、表示するコンテンツに合わせて、Loader コントロールのサイズが自動的に変わるようにすることも可能です。デフォルトでは、SWFLoader コントロールのサイズに合うようにコンテンツが拡大 / 縮小されます。また、プログラムを使用して要求時にコンテンツをロードし、ロード操作の進行状況を監視できます。

SWFLoader コントロールではさらに、GIF、JPEG、PNG、SVG、または SWF ファイルをアプリケーションにロードすることができます。SWF ファイルには Flex 2 アプリケーションは含まれません。

SWFLoader コントロールはフォーカスを取得できません。ただし、SWFLoader コントロール内にロードしたコンテンツ自体は、フォーカスの取得やフォーカス操作が可能です。

SWFLoader コントロールには、次のデフォルトプロパティがあります。

プロパティ	デフォルト値
デフォルトサイズ	ロードしたコンテンツ全体を表示するのに必要な幅と高さです。
最小サイズ	0
最大サイズ	未定義

サブトピック

SWFLoader コントロールの作成

SWFLoader コントロールは、次のように、<mx:SWFLoader> タグを使用して MXML 内で定義します。MXML の他の場所 (別のタグまたは ActionScript ブロック) のコンポーネントを参照する場合は、id 値を指定します。

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderSimple.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:SWFLoader id="loader1" source="FlexApp.swf"/> 
</mx:Application>

Image コントロールと同様に、Embed ステートメントと SWFLoader コントロールを併用しても、次の例に示すように、イメージをアプリケーションに埋め込むことができます。

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderSimpleEmbed.mxml-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:SWFLoader id="loader1" source="@Embed(source='flexapp.swf')"/> 
</mx:Application>

SWFLoader コントロールを SVG ファイルで使用する場合、Embed ステートメントを使用してのみファイルをロードできます。SVG ファイルを実行時にロードすることはできません。埋め込みリソースの詳細については、イメージの読み込みについて、およびアセットの埋め込みの Image コントロールの説明を参照してください。

この手法は、主に、アプリケーションにグラフィックやアニメーションを追加する SWF ファイルを扱うものです。複雑な操作を実装した SWF ファイルには向いていません。複雑な操作を要求する SWF ファイルを読み込む場合は、カスタムコンポーネントを作成することをお勧めします。カスタムコンポーネントの詳細については、Flex 2 コンポーネントの作成と拡張を参照してください。

ロードした Flex 2 アプリケーションの操作

"FlexApp.mxml" ファイルを使用した次の例では、2 つの Label コントロール、1 つの変数、および変数を変更する 1 つのメソッドを定義する単純な Flex アプリケーションを示します。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    height="200" width="200">

    <mx:Script>
        <![CDATA[
            [Bindable]
            public var varOne:String = "This is a public variable";

            public function setVarOne(newText:String):void {
                varOne=newText;
            }
        ]]>
    </mx:Script>

    <mx:Label id="lblOne" text="I am here"/>
    <mx:Label text="{varOne}"/>

    <mx:Button label="Nested Button" click="setVarOne('Nested button pressed.');"/>

</mx:Application>

この例をまず "FlexApp.SWF" ファイルにコンパイルし、次に SWFLoader コントロールを使用して、このファイルを次の例のように別の Flex アプリケーションにロードします。

<?xml version="1.0"?>
<!-- controls\swfloader\SWFLoaderInteract.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[

            import mx.managers.SystemManager;
            import mx.controls.Label;
            
            [Bindable]
            public var loadedSM:SystemManager;

            // Initialize variables with information from
            // the loaded application.
            private function initNestedAppProps():void {
                loadedSM = SystemManager(myLoader.content);
            }

            // Update the Label control in the outer application
            // from the Label control in the loaded application.
            public function updateLabel():void {
                lbl.text=loadedSM.application["lblOne"].text;
            }

            // Write to the Label control in the loaded application.
            public function updateNestedLabels():void {
                loadedSM.application["lblOne"].text = "I was just updated";
                loadedSM.application["varOne"] = "I was just updated";
            }

            // Write to the varOne variable in the loaded application
            // using the setVarOne() method of the loaded application.
            public function updateNestedVarOne():void {
                FlexApp(loadedSM.application).setVarOne("Updated varOne!");
            }
        ]]>
    </mx:Script>

    <mx:Label id="lbl"/>
    <mx:SWFLoader id="myLoader" width="300"
        source="FlexApp.swf"
        creationComplete="initNestedAppProps();"/>
    
    <mx:Button label="Update Label Control in Outer Application" 
        click="updateLabel();"/>
    <mx:Button label="Update Nested Controls" 
        click="updateNestedLabels();"/>    
    <mx:Button label="Update Nexted varOne" 
        click="updateNestedVarOne();"/>
</mx:Application>

このアプリケーションは実行時に SWF ファイルをロードします。SWF ファイルは埋め込まれません。SWFLoader タグを使用して Flex 2 アプリケーションを埋め込む方法については、アセットの埋め込みを参照してください。

上の例では、SWFLoader コントロールの creationComplete イベントを使用して 2 つの変数を初期化します。1 つめの変数にはロードされた Flex アプリケーションの SystemManager オブジェクトへの参照が、2 つめの変数にはロードされたアプリケーションの Label コントロールへの参照が含まれます。

ユーザーが外側のアプリケーションで最初の Button コントロールをクリックすると、ロードされたアプリケーションの Label コントロールから外側のアプリケーションの Label コントロールに、Flex によってテキストがコピーされます。

ユーザーが 2 つめの Button コントロールをクリックすると、ロードされたアプリケーションの Label コントロールと varOne 変数に、Flex によってテキストが書き込まれます。

3 つめの Button コントロールをクリックすると、Flex はロードされたアプリケーションの setVarOne() メソッドを使用して、ロードされたアプリケーションで定義されている varOne 変数にテキストを書き込みます。

SWFLoader コントロールを使用した Flex データサービスアプリケーションのロード

Flex データサービスのユーザーは、SWFLoader コントロールを使用して Flex アプリケーションをロードできます。次のコード例は、"buttonicon.mxml" ファイルをロードしています。"buttonicon.mxml" は、Button コントロールへのアイコンの埋め込みにある例です。

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:SWFLoader source="buttonicon.mxml.swf" scaleContent="false"/> 
</mx:Application>

この例では、source プロパティの値を "buttonicon.mxml.swf" に設定します。Adobe Flex データサービスによって buttonicon.mxml ファイルがコンパイルされ、SWF ファイルがメインアプリケーションに返されます。この値を "buttonicon.swf" に設定すると、Flex データサービスは SWF ファイルが存在すればそれを返しますが、存在しない場合は buttonicon.mxml のコンパイルは行いません。

アプリケーションクラスの外部化

SWFLoader コントロールを使用してロードするアプリケーションのサイズを縮小するには、ロード対象のアプリケーションによって重複して組み込まれるフレームワーククラスを外部化するようにロード済みのアプリケーションに指示します。この結果、ロード済みアプリケーションには必要とするクラスのみ組み込まれるため、ロード済みアプリケーションのサイズは小さくなり、一方でフレームワークコードと他の依存関係はロード対象のアプリケーションに組み込まれます。

フレームワーククラスを外部化するには、mxmlc コマンドで link-report オプションを使用して、ロード対象のアプリケーションからリンカーレポートを生成します。次に、ロード済みアプリケーションをコンパイルするときに、mxmlc コンパイラで load-externs オプションを使用してこのレポートを指定します。

フレームワーククラスを外部化するには、以下を実行します。

詳細については、『Flex 2 アプリケーションの構築および展開ガイド』のFlex コンパイラの使用を参照してください。

SWFLoader コントロールのサイズ設定

SWFLoader コントロールは、scaleContent プロパティを使用してサイズ変更の動作を制御できます。scaleContent プロパティを true に設定した場合、コンテンツがコントロールの境界に合わせて拡大 / 縮小されます。ただし、デフォルトでは、イメージの縦横比が維持されます。

SWFLoader コントロール