FlexとJavaScriptの相互通信(真情貢献)

24016 ワード

JavaScript Flex 手紙を交わす

最近Flexに関するプロジェクトをしていますが、FlexのアプリケーションをHTMLに組み込む必要があるので、FlexとJavaScriptの相互通信を実現します.私はこの仕事をしている時にも、いくつかの掲示板を見ましたが、中国人の書き込みは簡単すぎて、引き継いだばかりの人はいつも頭がよく分かりません.多くのウェブサイトと招待状の中にFlexとJavascriptの間の相互通信の問題について英語のウェブサイトが詳しく紹介しています.名前はSwitch On the Codeです.書いたのは確かです.彼の例を借りてこの問題を解決します.
本題に入る.
FlexとJavaScriptが通信する過程で、非常に重要なクラスであるExternal Interfaceを使用しました. .External Interfaceクラスを通じて、Flash実行時にHTMLページのJavaScriptを使ってアクションScript関数を呼び出すことができます.アクションScript関数は値を返してもいいし、JavaScriptはすぐに呼び出しの戻り値として受け取られます.非常に重要でよく使われる二つの方法があります.

External Interface.call (functionName:String,…parameters):

External Interface.addCallback (functionName:String、closure:Function)

第一の方法はFlexのJS呼び出しの準備であり、第二の方法はJSのFlexメソッド呼び出しのために準備された彼らの具体的な使い方は以下のような小さな例で表される.
この小例で実現するのは、Flexにおける関係者の情報:名前、年齢、性別をHTMLページに伝えることである.2,新たに一人を作成し、その情報をFlexに伝えて表示します.
もしあなたがFLEX Buiderを使っているなら、まずflash Builler 4を作成してください.私はそれのために名前を付けました.「FlexAndJavascript」といいます.次の一番簡単なアプリケーションをご覧ください.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="462" height="328">
	<fx:Declarations>
		<!--       （    、   ）     -->
	</fx:Declarations>
</s:Application>

次に、DataGridに参加して、人の情報を表示する必要があります.名前、年齢、性別を含めて、次のようなレイアウトです.

<fx:Script>
		<![CDATA[
			import flash.external.*;
			
			import mx.collections.ArrayCollection;
			
			public function initDG():void
			{
				var people:Array = new Array();
				people.push({Name: "Charlie", Age: "23", Sex: "Male"});
				people.push({Name: "Brandon", Age: "23", Sex: "Male"});
				people.push({Name: "Mike", Age: "23", Sex: "Male"});
				people.push({Name: "Caroline", Age: "23", Sex: "Female"});
				var peopleCollection:ArrayCollection = new ArrayCollection(people);
				dgPeople.dataProvider = peopleCollection;
				dgPeople.selectedIndex = 0;
			}
			
		]]>
	</fx:Script>
<s:Panel id="pnlMain" x="0" y="0" width="462" height="328"
			 title="Simple Javascript Interaction">
		<s:DataGrid id="dgPeople" x="10" y="10" width="422" height="229" initialize="initDG()">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="Name" headerText="Name"></s:GridColumn>
					<s:GridColumn dataField="Age" headerText="Age"></s:GridColumn>
					<s:GridColumn dataField="Sex" headerText="Sex"></s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
		<s:Button id="butJSDisplay" x="10" y="256" label="JavaScript Display"
				  click="jsDisplayPerson()"/>
		<s:Label id="lblMessage" x="149" y="260"/>
	</s:Panel>

initialize=「initDG()」はDataGridデータを初期化するための方法です.DataGridにアラーCollectionのデータが表示されます.以下でお願いします.
実現したのは、ボタンを押すと、現在の行のデータをHTMLにアップロードします.美しいコード:

public function jsDisplayPerson():void
			{
				if (ExternalInterface.available) {
					ExternalInterface.call("displayPerson", dgPeople.selectedItem); 
					lblMessage.text = "Data Sent!";
				} else
					lblMessage.text = "Error sending data!";
			}

ここでは太字表示の方法を使いました.この方法はJSのメソッドdisplayPersonを呼び出すことによってFlexのデータをHTMLに伝えます.以下はJSのdisplayPersonを見ます.

