アシアルの中の人が技術と思いのたけをつづるブログ

【Flex】FlexからJavascriptを実行してみる

タグ [　 Flex　 Flash　 JavaScript　 Tech　 ActionScript　 ]
こんにちは、橋本です。

今日は、FlexからJavascript関数へアクセスする方法についてお話したいと思います。

FlexからJavascriptへアクセスするためには、ExternalInterface APIを使います。

使い方は非常に簡単です。call()メソッドを使ってラッパーのJavascriptを呼び出すだけです。
Javascriptの関数に引数を渡したり、Javascript側から戻り値を受け取ることも可能です。

簡単なコードを書いて、実際に使ってみましょう。

Flexコード
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       import flash.external.*;
  6.       
  7.       import mx.controls.Alert;
  8.       
  9.       public function setWrapperTitle(title:String):void
  10.       {
  11.         var ret:String;
  12.         
  13.         if (ExternalInterface.available)
  14.         {
  15.           ret = ExternalInterface.call("setTitle",title);
  16.         }
  17.         else
  18.         {
  19.           ret = "Fault";
  20.         }
  21.         
  22.         Alert.show(ret);
  23.       }
  24.   
  25.       protected function execBtn_clickHandler(event:MouseEvent):void
  26.       {
  27.         this.setWrapperTitle(this.titleInput.text);
  28.       }
  29.     ]]>
  30.   </mx:Script>
  31.   <mx:Panel id="hoge"
  32.         width="280"
  33.         height="150"
  34.         x="{this.width / 2 - hoge.width / 2}"
  35.         y="{this.height / 2 - hoge.height / 2}"
  36.         title="タイトル変更"
  37.         >
  38.     <mx:Form>
  39.       <mx:FormItem label="タイトル:">
  40.         <mx:TextInput id="titleInput"/>
  41.       </mx:FormItem>
  42.     </mx:Form>
  43.     <mx:ControlBar width="100">
  44.       <mx:Spacer width="100%"/>
  45.       <mx:Button id="execBtn"
  46.              label="変更"
  47.              click="execBtn_clickHandler(event)"
  48.              />
  49.     </mx:ControlBar>
  50.   </mx:Panel>
  51.   
  52. </mx:Application>

ラッパーにScriptタグを追加して、Flexで呼び出す関数を設定します。

  1. <script language="JavaScript" type="text/javascript">
  2.   function setTitle(title)
  3.   {
  4.     window.document.title = title;
  5.     
  6.     return "success";
  7.   }
  8. </script>

実行結果がこちらです。







また、オブジェクトや配列をそのまま渡すことも可能です。
先程のソースを少し修正します。

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600">
  3.   <mx:Script>
  4.     <![CDATA[
  5.       import flash.external.*;
  6.       
  7.       import mx.controls.Alert;
  8.       
  9.       public function setWrapperTitle(obj:Object):void
  10.       {
  11.         var ret:String;
  12.         
  13.         if (ExternalInterface.available)
  14.         {
  15.           ret = ExternalInterface.call("setTitle",obj);
  16.         }
  17.         else
  18.         {
  19.           ret = "Fault";
  20.         }
  21.         
  22.         Alert.show(ret);
  23.       }
  24.   
  25.       protected function execBtn_clickHandler(event:MouseEvent):void
  26.       {
  27.         var obj:Object = 
  28.         {
  29.           title1: this.titleInput1.text,
  30.           title2: this.titleInput2.text
  31.         };
  32.         
  33.         this.setWrapperTitle(obj);
  34.       }
  35.     ]]>
  36.   </mx:Script>
  37.   <mx:Panel id="hoge"
  38.         width="300"
  39.         height="180"
  40.         x="{this.width / 2 - hoge.width / 2}"
  41.         y="{this.height / 2 - hoge.height / 2}"
  42.         title="タイトル変更"
  43.         >
  44.     <mx:Form>
  45.       <mx:FormItem label="タイトル1:">
  46.         <mx:TextInput id="titleInput1"/>
  47.       </mx:FormItem>
  48.       <mx:FormItem label="タイトル2:">
  49.         <mx:TextInput id="titleInput2"/>
  50.       </mx:FormItem>
  51.     </mx:Form>
  52.     <mx:ControlBar width="100">
  53.       <mx:Spacer width="100%"/>
  54.       <mx:Button id="execBtn"
  55.              label="変更"
  56.              click="execBtn_clickHandler(event)"
  57.              />
  58.     </mx:ControlBar>
  59.   </mx:Panel>
  60.   
  61. </mx:Application>

javascriptの方も、オブジェクトを受け取るように変更
  1. <script language="JavaScript" type="text/javascript">
  2.   function setTitle(obj)
  3.   {
  4.     window.document.title = obj.title1 + obj.title2;
  5.     
  6.     return "success";
  7.   }
  8. </script>

実行結果







また、無名関数をFlex内で直接記述して実行することも可能です。

さきほどのコードを、無名関数を使うように変更します。
  1. public function setWrapperTitle(obj:Object):void
  2.   {
  3.     var ret:String;
  4.         
  5.     if (ExternalInterface.available)
  6.     {
  7.       ret = ExternalInterface.call(
  8.         "function(obj)" +
  9.         "{" +
  10.           "window.document.title = obj.title1 + obj.title2;" +
  11.           "return 'success';" +
  12.         "}"
  13.       , obj);
  14.     }
  15.     else
  16.     {
  17.       ret = "Fault";
  18.     }
  19.     
  20.     Alert.show(ret);
  21.   }

実行結果は先程の例と同様になります。

無名関数を使うことで、適用の幅が広がると思います。
非常に簡単ですので、試してみてください。

コメント

    • 読ませていただきました。
      大変参考になりました。
      これからも、良い情報の発信をしていだければと思います。
      ありがとうございました。

      仕様書作成係
      http://www.hotdocument.net/
    • by 仕様書作成係 | 2010年07月09日 13:43

コメントフォーム

認証
captcha_key
 

トラックバック

トラックバックURI :

最近の記事