小结Flex与浏览器交互

2012-11-23

总结Flex与浏览器交互?在用flex做Web应用时为了扩展应用程序功能，势必会更多的同浏览器进行交互，这样就会

总结Flex与浏览器交互

在用flex做Web应用时为了扩展应用程序功能，势必会更多的同浏览器进行交互，这样就会用到下面介绍的知识
1、在Flex中实现URL 跳转(使用flash.net.navigateToURL()方法如：)
?? view plaincopy to clipboardprint?
/*
???? * param1: 要跳转的URL
???? * param2: 跳转方式 _blank /_self
???? */
??? navigateToURL(new URLRequest("http://blog.csdn.net/xingjunli"),"_blank");
/*
???? * param1: 要跳转的URL
???? * param2: 跳转方式 _blank /_self
???? */
??? navigateToURL(new URLRequest("http://blog.csdn.net/xingjunli"),"_blank");
2、使用FlashVars传替换参数（使用Application.application.parameters属性）
??? 页面嵌入SWF文件代码（我们可以通过JS动态来设置FlashVars信息已达到数据交互的目的）
????????????? view plaincopy to clipboardprint?
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="mySwf">??
??????????????? <param name="movie" value="main.swf" />??
??????????????? <param name="quality" value="high" />??
??????????????? <param name="bgcolor" value="#869ca7" />??
??????????????? <param name="allowScriptAccess" value="sameDomain" />??
??????? <param name="FlashVars" value="UserName=Andy_liu&Age=18&Address=HongKong" />??
??????????? </object>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" id="mySwf">
??????????????? <param name="movie" value="main.swf" />
??????????????? <param name="quality" value="high" />
??????????????? <param name="bgcolor" value="#869ca7" />
??????????????? <param name="allowScriptAccess" value="sameDomain" />
??????? <param name="FlashVars" value="UserName=Andy_liu&Age=18&Address=HongKong" />
??????????? </object>
??????? Flex中获取参数代码:
?????????? view plaincopy to clipboardprint?
private function onFlashVars(e:MouseEvent):void //获取页面参数??
??????? {??
??????????? var parameters:Object = Application.application.parameters;??
??????????? labURL.text = Application.application.url.toString();??????????? // http://localhost:8889/main.swf??
??????????? var param1:String = parameters.UserName;??????????????????? // Andy_liu??
??????????? var param2:int = parseInt(parameters.Age);??????????????????? // 18??
??????????? var param3:String = parameters.Address;??????????????????? // HongKong??
??????????? /*
??????????? txtParam1.text = param1;
??????????? txtParam2.text = String(param2);
??????????? txtParam3.text = param3;
??????????? */
?????????????
??????? }
private function onFlashVars(e:MouseEvent):void //获取页面参数
??????? {
??????????? var parameters:Object = Application.application.parameters;
??????????? labURL.text = Application.application.url.toString();??????????? // http://localhost:8889/main.swf
??????????? var param1:String = parameters.UserName;??????????????????? // Andy_liu
??????????? var param2:int = parseInt(parameters.Age);??????????????????? // 18
??????????? var param3:String = parameters.Address;??????????????????? // HongKong
??????????? /*
??????????? txtParam1.text = param1;
??????????? txtParam2.text = String(param2);
??????????? txtParam3.text = param3;
??????????? */
??????????
??????? }
3、在Flex中调用JavaScript函数
??? 先在页面中完成js function(注在Flex中只能调用当前页面引入的JS函数)
?? view plaincopy to clipboardprint?
function ShowUserInfo(name,age,address)??
???? {??
??????? alert("Name:" + name+"\n" + "Age:" + age + "\n" +"Address"+address);??
??????? return "Call Successful!"
???? }
function ShowUserInfo(name,age,address)
???? {
??????? alert("Name:" + name+"\n" + "Age:" + age + "\n" +"Address"+address);
??????? return "Call Successful!"
???? }
???? Flex中调用方法并获取JS function返回值（使用ExternalInterface.call()方法）：
??? view plaincopy to clipboardprint?
private function onCallJS(e:MouseEvent):void
??? {??
??????? /*
???????? * param1:当前页JS function 方法名
???????? * param...传递的参数0-N个
???????? */
??????? var resultValue:String = ExternalInterface.call("ShowUserInfo",txtParam1.text,txtParam2.text,txtParam3.text);??
??????? //resultValue = Call Successful!??
??? }
private function onCallJS(e:MouseEvent):void
??? {
??????? /*
???????? * param1:当前页JS function 方法名
???????? * param...传递的参数0-N个
???????? */
??????? var resultValue:String = ExternalInterface.call("ShowUserInfo",txtParam1.text,txtParam2.text,txtParam3.text);
??????? //resultValue = Call Successful!
??? }
4、在JavaScript中调用ActionScript函数
??? 页面中调用的JS 函数
?? view plaincopy to clipboardprint?
function CallFlexMethod()??
???? {??
??????? var swf="mySwf";??
??????? var container;??
??????? //alert(navigator.appName);??
??????? if(navigator.appName.indexOf("Microsoft")>=0)??
??????? {??
??????????? container = document;??
??????? }??
??????? else
??????? {??
??????????? container = window;??
??????? }??
??????? container[swf].flexFunction1();??????????????????? //无参方法??
??????? container[swf].flexFunction2("myHtmlRequest!");//参数传递方法??
??????? alert(container[swf].flexFunction3());??????????? //含返回值方法??
???? }
function CallFlexMethod()
???? {
??????? var swf="mySwf";
??????? var container;
??????? //alert(navigator.appName);
??????? if(navigator.appName.indexOf("Microsoft")>=0)
??????? {
??????????? container = document;
??????? }
??????? else
??????? {
??????????? container = window;
??????? }
??????? container[swf].flexFunction1();??????????????????? //无参方法
??????? container[swf].flexFunction2("myHtmlRequest!");//参数传递方法
??????? alert(container[swf].flexFunction3());??????????? //含返回值方法
???? }