function displayPerson(person){
		if(person == null){ 
			alert("Please select a person, or maybe I screwed up.");
		}
		else{
			document.getElementById('nameDisplay').innerHTML = person.Name;
			document.getElementById('ageDisplay').innerHTML = person.Age;
			document.getElementById('sexDisplay').innerHTML = person.Sex;
		}
	}

困惑しているname Displayのようなものを貼ったらわかるかもしれません.ここはpersonのName、AgeとSexをtextに伝えて表示させます.コードを貼ります.

<table width="100%" style="border-spacing:5px;">
	          <tr>
	            <td>Name:</td>
	            <td id="nameDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	          <tr>
	            <td>Age:</td>
	            <td id="ageDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	          <tr>
	            <td>Sex:</td>
	            <td id="sexDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	        </table>

分かりましたか?はい、次はswfファイルをHTMLに埋め込んで私達の実験環境にします.どうやって効果的に埋め込むかは大きな問題です.問題解決の鍵です.コードを先に見ます.

<div>	
		<object 
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
            id="newSWF"  
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">  
            <param name="movie" value="FlexAndJavaScript.swf" />  
            <param name="wmode" value="transparent">  
            <param name="quality" value="high" />  
            <param name="bgcolor" value="ffffff" />  
            <param name="allowScriptAccess" value="always" /> 
            <embed src="FlexAndJavaScript.swf" quality="high" bgcolor="ffffff"
                width="500"
                height="350"
                align="middle"
				name="newSWF"
                play="true"  
                wmode="transparent"  
                loop="false"  
                quality="high"  
                allowScriptAccess="sameDomain"  
                type="application/x-shockwave-flash"  
                pluginspage="http://www.adobe.com/go/getflashplayer">  
            </embed>  
        </object>
	   </div>

これは埋め込み方式です.太字表示は基本的に必要です.そして、属性値という名前を付けなければならないことが分かります.「object」にはidがあります.「embed」のnameに合うべきです.allowScript Access=「sameDomain」は異なる領域を処理するためのものです.注意したいのはSWFの経路が分かります.
以下にswfファイルの問題を説明します.flexプロジェクトを設立しましたので、bin-debugで生成されたFlexAndJavaScript.swfは直接できません.
持ってきて使って、先に発行版を導出してから持ってきてください.プロジェクト-発行版-生成bin-release、OKです.
上で述べたのはFLEXがJSを呼び出す方法で、後で言いたい時にJSがFLEXメソッドを呼び出す場合、HTMLで提供したパラメータ値をFLEXのDataGridに伝えることを実現します.多くは言いません.コードを見ます.

			public function addPerson(name:String, age:String,
									  sex:String):void
			{
				(dgPeople.dataProvider as ArrayCollection).addItem(
					{Name: name, Age: age, Sex: sex});
			}
			
			public function initApp():void
			{
				if (ExternalInterface.available)
					ExternalInterface.addCallback("addPerson", addPerson);  
			}

addPersonはJSに呼び出されるのを待っています.JSで呼び出した後、着信パラメータをDataGridに追加することができます.External Interface.addCallback(「addPerson」、addPerson).非常に重要な関数です.彼は比較的に困難なものを完成しました.
ジョブ:登録機能を完了して、登録してからやっとスムーズにFlexの関数を呼び出すことができます.だから、このような重要な方法は今Flexアプリケーションが最初に完成したら、すぐに彼を呼び出してください.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="462" height="328" creationComplete="initApp();">

flexの端はすでに完成しました.HTMLの端を見ているのはどうですか?

function getSWF(movieName){
		if (navigator.appName.indexOf("Microsoft") != -1){
		   return window[movieName]
	   }
	   else {
		   return document[movieName]
	   }
	}
	
	function addPerson()
	{
		var name = document.getElementById('txtName').value;
		var age = document.getElementById('txtAge').value;
		var sex = document.getElementById('selSex').value;
		getSWF('newSWF').addPerson(name, age, sex);
	}

