引用 数据传输与交互(1)

引用

梦之风铃数据传输与交互(1)

数据具有流动性,数据传输是指根据用户控制传递至指定目的地。数据交互是指Flex与其他程序进行数据交换,包括传递数据给其他程序和接收其他程序返回的数据。本章将详细讲解数据传输的各种方法及如何与其他程序进行交互。

21.1  数据传输的方式

Flex 3.0中的数据传输方式包括内部数据传输、文件流方式传输、XML方式传输、其他方式传输。应用程序内部的数据传输大多通过变量传递来实现。外部文件的数据可分为简单文本数据、XML数据和复杂数据。对于简单的文本数据可采用文件流方式传输。对于XML数据可采用XML方式传输。对于复杂的数据,如大型数据库中的数据,需要通过其他程序来辅助数据传输。

image031.jpg 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";

不同文件或类中使用公有变量方式传输变量,其步骤如下所示。

image021.gif 在工程中新建名为“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>

image043.gif 按下Ctrl+F11快捷键编译运行程序。运行效果如图21-1所示。

image020.jpg 21.1.2  文件流方式传输

文件流方式传输是指数据以二进制文件流的形式流动。简单的数据可存储于文本文件中,通过Flex AIR工程中新增的File、FileStream等类可以方便地操作本地文件。

使用文件流方式传输数据的步骤如下所示。

image021.gif 新建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>

image047.gif 按下Ctrl+F11编译运行程序。运行效果如图21-2所示。

image020.jpg 21.1.3  XML方式传输

XML优点是简单小巧、存储方便、检索快速。所以,XML常用于数据存储和数据交换。Flex 3.0使用URLLoader类可方便地传输XML数据。使用XML方式传输数据的步骤如下所示。

image021.gif 新建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>

image050.gif<mx:Tree>组件中labelField属性指定显示内容。运行效果如图21-3所示。

image020.jpg 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应用程序。

image031.jpg 21.3.1  编写ASP.NET程序

本实例的ASP.NET程序使用Visual Studio 2005(简称VS 2005)编写,创建步骤如下所示。

image021.gif 双击打开VS 2005。

 单击“文件”|“新建”|“网站…”命令,打开“新建网站”对话框,如图21-4所示。

image052.jpg

图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>标签中返回。

image053.gif 按下Ctrl+F5快捷键编译运行ASP.NET程序。用户可自带参数测试程序是否正确。例如,在浏览器中输入“http://localhost/ASP.NetExample/Default. aspx?num=2&num=5”。

 单击“生成”|“发布网站”命令,弹出【发布网站】对话框,如图21-5所示。

 在“目标位置”文本框中输入发布网站的本地路径,其他可默认。单击“确定”按钮,完成发布网站。发布网站的结果是生成不带后台文件(.cs文件)的网站。

image031.jpg 21.3.2  创建虚拟目录

IIS是Internet Information Service的简称,用以提供对ASP、ASP.Net等HTTP程序的解释。Windows系统默认安装时未带IIS程序,用户可将系统安装光盘插入光驱安装。本书略过IIS的安装。

IIS的默认路径为“系统盘:/Inetpub/wwwroot”,用户可将网站放置于此路径下。若用户需要将网站放置于别处,则需要配置虚拟目录,其步骤如下所示。

image021.gif 单击“开始”|“控制面板”命令,打开控制面板,如图21-6所示。

image054.jpg

图21-6  控制面板

 双击“管理工具”|“Internet信息服务”项,打开“Internet信息服务”对话框,如图21-7所示。

image055.jpg

图21-7  Internet信息服务对话框

 在左侧树形列表中右击“默认网站”,选择“新建”|“虚拟目录…”命令,弹出“虚拟目录创建向导”对话框,如图21-8所示。

 单击“下一步”按钮,弹出“虚拟目录创建向导”第二步对话框,如图21-9所示。

image056.jpg          image057.jpg

图21-8 “虚拟目录创建向导”对话框               图21-9 “虚拟目录创建向导”第二步对话框

 在“别名”文本框中输入虚拟目录别名。单击“下一步”按钮,弹出“虚拟目录创建向导”第三步对话框,如图21-10所示。

 在“目录”文本框中输入网站路径。单击“下一步”,弹出“虚拟目录创建向导”第四步对话框,如图21-11所示。

image058.jpg         image059.jpg

图21-10 “虚拟目录创建向导”第三步对话框         图21-11 “虚拟目录创建向导”第四步对话框

 根据需要选择项目,一般默认即可。单击“下一步”按钮,完成虚拟目录的创建。

 在新建的虚拟目录中右击相应的网页,如“Default.aspx”,选择“浏览”命令测试网页是否运行正常。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

游鱼_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值