引用
梦之风铃 的 数据传输的方式(2)
21.3.3 编写Flex程序
编写Flex程序的步骤如下所示。
新建Flex工程。
设计外观模型。
本实例中使用的可视组件包括Label组件、Button组件、DataGrid组件等。
以下代码是外观模型的MXML代码。
<mx:Panel title="使用HTTPService交互" width="368" height="334" x="78" y="30" layout="absolute">
<mx:Label text="参数:" x="119" y="26"/>
<mx:TextInput id="txtPara" x="161" y="24" width="95"/> <!--输入框组件-->
<!--DataGrid组件，用以显示参数数据-->
<mx:DataGrid id="dg" x="76" y="64" height="166" width="179">
<mx:columns>
<mx:DataGridColumn dataField="para" headerText="参数"/>
</mx:columns>
</mx:DataGrid>
<mx:Button label="添加" click="addData();" x="277" y="26"/> <!--"添加"按钮组件-->
<mx:Button label="清空" click="delData();" x="277" y="64"/> <!--"清空"按钮组件-->
<mx:Label text="连加结果为:" x="58" y="253"/>
<mx:Label x="126" y="253" id="lblResult"/> <!--Label组件，用以显示结果-->
<mx:Button label="计算" click="addHandle();" x="277" y="249"/> <!--"计算"按钮组件-->
</mx:Panel>
外观模型效果如图21-12所示。
图21-12 <mx:HTTPService>实例的外观效果
添加<mx:HTTPService>组件。在<mx:HTTPService>组件的result事件中显示ASP.NET程序返回的数据。以下代码定义了<mx:HTTPService>组件及result事件的处理函数。
private function httpHandle(e:ResultEvent):void //执行<mx:HTTPService>组件后的处理函数
{
lblResult.text=e.result.ComputeResult;//显示结果
}
…
<!--HTTPService组件，用以调用HTTP服务-->
<mx:HTTPService id="httpser" showBusyCursor="true" result="httpHandle (event);" useProxy="false"/>
前面的ASP.NET程序将结果存于<ComputeResult>标签中。Flex程序接收后具体位置在“e.result.ComputeResult”中。
编写按钮处理函数。本例中有三个按钮“添加”、“清空”、“计算”。“添加”按钮的处理是将输入框中的数据加入到DataGrid组件中。“清空”按钮的处理是清空DataGrid组件。“计算”按钮的处理是将DataGrid组件中数据传递给ASP.NET程序处理。以下代码定义了各个按钮的处理函数。
import mx.rpc.events.ResultEvent; //引用ResultEvent类
import mx.controls.Alert; //引用Alert类
[Bindable]
private var arr:Array=new Array(); //定义数组arr，用以存放参数
private function addHandle():void //单击"计算"按钮时的处理函数
{
httpser.url="http://localhost:88/ASP.NetExample/Default.aspx"; //初始化url
if(arr.length>0) //若有参数时，字符串加上"?"
httpser.url+="?";
for(var i:int=0;i<arr.length;i++) //添加参数，形如"num=1"
{
if(i!=arr.length-1)
httpser.url+="num="+arr[i].para.toString()+"&";
else
httpser.url+="num="+arr[i].para.toString();
}
httpser.send(); //开始执行<mx:HTTPService>组件
}
private function addData():void //单击"添加"按钮时的处理函数
{
var obj:Object=new Object(); //定义Object变量
obj.para=txtPara.text; //Object变量的para属性加入数据
arr.push(obj); //添加Object变量到数组arr
dg.dataProvider=arr; //将数组arr绑定至DataGrid组件上显示
txtPara.text=""; //清空输入框
dg.validateNow(); //刷新DataGrid组件
}
private function delData():void //单击"清空"按钮时的处理函数
{
arr=null; //清空数组arr
dg.dataProvider=arr; //将数组arr绑定至DataGrid组件上显示
dg.validateNow(); //刷新DataGrid组件
}
需要注意的是，<mx:HTTPService>组件的url属性指向的HTTP程序必须正确。用户可在浏览器中输入HTTP程序路径测试。
按下Ctrl+F11快捷键编译运行程序。运行效果如图21-13所示。
图21-13 <mx:HTTPService>实例运行效果
21.4 使用<mx:WebService>组件与WebService程序交互
Flex 3.0中的<mx:WebService>组件专门用于调用和处理WebService。本小节将介绍WebService的相关知识及如何使用<mx:WebService>组件。
WebService是一种在互联网中提供服务的技术。WebService技术标准由各大软件开发商制定，主要解决了不同开发语言间的沟通问题。例如，.Net程序调用WebService服务，而此WebService服务是由Java语言开发的。
WebService具有通用性。不论用何种语言开发的WebService服务，调用的结果都是一致的。这是因为WebService有自身的标准，与开发语言无关。用户可使用几乎任何语言调用WebService服务，只要能找到WebService服务并且传递的参数正确。
WebService技术在国内外已有较广泛的应用。例如，每日的天气、股票走势等都有免费的WebService服务。Flex应用程序中使用<mx:WebService>组件可方便地调用WebService服务。后续章节的实例中将介绍如何使用Visual Studio 2005开发WebService。
<mx:WebService>组件的使用方法与<mx:HTTPService>组件的使用方法大同小异。最主要的区别在于参数的传递方式。<mx:WebService>组件中传递参数的语法如下所示。
<mx:WebService id=" WebService组件id"
wsdl="WebService地址">
<mx:operation name="方法名">
<mx:request>
<参数名1>值1</参数名1>
<参数名2>值2</参数名2>
…
</mx:request>
</mx:operation>
</mx:WebService>
（16） <mx:operation>组件表示WebService的一个方法，必须与WebService中的定义名称相同。
（17） <mx:request>组件存储参数，参数值以标签形式存储。需要注意的是参数的名称及顺序必须与WebService中的定义相同。
以下代码定义了一个<mx:WebService>组件。<mx:WebService>组件中包含带参的getMostPopularPosts方法。
<mx:WebService id="wsBlogAggr"
wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
useProxy="false">
<mx:operation name="getMostPopularPosts">
<mx:request>
<daysBack>30</daysBack>
<limit>{cbxNumPosts.value}</limit>
</mx:request>
</mx:operation>
</mx:WebService>
本程序中limit参数值是动态的，绑定于下拉框组件cbxNumPosts上。
<mx:WebService>组件的方法也可不显性表示参数，只需调用方法时指明即可。
以下代码中<mx:WebService>组件不显性定义参数。
wsBlogAggr.getMostPopularPosts(30,cbxNumPosts.value).send();
…
<mx:WebService id="wsBlogAggr"
wsdl="http://weblogs.macromedia.com/mxna/webservices/mxna2.cfc?wsdl"
useProxy="false">
<mx:operation name="getMostPopularPosts"/>
</mx:WebService>
调用<mx:Webservice>组件中的方法的语法如下所示。
WebService变量.方法.send();
以下代码调用getMostPopularPosts方法。
wsBlogAggr.getMostPopularPosts.send();
<mx:operation>组件中的result事件用以处理返回数据。使用方法与<mx:HTTPService>组件相同。
以下代码调用地址为“http://www.wopos.com/webservice/Stock.asmx”的WebService服务并显示结果。
<?xml version="1.0" encoding="GB2312"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"fontSize="13"creationComplete="wsStock.HelloWopos.send();">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent; //引用ResultEvent类
import mx.controls.Alert; //引用Alert类
//HelloWopos方法返回数据时的处理函数
private function wsHandle(e:ResultEvent):void
{
lbl.text=e.result as String; //显示返回数据
}
]]>
</mx:Script>
<mx:Panel title="使用WebService交互" horizontalAlign="center" verticalAlign="middle" width="398" height="138">
<mx:Label id="lbl" textAlign="center" width="378" height="24"/>
</mx:Panel>
<mx:WebService id="wsStock" showBusyCursor="true"
wsdl="http://www.wopos.com/webservice/Stock.asmx?wsdl"
fault="Alert.show(event.fault.faultString, 'Error')">
<mx:operation name="HelloWopos" result="wsHandle(event);"/>
</mx:WebService>
</mx:Application>
本程序在creationComplete事件，即初始化事件时调用WebService的方法。结果显示于Label组件上。
程序的运行效果如图21-14所示。
21.5 <mx:WebService>组件实例
本小节的实例实现了如下功能：Flex程序通过WebService获取SQL Server 2000数据库中的数据，并将数据显示于DataGrid组件上。涉及的技术包括创建SQL Server 2000数据库、使用VS 2005编写WebService、使用<mx:WebService>组件等。
设计数据库名为“Company”。数据库中只有一张名为“Employee”的表。表的列设计如表21-1所示。
表21-1 “Employee”表的列设计
列 名
类 型
是否为主码
employeeId
Char(20)
是
firstName
Char(50)
lastName
Char(50)
建立数据库步骤如下所示。
图21-15 查询分析器
在查询分析器的编辑区中输入SQL语句。创建数据库的SQL语句如下所示。
/*创建数据库Company*/
create database Company
on
( NAME = 'Company_dat',
FILENAME = 'E:\Flex基础教程\源程序\第7章\GetDataFromSQLServer2000 \Company.mdf',
SIZE = 10,
MAXSIZE = 50,
FILEGROWTH = 5 )
LOG ON
( NAME = 'Company_log',
FILENAME = 'E:\Flex基础教程\源程序\第7章\GetDataFromSQLServer2000 \Company.ldf',
SIZE = 5MB,
MAXSIZE = 25MB,
FILEGROWTH = 5MB )
GO
/*设置当前数据库为Company*/
use Company
go
/*创建表Employee*/
create table Employee
(
employeeId char(20) primary key,
firstName char(50) ,
lastName char(50)
)
/*插入三组测试数据*/
insert into Employee (employeeId,firstName,lastName) values ('0','a','aaa')
insert into Employee (employeeId,firstName,lastName) values ('1','b','bbb')
insert into Employee (employeeId,firstName,lastName) values ('2','c','ccc')
数据库所在路径的用户可自行更改。
选择创建数据库Company的全部SQL语句（到第一个“go”为止）。
单击
按钮执行SQL语句。
选择设置当前数据库为Company的全部SQL语句（从第一个“go”到第二个“go”为止）。
单击
选择剩余的SQL语句（从第二个“go”至最后）。
单击
使用VS 2005编写WebService的步骤如下所示。
选择“ASP.NET Web服务”模板，在“位置”文本框中输入项目路径。单击“确定”按钮，完成项目的创建。
编写WebService。在新建“ASP.NET Web服务”工程后会自动生成一个名为“Service.asmx”的文件。asmx格式文件即为WebService文件。按下F7快捷键，打开“Service.asmx”的后台代码页“Service.cs”。
图21-16 新建网站对话框
以下代码是“Service.cs”文件的具体定义。主要是定义了GetData方法获取数据库中的数据，并返回数组类型。
//Service.cs
using System; //引用System名称空间下的类
using System.Web; //引用Web名称空间下的类
using System.Web.Services; //引用Services名称空间下的类
using System.Web.Services.Protocols; //引用Protocols名称空间下的类
using System.Data.SqlClient; //引用SqlClient名称空间下的类
using System.Collections; //引用Collections名称空间下的类
using System.Data; //引用Data名称空间下的类
[WebService(Namespace = "http://tempuri.org/")]//默认的名称空间
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Service : System.Web.Services.WebService
{
public Service () //默认构造函数
{
}
public class Employee //自定义类，用以存储数据
{
public string employeeId;
public string firstName;
public string lastName;
}
[WebMethod]
[System.Xml.Serialization.XmlInclude(typeof(Employee))] //声明“Employee”类可写入XML
public ArrayList GetData() //获得数据库数据
{
SqlConnection conn = new SqlConnection(); //定义“SqlConnnection”类实例
//数据库连接字符串
conn.ConnectionString = "Data Source=.;Initial Catalog=Company; Persist Security Info=True;User ID=sa;Password=sa";
//定义“SqlCommand”实例，从“Employee”表中取数据
SqlCommand command = new SqlCommand( "select * from Employee",conn);
conn.Open(); //打开连接
SqlDataAdapter da = new SqlDataAdapter(); //定义“SqlDataAdapter”类实例
//将“command”值传递给“SqlDataAdapter”的“SelectCommand”属性
da.SelectCommand = command;
DataSet ds = new DataSet(); //定义“DataSet”类实例
da.Fill(ds, "tables"); //取数据
ArrayList al = new ArrayList(); //定义“ArrayList”类实例
for (int i = 0; i < ds.Tables[0].Rows.Count; i++) //将全部数据存储于al变量中
{
Employee em = new Employee(); //定义“Employee”类实例
//添加数据到“al”变量中
em.employeeId= ds.Tables[0].Rows[i]["employeeId"].ToString().Trim();
em.firstName = ds.Tables[0].Rows[i]["firstName"].ToString().Trim();
em.lastName=ds.Tables[0].Rows[i]["lastName"].ToString().Trim();
al.Add(em);
}
conn.Close(); //关闭数据库
return al;
}
}
（18） 引用名称空间、类声明、默认构造函数等代码都是VS 2005自动生成的。
（19） “[WebService(Namespace = "http://tempuri.org/")]”表示WebService的名称空间。
（20） [WebMethod]关键字指明此函数为WebService的方法。
（21） DataSet类型是一种多表数据类型。若数据以此类型返回，Flex程序将很难处理。所以本程序中自定义了Employee类，将数据全部存储于ArrayList类型变量中。
（22） 由于Employee类是自定义的，WebService在生成WSDL（WebService标准文件）时并不认识，所以需要声明。声明语句为“[System.Xml.Serialization.XmlInclude (typeof(Employee))]”。
（23） 数据库连接语句“Data Source=.;Initial Catalog=Company;Persist Security Info=True; User ID=sa;Password=sa”必须正确。用户可根据实际设置修改用户名和密码。
（24） 获取Employee表全部数据的SQL语句为“select * from Employee”。
按下Ctrl+F5快捷键，编译运行WebService程序。若程序无误会显示WebService中的方法“GetData”。
单击“生成”|“发布网站”命令，发布WebService网站。
为WebService网站创建虚拟目录。创建步骤与<mx:HTTPService>实例中相同。
在IIS中右击“Service.asmx”文件，选择“浏览”命令，测试WebService。
编写Flex程序的步骤如下所示。
添加DataGrid组件。
DataGrid组件用以显示来自WebService的返回数据。以下代码是DataGrid组件MXML代码。
<mx:Panel title="获取SQL Server数据库职工数据">
<!--定义数据列表，绑定来自数据库的数据-->
<mx:DataGrid id="dgEmployee" width="397" dataProvider="{WS.GetData. lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="用户编号" dataField="employeeId"/> <!--数据列-->
<mx:DataGridColumn headerText="姓" dataField="firstName"/> <!--数据列-->
<mx:DataGridColumn headerText="名" dataField="lastName"/> <!--数据列-->
</mx:columns>
</mx:DataGrid>
</mx:Panel>
DataGrid组件的dataProvider属性绑定于“WS.GetData.lastResult”，即<mx:WebService>组件GetData方法的结果集上。
添加<mx:WebService>组件。以下代码是<mx:WebService>组件的MXML代码。
<!--定义"WebService"组件，连接来自外部的WebService-->
<mx:WebService id="WS" wsdl="http://localhost:88/GetDataFromSQLServer2000/ Service.asmx?WSDL"
fault="Alert.show(event.fault.faultString, 'Error')" showBusyCursor ="true">
<mx:operation name="GetData" resultFormat="object" />
</mx:WebService>
<mx:WebService>组件的wsdl属性指明WebService的地址，用户可根据实际设置修改。
完成剩余代码。剩余代码包括应用程序初始化时调用WebService、引用Alert类等。
以下代码是完整的MXML代码。
<?xml version="1.0" encoding="utf-8"?>
<mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"layout="absolute"creationComplete="WS.GetData.send();">
<mx:Script>
<![CDATA[
import mx.controls.Alert; //引用Alert类
]]>
</mx:Script>
<mx:Panel >
<!--定义数据列表，绑定来自数据库的数据-->
<mx:DataGrid id="dgEmployee" width="397" dataProvider="{WS.GetData. lastResult}">
<mx:columns>
<mx:DataGridColumn headerText="用户编号" dataField= "employeeId"/> <!--数据列-->
<mx:DataGridColumn headerText="姓" dataField="firstName"/> <!--数据列-->
<mx:DataGridColumn headerText="名" dataField="lastName"/> <!--数据列-->
</mx:columns>
</mx:DataGrid>
</mx:Panel>
<!--定义"WebService"组件，连接来自外部的WebService-->
<mx:WebService id="WS" wsdl="http://localhost/GetDataFromSQLServer2000 /service.asmx?WSDL"
fault="Alert.show(event.fault.faultString, 'Error')">
<mx:operation name="GetData" resultFormat="object" />
</mx:WebService>
</mx:Application>
按下Ctrl+F11快捷键，编译运行程序。运行效果如图21-17所示。
图21-17 读取SQL Server 2000数据库数据效果图
扫一扫
682
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