getSWF()方法の主な機能は、異なるブラウザに対するサポートであり、これは、addPerson()方法でFlexメソッドに対する呼び出しが完了しました.getSWF('newSWF').addPerson(name,age,sex)、パラメータnewSWFとは、flashを埋め込むときに定義されたものです.ここで使うものです.

 <table style="border-spacing:5px;" width="100%">
	          <tr>
	            <td style="border-style:none;padding:0px;">Name:</td>
	            <td style="border-style:none;padding:0px;"><input id="txtName" type="text" /></td>
	          </tr>
	          <tr>
	            <td style="border-style:none;padding:0px;">Age:</td>
	            <td style="border-style:none;padding:0px;"><input id="txtAge" type="text" /></td>
	          </tr>
	          <tr>
	            <td style="border-style:none;padding:0px;">Sex:</td>
	            <td style="border-style:none;padding:0px;"><select id="selSex" style="width:100px;"><option value="Male">Male</option><option value="Female">Female</option></select></td>
	          </tr>
	          <tr>
	            <td colspan="2" style="border-style:none;padding:0px;"><input type="button" id="butAddPerson" onclick="addPerson()" value="Add Person" /></td>
	          </tr>
	        </table>

入力して、ボタンをクリックして、OKしました.補充して、JSのブラウザを許可しない方法もあります.

<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="462" height="328" id="FlexAndJavaScript">
            	<param name="src" value="FlexAndJavaScript.swf" />
                <param name="movie" value="FlexAndJavaScript.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="FlexAndJavaScript.swf" width="462" height="328">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p> 
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        10.2.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
    </noscript>

jを足せばOKです.完全なコードを確認してみます.
FlexAndJava.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   width="462" height="328" creationComplete="initApp();">
	<fx:Declarations>
		<!--       （    、   ）     -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import flash.external.*;
			
			import mx.collections.ArrayCollection;
			
			public function initDG():void
			{
				var people:Array = new Array();
				people.push({Name: "Charlie", Age: "23", Sex: "Male"});
				people.push({Name: "Brandon", Age: "23", Sex: "Male"});
				people.push({Name: "Mike", Age: "23", Sex: "Male"});
				people.push({Name: "Caroline", Age: "23", Sex: "Female"});
				var peopleCollection:ArrayCollection = new ArrayCollection(people);
				dgPeople.dataProvider = peopleCollection;
				dgPeople.selectedIndex = 0;
			}
			
			public function addPerson(name:String, age:String,
									  sex:String):void
			{
				(dgPeople.dataProvider as ArrayCollection).addItem(
					{Name: name, Age: age, Sex: sex});
			}
			
			public function initApp():void
			{
				if (ExternalInterface.available)
					ExternalInterface.addCallback("addPerson", addPerson);  
			}
			
			public function jsDisplayPerson():void
			{
				if (ExternalInterface.available) {
					ExternalInterface.call("displayPerson", dgPeople.selectedItem); 
					lblMessage.text = "Data Sent!";
				} else
					lblMessage.text = "Error sending data!";
			}
			
			
		]]>
	</fx:Script>
	<s:Panel id="pnlMain" x="0" y="0" width="462" height="328"
			 title="Simple Javascript Interaction">
		<s:DataGrid id="dgPeople" x="10" y="10" width="422" height="229" initialize="initDG()">
			<s:columns>
				<s:ArrayList>
					<s:GridColumn dataField="Name" headerText="Name"></s:GridColumn>
					<s:GridColumn dataField="Age" headerText="Age"></s:GridColumn>
					<s:GridColumn dataField="Sex" headerText="Sex"></s:GridColumn>
				</s:ArrayList>
			</s:columns>
		</s:DataGrid>
		<s:Button id="butJSDisplay" x="10" y="256" label="JavaScript Display"
				  click="jsDisplayPerson()"/>
		<s:Label id="lblMessage" x="149" y="260"/>
	</s:Panel>  
	
</s:Application>

