Flex與asp.net完美集合

作者：hzbw 2010-07-28 14:11:49

本文向大家簡單介紹一下Flex與asp.net結(jié)合使用，F(xiàn)lex的最終輸出就是一張網(wǎng)頁+一個(gè)flash(.swf文件)就是用他生成的網(wǎng)頁的方式把那個(gè).swf文件插入asp.net頁面就可以了。

本文和大家重點(diǎn)討論一下Flex與asp.net的結(jié)合，將Flex編譯后的程序插入到asp.net頁面和Flex程序與asp.net程序交互兩大部分內(nèi)容，希望本文的介紹能讓你有所收獲。

Flex與asp.net結(jié)合使用

1.將Flex編譯后的程序插入到asp.net頁面

Flex的最終輸出就是一張網(wǎng)頁+一個(gè)flash(.swf文件)就是用他生成的網(wǎng)頁的方式把那個(gè).swf文件插入asp.net頁面就可以了。

Flex3項(xiàng)目名字叫TestApp，最簡單直接的辦法就是，把"bin-debug"目錄下的：
◆TestApp.html
◆TestApp.swf
◆AC_OETags.js
◆playerProductInstall.swf
這4個(gè)文件復(fù)制到asp.net網(wǎng)站下面，打開TestApp.html，把內(nèi)容復(fù)制到asp.net程序頁面(.aspx文件)中。
比如Default.aspx：

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%> 
//把TestApp.html的內(nèi)容全部復(fù)制到這里  
//....  
//...

總而言之Flex3最后編譯成了一個(gè).swf文件而已，這個(gè)文件在網(wǎng)站里面插入的方法和普通的flash動(dòng)畫的那種.swf文件的使用方法是一樣的。
還有其他的要求：Flex3程序和網(wǎng)頁還有交互，請用"Flexexternalinterface"搜索

2.Flex程序與asp.net程序交互

可以使用Flex的Loader往asp.net發(fā)送請求，獲取xml。
也可以使用ExternalInterface和網(wǎng)頁中的js交互，讓js發(fā)送ajax請求到asp.net。

下面有一實(shí)例，目標(biāo)是：在Flex端將數(shù)據(jù)Post到asp.net頁面中，并將返回的xml數(shù)據(jù)顯示出來

//Asp.net端代碼
//getxml.aspx代碼，保留一行即可，刪除其他的html代碼

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="getxml.aspx.cs"Inherits="getxml"%> 
 
//getxml.aspx.cs  
//usingSystem...  
usingSystem.Xml;  
publicpartialclassgetxml:System.Web.UI.Page  
{  
protectedvoidPage_Load(objectsender,EventArgse)  
{  
stringuser_pkid=System.Web.HttpContext.Current.Request.Form["user_pkid"];  
ifuser_pkid!=null)  
{  
CreateXml();//創(chuàng)建Xml的方法，可使用XmlTextWriter、XmlDocument，或者直接讀取Xml文件等待  
}  
}  
 
privatevoidCreateXml()  
{  
XmlDocumentdoc=newXmlDocument();  
XmlNoderoot=doc.CreateElement("channel");  
 
XmlElementtitleElm=doc.CreateElement("title");  
titleElm.InnerText="blogweather";  
 
//...  
 
root.AppendChild(titleElm);  
doc.AppendChild(root);  
 
XmlTextWriterxw=newXmlTextWriter(Response.OutputStream,System.Text.Encoding.UTF8);//寫到頁面返回值中  
xw.Formatting=Formatting.Indented;//將Xml格式化  
doc.Save(xw);  
xw.Flush();  
xw.Close();  
}  
}

Xml數(shù)據(jù)如下：

<?xmlversionxmlversion="1.0"encoding="UTF-8"?> 
<channel> 
<title>blogweather</title> 
<link>http://www.blogweather.net</link> 
<description>博客天氣預(yù)報(bào)</description> 
</channel>

方法一：
如果所有值均在xml數(shù)據(jù)中，而且不需要拿這些數(shù)據(jù)做二次分析，則推薦使用HTTPService控件

Flex端代碼：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"initialize="init()"> 
<mx:Script> 
<![CDATA[  
importmx.messaging.AbstractConsumer;  
importflash.events.MouseEvent;  
importmx.controls.Alert;  
 
privatefunctioninit():void  
{  
getxml.url="http://www.blogweather.net/getxml.aspx";//接收Post方法的頁面  
vardata:Object=newObject();  
data["user_pkid"]=this.parameters.user_pkid;  
getxml.send(data);  
}  
]]> 
</mx:Script> 
<mx:HTTPServiceidmx:HTTPServiceid="getxml"showBusyCursor="true"useProxy="false"method="POST"> 
</mx:HTTPService> 
<mx:TextAreawordWrapmx:TextAreawordWrap="true"editable="false"enabled="true"id="lb_title"> 
<mx:text>{getxml.lastResult.channel.title}</mx:text> 
</mx:TextArea> 
</mx:Application>

方法二：
如果要將數(shù)據(jù)進(jìn)行分析，則要使用URLLoader和URLRequest
Flex端代碼：

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"initialize="init();"> 
<mx:Script> 
<![CDATA[  
importmx.messaging.AbstractConsumer;  
importmx.messaging.channels.StreamingAMFChannel;  
importflash.events.MouseEvent;  
importmx.controls.Alert;  
 
publicvarmyLoader:URLLoader=newURLLoader();  
publicvarmyRequest:URLRequest;  
publicvaruser_pkid:String;  
 
privatefunctioninit():void  
{  
varhttp://www.cnblogs.com/glaivelee/admin/String="http://www.blogweather.net/getxml.aspx";  
myRequest=newURLRequest(url);  
myRequest.method=URLRequestMethod.POST;  
vardata:URLVariables=newURLVariables();  
//接收來自flash的參數(shù)調(diào)用,比如flash文件為loadxml.swf，帶參數(shù)loadxml.swf?user_pkid=10001  
data.user_pkid=this.parameters.user_pkid;//獲取10001  
myRequest.data=data;  
myLoader.load(myRequest);  
myLoader.addEventListener(Event.COMPLETE,onLoadComplete);  
}  
 
privatefunctiononLoadComplete(event:Event):void  
{  
varmyxml:XML;  
varloader:URLLoader=URLLoader(event.target);  
myxml=newXML(loader.data);  
 
lb_title.text=myxml.child("channel")[0].child("title");  
if(lb_title.text=="blogweather")  
{  
Alert("頁面名稱為:博客天氣預(yù)報(bào)");  
}  
}  
 
]]> 
</mx:Script> 
<mx:TextAreawordWrapmx:TextAreawordWrap="true"editable="false"enabled="true"id="lb_title"> 
<mx:text>lb_title</mx:text> 
</mx:TextArea> 
</mx:Application>