引用
梦之风铃 的 数据传输与交互(1)
数据具有流动性,数据传输是指根据用户控制传递至指定目的地。数据交互是指Flex与其他程序进行数据交换,包括传递数据给其他程序和接收其他程序返回的数据。本章将详细讲解数据传输的各种方法及如何与其他程序进行交互。
21.1 数据传输的方式
Flex 3.0中的数据传输方式包括内部数据传输、文件流方式传输、XML方式传输、其他方式传输。应用程序内部的数据传输大多通过变量传递来实现。外部文件的数据可分为简单文本数据、XML数据和复杂数据。对于简单的文本数据可采用文件流方式传输。对于XML数据可采用XML方式传输。对于复杂的数据,如大型数据库中的数据,需要通过其他程序来辅助数据传输。
21.1.1 内部数据传输
内部数据传输是指应用程序内部的数据流动,而变量传递是其中最常使用的传输方式。对于同一文件或类中的变量可采用直接赋值的方式。对于不同文件或类中的变量可采用公有变量的方式。
1.直接赋值方式
直接赋值是指将一变量赋值给另一变量。以下代码将变量b的值直接赋值给变量a。
var a:int,b:int=12;
a=b;
大部分情况下,使用“=”符将两变量连接起来就实现了变量传递,但有两种情况下需要特殊处理。一种情况是两个变量的类型不相同,需要强制转换。需要说明的是,若两个变量类型相近,编译器可自动转换。例如,将int类型的变量赋值给Number类型变量时,编译器自动执行变量传递。若两个变量类型相差甚远,如Object型与Array型,就需要强制转换。
Flex 3.0中数据类型强制转换的语法如下所示。
变量名 as 强制类型
或者如下所示。
(强制类型)变量名
以下代码将int类型强制转换为Number类型。
var s:Number=y as Number;
var t:Number=(Number)y;
另一种情况是特殊的变量类型,如Array等多维数据变量。前面章节中详细介绍过数组变量。为了节约变量空间,Array类型的变量并不存储全部数据,而是存储数组的首地址。若两个数组变量直接赋值,结果是两个变量都存储了同一数组的首地址,改变任何变量中的数据也就改变了数组的内容。
以下代码中两个数组变量直接赋值,带来了错误的结果。
var a:Array,b:Array=[1,2,3];
a=b;
a[0]=100;
trace(a); 结果:100,2,3
trace(b); 结果:100,2,3
为了帮助读者理解,假设数组在内存的首地址为000001。变量赋值后,变量a、b都指向首地址000001。对变量a进行数据修改后,数组数据发生改变。但变量a、b仍然指向同一首地址。
正确的做法是使用concat方法复制变量b。
上述代码修改如下所示。
var b:Array=[1,2,3];
var a:Array=b.concat();
a[0]=100;
trace(a); 结果:100,2,3
trace(b); 结果:1,2,3
2.公有变量方式
声明变量为公有的关键字为public”。其语法如下所示。
public var 变量名:变量类型;
以下代码定义了公有变量s。
public var s:String="aafdsfdsa";
不同文件或类中使用公有变量方式传输变量,其步骤如下所示。
在工程中新建名为“Model”文件夹下,并在此文件夹下新建名为“model”的类。类中定义一公有变量a。
以下代码定义了model类。
//model.cs
package Model
{
public class model
{
public static var a:String="123456"; //定义一个静态变量
}
}
在MXML文件中调用model类的公有变量a。
以下代码在MXML文件中调用公有变量a。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="13">
<mx:Script>
<![CDATA[
import Model.model;
var s:String=model.a; //将"mode"l类中的"a"变量值传递给"s"变量
]]>
</mx:Script>
<mx:Panel title="内部数据传输" horizontalAlign="center" verticalAlign= "middle" width="288" height="148" x="109.5" y="56">
<mx:Label text="来自model类的变量:{s}"/>
</mx:Panel>
</mx:Application>
按下Ctrl+F11快捷键编译运行程序。运行效果如图21-1所示。
21.1.2 文件流方式传输
文件流方式传输是指数据以二进制文件流的形式流动。简单的数据可存储于文本文件中,通过Flex AIR工程中新增的File、FileStream等类可以方便地操作本地文件。
使用文件流方式传输数据的步骤如下所示。
新建AIR工程。Flex 3.0中新增AIR工程项目及对本地文件操作类。
在工程根目录中新建名为“test.txt”的文件。文件中的内容可随意。
定义File类变量,并指向“test.txt”文件。
创建File类变量的语法如下所示。
var File变量:File=new File(文件路径);
以下代码定义File类变量,并指向根目录下的“test.txt”文件。
var file:File=new File(File.applicationResourceDirectory.nativePath+ "\\test.txt");
“File.applicationResourceDirectory.nativePath”表示工程路径。
使用FileStream类打开文件“test.txt”。打开文件需要使用FileStream类,其语法如下所示。
var FileStream变量:FileStream=new FileStream();
FileStream变量.open(File变量,打开方式);
打开方式可为“FileMode.READ”、“FileMode.WRITE”、“FileMode.APPEND”、“FileMode. UPDATE”四种。本程序中使用“FileMode.READ”。以下代码使用FileStream类打开文件“test.txt”。
var stream:FileStream = new FileStream(); //定义FileStream类实例,用以处理文件流
stream.open(file,FileMode.READ); //以读的方式打开文件
读取FileStream类中的数据。在使用FileStream类打开文件后,数据存储于FileStream变量中。可使用readUTFBytes方法读取数据。其语法如下所示。
FileStream变量.readUTFBytes();
readUTFBytes方法返回类型为String型。以下代码使用readUTFBytes方法将数据赋值给文本组件显示。
txtFile.text=stream.readUTFBytes(stream.bytesAvailable);
“stream.bytesAvailable”是readUTFBytes方法的可选参数,表示读取全部文件流数据。
在MXML的代码模式下查看完整代码。以下代码是完整的MXML程序。
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="13" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import flash.filesystem.*; //引用filesystem下的全部类
[Bindable]
//定义File变量,并指向“test.txt”文件。
var file:File=new File(File.applicationResourceDirectory. nativePath+"\\test.txt");
private function initApp():void
{
//定义FileStream类实例,用以处理文件流
var stream:FileStream = new FileStream();
stream.open(file,FileMode.READ); //以读的方式打开文件
//读取文件中的内容
txtFile.text=stream.readUTFBytes(stream.bytesAvailable);
stream.close(); //关闭文件流
}
]]>
</mx:Script>
<mx:Panel title="文件流方式传输" verticalAlign="middle" horizontalAlign ="center" width="446" height="295">
<mx:TextArea id="txtFile" width="426" height="250"/>
</mx:Panel>
</mx:WindowedApplication>
按下Ctrl+F11编译运行程序。运行效果如图21-2所示。
21.1.3 XML方式传输
XML优点是简单小巧、存储方便、检索快速。所以,XML常用于数据存储和数据交换。Flex 3.0使用URLLoader类可方便地传输XML数据。使用XML方式传输数据的步骤如下所示。
新建Flex工程。
新建名为“TreeMenus.xml”文件,用以存储XML数据。以下代码是“TreeMenus.xml”文件中的数据定义。
//TreeMenus.xml
<?xml version="1.0" encoding="utf-8"?>
<menus>
<node label="Mail">
<node label="Inbox"/>
<node label="Personal Folder">
<node label="Demo"/>
<node label="Personal"/>
<node label="Saved Mail"/>
<node label="bar"/>
</node>
<node label="Calendar"/>
<node label="Sent"/>
<node label="Trash"/>
</node>
</menus>
编写应用程序初始化处理函数initApp。函数initApp的主要处理是加载“TreeMenus.xml”文件。加载XML文件时需要定义一个URLRequest类变量,用以指明XML文件路径。其语法如下所示。
var URLRequest变量:URLRequest=new URLRequest(XML路径);
使用URLLoader类的load方法加载XML文件。其语法如下所示。
URLLoader变量.load(URLRequest变量)
以下代码定义了初始化函数initApp。
public function initApp():void //应用程序初始化处理函数
{
//定义URLRequest实例,指定文件地址。
var request:URLRequest=new URLRequest("TreeMenus.xml");
loader.load(request); //加载XML文件
loader.addEventListener(Event.COMPLETE,completeHandle); //添加加载完成时的监听
}
“loader.addEventListener(Event.COMPLETE,completeHandle)”语句表示添加对XML加载完成事件的监听。一旦加载完成执行completeHandle函数。
完成剩余MXML代码。剩余代码包括completeHandle函数,<mx:Tree>组件设计等。以下代码是完整的MXML代码。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
fontFamily="simsun" fontSize="12"
layout="absolute"width="242" height="442" creationComplete="initApp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection; //引用ArrayCollection类
import mx.rpc.events.ResultEvent; //引用ResultEvent事件类
//定义一个URLLoader类实例
public var loader:URLLoader=new URLLoader();
public var menus:XML=new XML(); //定义一个XML类实例
public function initApp():void //应用程序初始化处理函数
{
//定义URLRequest实例,指定文件地址。
var request:URLRequest=new URLRequest("TreeMenus.xml");
loader.load(request); //加载XML文件
loader.addEventListener(Event.COMPLETE,completeHandle); //添加加载完成时的监听
}
public function completeHandle(e:Event):void //加载完成处理函数
{
menus=XML(loader.data); //数据传递给menus变量
var results:XMLList=menus.node; //结果集传递给results变量
//results变量值传递给树形列表
tree.dataProvider=results;
}
]]>
</mx:Script>
<mx:Tree id="tree"x="10" y="35" width="218" height="397" labelField="@label" />
<mx:Label x="10" y="10" text="Tree Nodes From XML File"/>
</mx:Application>
<mx:Tree>组件中labelField属性指定显示内容。运行效果如图21-3所示。
21.1.4 其他方式传输
除了上述小节中介绍的数据外,Flex应用程序可能还会遇到其他类型的外部数据。例如,SQL Server数据库数据、MySQL数据库数据、Oracle数据库数据等。Flex 3.0不能直接接收这些数据,需要其他程序处理这些数据后以特定的类型,如数组型、XML型、Object型传递给Flex。有关如何与其他程序交互将在后续章节中详细介绍。
另外,Flex 3.0中新增了对本地数据库(.db格式)操作的类,可用于读取本地的数据库数据。新增了对PDF数据操作的类,可用于读取PDF数据。有关新增的特性将在后续章节中介绍。
21.2 使用<mx:HTTPService>组件与HTTP程序交互
<mx:HTTPService>组件可与所有的HTTP程序交互。例如,ASP、ASP.Net、JSP、PHP等。使用<mx:HTTPService>组件与HTTP程序交互的基本语法如下所示。
<mx:HTTPService id="HTTPService组件id" url="HTTP程序地址"/>
以下代码使用<mx:HTTPService>组件调用“www.google.cn”。
<mx:HTTPService id="httpser" url=" www.google.cn"/>
所有的HTTP程序都支持的网址带参方式,其语法如下所示。
网址?参数名1=值1&参数名2=值2…&参数名n=值n
以下代码传递参数a、b、c。
http://www.baidu.com?a=11&b=22&c=33
网址带参方式的优点是传参简单,但缺点是参数必须先转化为字符串类型,因为网址中只能是字符串类型。另外,若传递的参数较多,网址字符串就会变得很长。
使用网址带参方式能把Flex应用程序中的数据传递给HTTP程序。HTTP程序接收数据后进行处理,并返回Flex可识别的数据类型,如数组型、XML型、Object型等。
<mx:HTTPService>组件返回的数据存储于ResultEvent类中。使用<mx:HTTPService>组件的result事件可处理HTTP程序返回的数据。其语法如下所示。
private function 处理函数名(e:ResultEvent):void
{
e.result //返回数据
}
<mx:HTTPService … result="处理函数名">
返回的数据存储于ResultEvent类的result属性下。各种数据的具体位置与HTTP程序的处理结果有关。建议采用断点调试的方法确定数据的具体位置,即调试时查看ResultEvent变量的内部结构。
以下代码传递用户名和密码给HTTP程序,HTTP程序处理后返回验证结果。
import mx.rpc.events.ResultEvent; //引用ResultEvent类
import mx.controls.Alert; //引用Alert类
private function showResult(e:ResultEvent):void
{
Alert.show(e.result as String); //显示验证结果
}
…
<mx:HTTPService id="hs"
url="http://www.aaaa.com?username=a&password=123"
result="showResult(event)"/>
21.3 <mx:HTTPService>组件实例
本小节以实例讲解如何使用<mx:HTTPService>组件与HTTP程序交互。实例实现的功能为:Flex客户端传递操作数参数给ASP.NET程序,ASP.NET程序计算全部参数的和,并将结果返回给Flex应用程序。
21.3.1 编写ASP.NET程序
本实例的ASP.NET程序使用Visual Studio 2005(简称VS 2005)编写,创建步骤如下所示。
双击打开VS 2005。
单击“文件”|“新建”|“网站…”命令,打开“新建网站”对话框,如图21-4所示。
图21-4 新建网站对话框
在“模板”区域选择“ASP.NET网站”模板。在“位置”文本框中输入网站的存放路径。单击“确定”按钮完成网站的创建。
编写ASP.NET代码。创建网站工程后自动生成了“Default.aspx”文件。按下F7快捷键打开“Default.aspx.cs”文件。“Default.aspx.cs”文件是“Default.aspx”网页的后台代码页。
以下代码是“Default.aspx.cs”文件的具体代码,主要是实现连加功能,并返回XML数据。
//Default.aspx.cs
using System; //引用System名称空间下的所有类
using System.Data; //引用Data名称空间下的所有类
using System.Configuration; //引用Configuration名称空间下的所有类
using System.Web; //引用Web名称空间下的所有类
using System.Web.Security; //引用Security名称空间下的所有类
using System.Web.UI; //引用UI名称空间下的所有类
using System.Web.UI.WebControls; //引用WebControls名称空间下的所有类
using System.Web.UI.WebControls.WebParts;//引用WebParts名称空间下的所有类
using System.Web.UI.HtmlControls; //引用HtmlControls名称空间下的所有类
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) //页面初始化处理函数
{
int sum = 0; //定义int型变量sum,并初始化为0
//接收网址中名为“num”的参数。多个“num”参数时,结果形如“1,2,3,4”。
string s=Request.QueryString["num"];
if (s != null)
{
string[] arr = s.Split(',');//将参数值分离并存储于arr数组中
foreach (string i in arr) //使用循环计算全部参数值的和
{
sum += Convert.ToInt32(i);
}
}
//返回XML数据。元素标签为<ComputeResult>。
Response.Write("<ComputeResult>"+sum.ToString()+"</ComputeResult>");
}
}
(12) 本程序中引用名称空间及Page_Load函数的代码都是VS 2005自动生成的。
(13) Request类的QueryString方法接收网址中传递来的数据。若有多个同名参数,结果以“,”分隔,形如“1,3,4,33”。
(14) Convert类的ToInt32方法将String型转为Int32型,用于计算。
(15) Response类的Write方法输出数据。本程序中将计算结果放于<ComputeResult>标签中返回。
按下Ctrl+F5快捷键编译运行ASP.NET程序。用户可自带参数测试程序是否正确。例如,在浏览器中输入“http://localhost/ASP.NetExample/Default. aspx?num=2&num=5”。
单击“生成”|“发布网站”命令,弹出【发布网站】对话框,如图21-5所示。
在“目标位置”文本框中输入发布网站的本地路径,其他可默认。单击“确定”按钮,完成发布网站。发布网站的结果是生成不带后台文件(.cs文件)的网站。
21.3.2 创建虚拟目录
IIS是Internet Information Service的简称,用以提供对ASP、ASP.Net等HTTP程序的解释。Windows系统默认安装时未带IIS程序,用户可将系统安装光盘插入光驱安装。本书略过IIS的安装。
IIS的默认路径为“系统盘:/Inetpub/wwwroot”,用户可将网站放置于此路径下。若用户需要将网站放置于别处,则需要配置虚拟目录,其步骤如下所示。
单击“开始”|“控制面板”命令,打开控制面板,如图21-6所示。
图21-6 控制面板
双击“管理工具”|“Internet信息服务”项,打开“Internet信息服务”对话框,如图21-7所示。
图21-7 Internet信息服务对话框
在左侧树形列表中右击“默认网站”,选择“新建”|“虚拟目录…”命令,弹出“虚拟目录创建向导”对话框,如图21-8所示。
单击“下一步”按钮,弹出“虚拟目录创建向导”第二步对话框,如图21-9所示。
![]()
图21-8 “虚拟目录创建向导”对话框 图21-9 “虚拟目录创建向导”第二步对话框
在“别名”文本框中输入虚拟目录别名。单击“下一步”按钮,弹出“虚拟目录创建向导”第三步对话框,如图21-10所示。
在“目录”文本框中输入网站路径。单击“下一步”,弹出“虚拟目录创建向导”第四步对话框,如图21-11所示。
![]()
图21-10 “虚拟目录创建向导”第三步对话框 图21-11 “虚拟目录创建向导”第四步对话框
根据需要选择项目,一般默认即可。单击“下一步”按钮,完成虚拟目录的创建。
在新建的虚拟目录中右击相应的网页,如“Default.aspx”,选择“浏览”命令测试网页是否运行正常。