FlexAndJava.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
	<head>
		<title>SWFObject 2 static publishing example page</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	
	</head>
	<body>
	 <center>
	  <div>	
		<object 
            classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  
            id="newSWF"  
            codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">  
            <param name="movie" value="FlexAndJavaScript.swf" />  
            <param name="wmode" value="transparent">  
            <param name="quality" value="high" />  
            <param name="bgcolor" value="ffffff" />  
            <param name="allowScriptAccess" value="always" /> 
            <embed src="FlexAndJavaScript.swf" quality="high" bgcolor="ffffff"
                width="500"
                height="350"
                align="middle"
				name="newSWF"
                play="true"  
                wmode="transparent"  
                loop="false"  
                quality="high"  
                allowScriptAccess="sameDomain"  
                type="application/x-shockwave-flash"  
                pluginspage="http://www.adobe.com/go/getflashplayer">  
            </embed>  
        </object>
	   </div>
	  
	  <br>
	  <br>
	  <table class="sample">
	    <tr>
	      <td>
	        Data coming into Javascript
	      </td>
	    </tr>
	    <tr>
	      <td>
	        <table width="100%" style="border-spacing:5px;">
	          <tr>
	            <td>Name:</td>
	            <td id="nameDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	          <tr>
	            <td>Age:</td>
	            <td id="ageDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	          <tr>
	            <td>Sex:</td>
	            <td id="sexDisplay" style="width:150px;">&nbsp;</td>
	          </tr>
	        </table>
	      </td>
	    </tr>
	    <tr>  
	      <td>
	        Data sending from Javascript
	      </td>
	    </tr>
	    <tr>  
	      <td>
	        <table style="border-spacing:5px;" width="100%">
	          <tr>
	            <td style="border-style:none;padding:0px;">Name:</td>
	            <td style="border-style:none;padding:0px;"><input id="txtName" type="text" /></td>
	          </tr>
	          <tr>
	            <td style="border-style:none;padding:0px;">Age:</td>
	            <td style="border-style:none;padding:0px;"><input id="txtAge" type="text" /></td>
	          </tr>
	          <tr>
	            <td style="border-style:none;padding:0px;">Sex:</td>
	            <td style="border-style:none;padding:0px;"><select id="selSex" style="width:100px;"><option value="Male">Male</option><option value="Female">Female</option></select></td>
	          </tr>
	          <tr>
	            <td colspan="2" style="border-style:none;padding:0px;"><input type="button" id="butAddPerson" onclick="addPerson()" value="Add Person" /></td>
	          </tr>
	        </table>
	      </td>
	    </tr>
	  </table>
	  </center>
	  
	<script>
	function getSWF(movieName){
		if (navigator.appName.indexOf("Microsoft") != -1){
		   return window[movieName]
	   }
	   else {
		   return document[movieName]
	   }
	}
	
	function addPerson()
	{
		var name = document.getElementById('txtName').value;
		var age = document.getElementById('txtAge').value;
		var sex = document.getElementById('selSex').value;
		getSWF('newSWF').addPerson(name, age, sex);
	}
	function displayPerson(person){
		if(person == null){ 
			alert("Please select a person, or maybe I screwed up.");
		}
		else{
			document.getElementById('nameDisplay').innerHTML = person.Name;
			document.getElementById('ageDisplay').innerHTML = person.Age;
			document.getElementById('sexDisplay').innerHTML = person.Sex;
		}
	}
	</script>
	<noscript>
            <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="462" height="328" id="FlexAndJavaScript">
            	<param name="src" value="FlexAndJavaScript.swf" />
                <param name="movie" value="FlexAndJavaScript.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="allowScriptAccess" value="sameDomain" />
                <param name="allowFullScreen" value="true" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="FlexAndJavaScript.swf" width="462" height="328">
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="allowScriptAccess" value="sameDomain" />
                    <param name="allowFullScreen" value="true" />
                <!--<![endif]-->
                <!--[if gte IE 6]>-->
                    <p> 
                        Either scripts and active content are not permitted to run or Adobe Flash Player version
                        10.2.0 or greater is not installed.
                    </p>
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflashplayer">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
    </noscript>     
	</body>
</html>

完全ダウンロードがあります

javascriptのイベントサイクルを理解する(Event Loop)