???? Flex中注册和调用执行的方法：
???? view plaincopy to clipboardprint?
//重要必须在Flex中执行如下注册才能在JS中调用??
??? private function registerCallBacks():void
??? {??
??????? ExternalInterface.addCallback("flexFunction1",jsCallBack1);??
??????? ExternalInterface.addCallback("flexFunction2",jsCallBack2);??
??????? ExternalInterface.addCallback("flexFunction3",jsCallBack3);??
??? }??
??? private function jsCallBack1():void
??? {??
??????? Alert.show("Call First Flex Method!");??
??? }??
??? private function jsCallBack2(params:*):void
??? {??
??????? Alert.show("Call Method2:" + String(params));??
??? }??
??? private function jsCallBack3():String??
??? {??
??????? return Math.random().toString();?????
??? }
//重要必须在Flex中执行如下注册才能在JS中调用
??? private function registerCallBacks():void
??? {
??????? ExternalInterface.addCallback("flexFunction1",jsCallBack1);
??????? ExternalInterface.addCallback("flexFunction2",jsCallBack2);
??????? ExternalInterface.addCallback("flexFunction3",jsCallBack3);
??? }
??? private function jsCallBack1():void
??? {
??????? Alert.show("Call First Flex Method!");
??? }
??? private function jsCallBack2(params:*):void
??? {
??????? Alert.show("Call Method2:" + String(params));
??? }
??? private function jsCallBack3():String
??? {
??????? return Math.random().toString();??
??? }
5、BrowserManager管理组件应用
???? BrowserManager 是一个 Singleton 管理器，用于充当浏览器和应用程序之间的代理。使用它可以访问浏览器地址栏中的 URL，这与访问 JavaScript 中的 document.location 属性类似。当 url 属性发生更改时调度这些事件。然后侦听器可以响应、更改该 URL 或阻止其它对象获取此事件。
????? 获得bm实例：
??? view plaincopy to clipboardprint?
private var bm:IBrowserManager = BrowserManager.getInstance();
private var bm:IBrowserManager = BrowserManager.getInstance();
????? a、获取URL传递的参数：
?? view plaincopy to clipboardprint?
private function getBrowserValue():void
??? {??
??????? //URL = "http://localhost/browser/main.html#name=peter;age=25;address=shenzhen china"??
??????? var o:Object = URLUtil.stringToObject(bm.fragment);??
??????? txtURLName.text = o.name;??????????? // peter??
??????? txtURLAge.text = o.age;??????????????? // 25??
??????? txtURLAddress.text = o.address;??????? // shenzhen china??
??? }
private function getBrowserValue():void
??? {
??????? //URL = "http://localhost/browser/main.html#name=peter;age=25;address=shenzhen china"
??????? var o:Object = URLUtil.stringToObject(bm.fragment);
??????? txtURLName.text = o.name;??????????? // peter
??????? txtURLAge.text = o.age;??????????????? // 25
??????? txtURLAddress.text = o.address;??????? // shenzhen china
??? }
??? b、获取浏览器信息(请求URL：“http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china”)
?????? view plaincopy to clipboardprint?
private function onBrowserManager(e:MouseEvent):void
??????? {??
??????????? txtBMOutPut.text += "Full URL: \n" + bm.url + "\n\n";??
??????????? txtBMOutPut.text += "Base URL: \n" + bm.base + "\n\n";??
??????????? txtBMOutPut.text += "URL Fragment URL: \n" + bm.fragment + "\n-----------\n";??
?????????????
??????????? var o:Object = URLUtil.stringToObject(bm.fragment);??
??????????? txtBMOutPut.text += "Object: \n" + ObjectUtil.toString(o) + "\n\n";??
??????????? txtBMOutPut.text += "Name: \n" + o.name + "\n\n";??
??????????? txtBMOutPut.text += "Age: \n" + o.age + "\n\n";??
??????????? txtBMOutPut.text += "Address: \n" + o.address + "\n-----------\n";??
?????????????
??????????? txtBMOutPut.text += "URL Port: \n" + URLUtil.getPort(bm.url) + "\n\n";??
??????????? txtBMOutPut.text += "URL Protocol: \n" + URLUtil.getProtocol(bm.url) + "\n\n";??
??????????? txtBMOutPut.text += "URL Server: \n" + URLUtil.getServerName(bm.url) + "\n\n";??
??????????? txtBMOutPut.text += "URL Server with Port: \n" + URLUtil.getServerNameWithPort(bm.url) + "\n-----------\n";??
??????????? /* 执行结果:
??????????? Full URL:
??????????? http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china
??????????? Base URL:
??????????? http://localhost:8889/main.html
??????????? URL Fragment URL:
??????????? name=peter;age=25;address=shenzhen%20china
??????????? -----------
??????????? Object:
??????????? (Object)#0
????????????? address = "shenzhen china"
????????????? age = 25
????????????? name = "peter"
??????????? Name:
??????????? peter
??????????? Age:
??????????? 25
??????????? Address:
??????????? shenzhen china
??????????? -----------
??????????? URL Port:
??????????? 8889
??????????? URL Protocol:
??????????? http
??????????? URL Server:
??????????? localhost
??????????? URL Server with Port:
??????????? localhost:8889
??????????? -----------
??????????? */
??????? }
private function onBrowserManager(e:MouseEvent):void
??????? {
??????????? txtBMOutPut.text += "Full URL: \n" + bm.url + "\n\n";
??????????? txtBMOutPut.text += "Base URL: \n" + bm.base + "\n\n";
??????????? txtBMOutPut.text += "URL Fragment URL: \n" + bm.fragment + "\n-----------\n";
??????????
??????????? var o:Object = URLUtil.stringToObject(bm.fragment);
??????????? txtBMOutPut.text += "Object: \n" + ObjectUtil.toString(o) + "\n\n";
??????????? txtBMOutPut.text += "Name: \n" + o.name + "\n\n";
??????????? txtBMOutPut.text += "Age: \n" + o.age + "\n\n";
??????????? txtBMOutPut.text += "Address: \n" + o.address + "\n-----------\n";
??????????
??????????? txtBMOutPut.text += "URL Port: \n" + URLUtil.getPort(bm.url) + "\n\n";
??????????? txtBMOutPut.text += "URL Protocol: \n" + URLUtil.getProtocol(bm.url) + "\n\n";
??????????? txtBMOutPut.text += "URL Server: \n" + URLUtil.getServerName(bm.url) + "\n\n";
??????????? txtBMOutPut.text += "URL Server with Port: \n" + URLUtil.getServerNameWithPort(bm.url) + "\n-----------\n";
??????????? /* 执行结果:
??????????? Full URL:
??????????? http://localhost:8889/main.html#name=peter;age=25;address=shenzhen%20china
??????????? Base URL:
??????????? http://localhost:8889/main.html
??????????? URL Fragment URL:
??????????? name=peter;age=25;address=shenzhen%20china
??????????? -----------
??????????? Object:
??????????? (Object)#0
????????????? address = "shenzhen china"
????????????? age = 25
????????????? name = "peter"
??????????? Name:
??????????? peter
??????????? Age:
??????????? 25
??????????? Address:
??????????? shenzhen china
??????????? -----------
??????????? URL Port:
??????????? 8889
??????????? URL Protocol:
??????????? http
??????????? URL Server:
??????????? localhost
??????????? URL Server with Port:
??????????? localhost:8889
??????????? -----------
??????????? */
??????? }
??????? c、BrowserManager还包含其它一些浏览器的扩展方法如：bm.setTitle("新标题：正在培训!")修改页面标题等...参考http://livedocs.adobe.com/flex/3/html/help.html?content=deep_linking_3.html
6、在Flex中通过实现mx.managers.IHistoryManagerClinet接口来实现自定义历史记录管理器
自定义textInput
view plaincopy to clipboardprint?
<?xml version="1.0" encoding="utf-8"?>??
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" text="Change Me!" implements="mx.managers.IHistoryManagerClient"
creationComplete="mx.managers.HistoryManager.register(this);" change="textChanged(event)">??
??? <mx:Script>??
??????? ??
??? </mx:Script>??
</mx:TextInput>
<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput xmlns:mx="http://www.adobe.com/2006/mxml" text="Change Me!" implements="mx.managers.IHistoryManagerClient"
creationComplete="mx.managers.HistoryManager.register(this);" change="textChanged(event)">
??? <mx:Script>
??????? 
??? </mx:Script>
</mx:TextInput>
当我们在使用上面自定义的TextInput时会发现在浏览器URL中会动态创建修入如这样的一些信息“#app=a4e4&8211-text=asdfasdfasdfsd%20”故FLEX通过浏览器URL记录SWF文件中组件的变化已实现保存历史记录数据已实现历史记录管理！

热点排行