［Flex裏技集］クッキー保存、SWF通信、JavaScript連携：現場で使えるFlex実践テクニック（6）（2/2 ページ）

» 2007年12月14日 00時00分公開

[成瀬勉，クラスメソッド株式会社]

前のページへ 1|2 　　　　　　

JavaScriptとの連携を行うExtarnalInterFace

　ExternalInterFaceを用いると、FlexをラップしているHTMLに記述したJavaScriptとの相互の呼び出しが可能になります。

■ FlexからJavaScriptを呼び出す

　以下は、FlexからJavaScriptを呼び出すサンプルです。テキストボックスに何か入力し、ボタンを押してください（注意：JavaScriptを使用しているため、Webブラウザによってはうまく動作しない場合があります）。

サンプル4　

Flex2JSSample.mxml

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

          layout="vertical">

            <mx:Script>

              <![CDATA[

            

                private function callJS():void{

                      returnText.text = ExternalInterface.call("sampleFunction",

                            [textInput.text]);

                      }

                    

                        ]]>

                          </mx:Script>

                        

                            <mx:TextInput id="textInput" />

                              <mx:Button click="callJS()" />

                                <mx:Label id="returnText" />

                              </mx:Application>

　ExternalInterfaceの静的メソッドのcall()の、第1引数に実行したいJavaScript上で定義した関数名を、第2引数にJavaScriptに渡す引数を配列で指定します。

　ラップするHTMLに以下のコードを記述します。関数内でreturnを使えば、さらにFlexに値を返すこともできます。

Flex2JSSample.html

…（略）…

      

      <script language="JavaScript" type="text/javascript">

          function sampleFunction(prop){

                alert(prop);

                  return "From JavaScript!";

                }

              </script>

              

              …（略）…

■ JavaScriptからFlexの関数を実行

　次に、JavaScriptからFlexの関数を実行するサンプルです。テキストボックスに何か入力し、ボタンを押してください（注意：JavaScriptを使用しているため、Webブラウザによってはうまく動作しない場合があります）。

サンプル5

JS2FlexSample.mxml

<?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 

          layout="vertical">

        

            <mx:Script>

              <![CDATA[

                import mx.controls.Alert;

              

                  private function initApp():void{

                        ExternalInterface.addCallback("fromJSSampleFunction", 

                              sampleFunction);

                        }

                      

                          public function sampleFunction(s:String):void{

                                Alert.show(s);

                              }

                            

                                ]]>

                                  </mx:Script>

                                </mx:Application>

　ExternalInterfaceのaddCallback()というメソッドを呼びます。第1引数には、JavaScript側から呼び出すための関数名、第2引数には実際に実行される関数を指定します。

　ラップするHTML側に以下のようなコードを挿入します。HTML上に埋め込まれるSWFのIDに対して、Flex側で定義した関数名を関数として呼び出します。引数を渡すこともできます。

JS2FlexSample.html

<form name="form">

          <input id="textInput" type="text" />

            <input type="button" onclick="JS2FlexSample.fromJSSampleFunction(do

        cument.form.textInput.value)" />

            </form>

「Flexでこんなこともできるんだ！」

　全6回にわたってFlexの特徴的な機能について解説を行ってきましたが、いかがだったでしょうか？

　サンプルは比較的シンプルなものしか紹介できませんでしたが、どの内容もFlexアプリケーションの実開発で必ず必要になるはずです。「Flexでこんなこともできるんだ！」「Flexを使えばこんなことが可能かもしれない……！」といった驚きやひらめきを得るための助けになれば幸いです。

プロフィール

成瀬　勉（なるせつとむ）
クラスメソッド株式会社　エンタープライズサービス部門アーキテクト

Macromedia FLASH MX 2004 Developer認定技術者
FlashエンジニアとしてWeb製作を経たのちWebアプリケーション開発に携わる。FlexやWPFなどのRIA開発および技術調査を日々行っている。クラスメソッド株式会社での主な開発実績は、旭化成の電子ファイリングシステム、ひまわり証券のオンライントレードシステム、ベルシステム24の営業支援システムなど。
ブログ（C:\narun）も更新中。
FlexやAIRの開発依頼や転職希望の方はコチラ。最近は会社説明会やセミナーもやっています。

「現場で使えるFlex実践テクニック」バックナンバー