Flex Javascript交互實現(xiàn)代碼
更新時間:2009年06月11日 22:37:44 作者:
刪除swf這里需要提醒下,因為embedSWF是替換標簽,而不是填充。
關鍵字:ExternalInterface
所用類庫:SWFObject
/**
* Flex調(diào)用Javascript函數(shù)
* @params functionName:String Javascript函數(shù)名稱
* @params ...params Javascript函數(shù)參數(shù)
* @return 返回Javascript函數(shù)的return內(nèi)容
**/
ExternalInterface.call(functionName:String, ...params);
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* 調(diào)用Java script 函數(shù)
* @params evt:MouseEvent
* @return void
**/
private function myClick(evt:MouseEvent):void {
var item:Object = new Object();
item.name = "Dante";
item.address = "Beijing";
var results:Object = ExternalInterface.call("myfunc",item);
//results為myfunc函數(shù)返回的對象
trace(ObjectUtil.toString(results));
}
]]-->
</mx:Script>
<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>
index.html
/**
* 被Flex調(diào)用的 myfunc函數(shù)
* @params item 對象
* @return results 返回一個對象給Flex
**/
function myfunc(item) {
alert(item.name+"--"+item.address);
//創(chuàng)建對象
var results = {};
results .name= "dante";
results .age = 23;
results .sex = "man";
return obj;
}
/**
* Javascript調(diào)用Flex函數(shù)
* @params functionName:String Javascript調(diào)用Flex函數(shù)名
* @params closure:Function Flex將要調(diào)用的函數(shù)
* @return void
**/
ExternalInterface.addCallback(functionName:String,closure:Function);
main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" initialize="initApp()">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* initApp
* @return void
**/
private function initApp():void {
//注冊列表
ExternalInterface.addCallback("saveD",saveData);
//HTML 與 FLEX交互
//params.flashvars = "xmlPath=hello&name=dante";
var item:Object = Application.application.parameters;
trace("xmlPath:"+item.xmlPath ,"name:" + item.name);
}
/**
* saveData
* @params item:Object java script 傳過來的參數(shù)
* @return void
**/
private function saveData(item:Object):void {
trace("javascript調(diào)用Flex函數(shù)成功!");
nameTxt.text = item.name;
}
]]-->
</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>
index.html
HTML內(nèi)嵌swf文件,我用的SWFObject,個人認為是一個很好的類庫,簡化了包含代碼。
注意 :javascript調(diào)用Flex的函數(shù),必須要獲得swf的ID,可以通過document.getElementById(),也可以使用swfobject.getObjectById()。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/swfobject.js" src="js/swfobject.js" type="text/javascript"></script>
<title>SWFObject</title>
<script type="text/javascript" language="javascript"><!--
var flashvars = false;
var params = {};
params.flashvars = "xmlPath=hello&name=dante";
var attributes = {};
//ID,也就是swf的ID,這個ID很重要,通過它調(diào)用flex的方法
attributes.id = "swf01";
//內(nèi)嵌swf文件,這個embedSWF方法,我在最后的補充會說下
swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);
/**
* 調(diào)用Flex函數(shù)
* @return void
**/
function callFlex(item) {
//通過ID獲得swf,也可以使用document.getElementById();
//var swf = document.getElementById("swf01");
var swf = swfobject.getObjectById("swf01");
var item = {};
item.name = document.getElementById("nameTxt").value;
//調(diào)用Flex函數(shù),傳參item:Object
swf.saveD(item);
}
// --></script>
</head>
<body>
<center>
<div id="myPanel">Flex content</div>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="nameTxt"/></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:callFlex();" href="javascript:callFlex();">Call Flex</a>
</td>
</tr>
</table>
</center>
</body>
</html>
OK,兩種交互的方式已經(jīng)告訴大家了,快試試吧。
SWFObject使用補充:
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF:
內(nèi)嵌swf文件,這個函數(shù)的參數(shù)比較多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes),各個參數(shù)具體功能如下:
swfUrl(String,必須的)指定SWF的URL。
id(String,必須的)指定將會被Flash內(nèi)容替換的HTML元素(包含你的替換內(nèi)容)的id。
width(String,必須的)指定SWF的寬。
height(String,必須的)指定SWF的高。
version(String,必須的)指定你發(fā)布的SWF對應的Flash Player版本(格式為:major.minor.release)。
expressInstallSwfurl(String,可選的)指定express install SWF的URL并激活Adobe express install。
flashvars(String,可選的)用name:value對指定你的flashvars。
params(String,可選的)用name:value對指定你的嵌套object元素的params。
attributes(String,可選的)用name:value對指定object的屬性。
注意 :在不破壞參數(shù)順序的情況下,你可以忽略可選參數(shù)。如果你不想使用一個可選參數(shù),但是會使用后面的一個可選參數(shù),你可以簡單的傳入false作為參數(shù)的值。對flashvars、params和 attributes這些JavaScript對象來說,你也可以相應的傳入一個空對象{}。
二.swfobject.getObjectById("swfId")
通過swfid獲得swf對象,通過該對象可調(diào)用flex函數(shù)。
三.swfobject.removeSWF("swfId")
通過swfId刪除swf。
注意 :刪除swf這里需要提醒下,因為embedSWF是替換標簽,而不是填充。比如上面的例子<div id="myPanel">Flex content</div>,如果執(zhí)行了swfobject.removeSWF后,想重新添加SWF必須要重新創(chuàng)建<div id="myPanel">或者更改embedSWF的第二個參數(shù)更改替換新的標簽ID。因為在這里SWF替換了調(diào)了<div>
所用類庫:SWFObject
/**
* Flex調(diào)用Javascript函數(shù)
* @params functionName:String Javascript函數(shù)名稱
* @params ...params Javascript函數(shù)參數(shù)
* @return 返回Javascript函數(shù)的return內(nèi)容
**/
ExternalInterface.call(functionName:String, ...params);
main.mxml
復制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* 調(diào)用Java script 函數(shù)
* @params evt:MouseEvent
* @return void
**/
private function myClick(evt:MouseEvent):void {
var item:Object = new Object();
item.name = "Dante";
item.address = "Beijing";
var results:Object = ExternalInterface.call("myfunc",item);
//results為myfunc函數(shù)返回的對象
trace(ObjectUtil.toString(results));
}
]]-->
</mx:Script>
<mx:Button label="Click me" click="myClick(event);"/>
</mx:Application>
index.html
復制代碼 代碼如下:
/**
* 被Flex調(diào)用的 myfunc函數(shù)
* @params item 對象
* @return results 返回一個對象給Flex
**/
function myfunc(item) {
alert(item.name+"--"+item.address);
//創(chuàng)建對象
var results = {};
results .name= "dante";
results .age = 23;
results .sex = "man";
return obj;
}
/**
* Javascript調(diào)用Flex函數(shù)
* @params functionName:String Javascript調(diào)用Flex函數(shù)名
* @params closure:Function Flex將要調(diào)用的函數(shù)
* @return void
**/
ExternalInterface.addCallback(functionName:String,closure:Function);
main.mxml
復制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute" initialize="initApp()">
<mx:Script>
<!--[CDATA[
import flash.external.ExternalInterface;
import mx.utils.ObjectUtil;
/**
* initApp
* @return void
**/
private function initApp():void {
//注冊列表
ExternalInterface.addCallback("saveD",saveData);
//HTML 與 FLEX交互
//params.flashvars = "xmlPath=hello&name=dante";
var item:Object = Application.application.parameters;
trace("xmlPath:"+item.xmlPath ,"name:" + item.name);
}
/**
* saveData
* @params item:Object java script 傳過來的參數(shù)
* @return void
**/
private function saveData(item:Object):void {
trace("javascript調(diào)用Flex函數(shù)成功!");
nameTxt.text = item.name;
}
]]-->
</mx:Script>
<mx:TextInput id="nameTxt"/>
</mx:Application>
index.html
HTML內(nèi)嵌swf文件,我用的SWFObject,個人認為是一個很好的類庫,簡化了包含代碼。
注意 :javascript調(diào)用Flex的函數(shù),必須要獲得swf的ID,可以通過document.getElementById(),也可以使用swfobject.getObjectById()。
復制代碼 代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh" lang="zh" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="js/swfobject.js" src="js/swfobject.js" type="text/javascript"></script>
<title>SWFObject</title>
<script type="text/javascript" language="javascript"><!--
var flashvars = false;
var params = {};
params.flashvars = "xmlPath=hello&name=dante";
var attributes = {};
//ID,也就是swf的ID,這個ID很重要,通過它調(diào)用flex的方法
attributes.id = "swf01";
//內(nèi)嵌swf文件,這個embedSWF方法,我在最后的補充會說下
swfobject.embedSWF("swf/main.swf","myPanel","300","200","9.0.0","swf/expressInstall.swf",flashvars,params,attributes);
/**
* 調(diào)用Flex函數(shù)
* @return void
**/
function callFlex(item) {
//通過ID獲得swf,也可以使用document.getElementById();
//var swf = document.getElementById("swf01");
var swf = swfobject.getObjectById("swf01");
var item = {};
item.name = document.getElementById("nameTxt").value;
//調(diào)用Flex函數(shù),傳參item:Object
swf.saveD(item);
}
// --></script>
</head>
<body>
<center>
<div id="myPanel">Flex content</div>
<table>
<tr>
<td>Name</td>
<td><input type="text" id="nameTxt"/></td>
</tr>
<tr>
<td colspan="2">
<a href="javascript:callFlex();" href="javascript:callFlex();">Call Flex</a>
</td>
</tr>
</table>
</center>
</body>
</html>
OK,兩種交互的方式已經(jīng)告訴大家了,快試試吧。
SWFObject使用補充:
swfobject.embedSWF()
swfobject.getObjectById("swfID")
swfobject.removeSWF("swfID")
一.swfobject.embedSWF:
內(nèi)嵌swf文件,這個函數(shù)的參數(shù)比較多swfobject.embedSWF(swfUrl, id, width, height, version,expressInstallSwfurl, flashvars,params, attributes),各個參數(shù)具體功能如下:
swfUrl(String,必須的)指定SWF的URL。
id(String,必須的)指定將會被Flash內(nèi)容替換的HTML元素(包含你的替換內(nèi)容)的id。
width(String,必須的)指定SWF的寬。
height(String,必須的)指定SWF的高。
version(String,必須的)指定你發(fā)布的SWF對應的Flash Player版本(格式為:major.minor.release)。
expressInstallSwfurl(String,可選的)指定express install SWF的URL并激活Adobe express install。
flashvars(String,可選的)用name:value對指定你的flashvars。
params(String,可選的)用name:value對指定你的嵌套object元素的params。
attributes(String,可選的)用name:value對指定object的屬性。
注意 :在不破壞參數(shù)順序的情況下,你可以忽略可選參數(shù)。如果你不想使用一個可選參數(shù),但是會使用后面的一個可選參數(shù),你可以簡單的傳入false作為參數(shù)的值。對flashvars、params和 attributes這些JavaScript對象來說,你也可以相應的傳入一個空對象{}。
二.swfobject.getObjectById("swfId")
通過swfid獲得swf對象,通過該對象可調(diào)用flex函數(shù)。
三.swfobject.removeSWF("swfId")
通過swfId刪除swf。
注意 :刪除swf這里需要提醒下,因為embedSWF是替換標簽,而不是填充。比如上面的例子<div id="myPanel">Flex content</div>,如果執(zhí)行了swfobject.removeSWF后,想重新添加SWF必須要重新創(chuàng)建<div id="myPanel">或者更改embedSWF的第二個參數(shù)更改替換新的標簽ID。因為在這里SWF替換了調(diào)了<div>
相關文章
Flex與.NET互操作(八) 使用FluorineFx網(wǎng)關實現(xiàn)遠程訪問
關于遠程訪問在本系列文章中陸續(xù)的寫了不少示例了,本文沒有準備深入的去探討,為了鞏固FluorineFx網(wǎng)關的學習和使用。2009-06-06Flex Gumbo中通過baseColor樣式 設置FxHScrollBar背景顏色
Gumbo中通過baseColor樣式 設置FxHScrollBar背景顏色的實現(xiàn)代碼。需要的朋友可以參考下。2009-08-08