本文是对Adobe Flex官方网站的Getting Started的翻译,如有转载,请声明出处!
交换数据
本部分是Getting Started教程的第二部分,交换数据的介绍。在本部分中,将介绍如何构建多个应用程序,以便以普通文本和XML文本的格式获取发货数据。为了完成这个应用程序,需要使用Flex Builder/Eclipse插件,内置的Flex组件以及Flex HTTP 服务。
本部分的内容介绍是按照从概括到详细的方式进行的,在最后面提供了整个工程的下载,可以直接导入到Eclipse with Flex Builder Plugin或者Flex Builder中。
本部分的内容用于创建两个应用程序,使用HTTPService来获取两种类型的数据:
普通文本类型
XML类型
虽然可以通过ColdFusion、PHP、Java和ASP.NET服务器来获取数据,笔者只介绍通过Java的方式来获取数据。
普通文本样例程序
下面的画面演示了通过Flex Builder构建的应用程序。输入Zip Code,例如80401,以及发货的重量,例如3,然后点击获取发货选项按钮,就可以获取并显示普通文本内容了,这些内容显示在文本区域中。

输入内容后,结果如下:

XML样例程序
下面的应用程序表示在网格中显示XML数据。

知识点
如何发送用户提供的参数给服务器端应用程序,并以普通文本和XML格式获取合适的返回值。
下面是与该应用程序相关的信息
Flex应用程序是SWF文件。
Flex是以编程为中心的创建基于Flash RIA的方式。
Flex应用程序通过使用Flash Player 9表示。
和所有的Flash RIAs一样,Flex SWF文件在客户端处理,而不是服务器端。
Flex可以连接到基于服务器的应用程序,例如ColdFusion,PHP,ASP.Net和Java。
可以通过HTTP获取普通文本和XML数据。
可以使用Web Services获取SOAP消息。
通过使用LiveCycle数据服务,也就是Flex数据服务,可以与Java远程对象(POJOs,JavaBeans,EJBs和ColdFusion组件)协同工作。
本部分介绍了如何与HTTPService共同工作。应用程序结构:

程序代码说明一
<?xml version="1.0" encoding="utf-8"?>
<!--
////////////////////////////////////////////////////////////////////////////////
// ADOBE SYSTEMS INCORPORATED
// Copyright 2007 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the
// terms of the Adobe license agreement accompanying it. If you have received this file from a
// source other than Adobe, then your use, modification, or distribution of it requires the prior
// written permission of Adobe.
////////////////////////////////////////////////////////////////////////////////
-->
<!-- Flex应用程序的根元素mx:Application,这样的程序是可以直接运行的,在这里简单的设置了
布局,以及两个背景属性。
-->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
backgroundColor="#FFFFFF"
backgroundAlpha="0">
<!-- Flex中使用ActionScript3语言时,使用mx:Script标记,在该区域内,可以书写AS3程序的方法 -->
<mx:Script>
<![CDATA[
//<!-- 引入系统内置的包,和Java引入包类似 -->
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
//<!-- 处理普通文本的方法,ResultEvent是HTTPService调用后的返回值,将返回
//值转换为普通文本,即字符串后赋值给页面的mx:Text组件 -->
public function handlePlain(event:ResultEvent):void
{
shippingOptions.text = event.result.toString();
}
//<!-- 处理错误的方法,如果发生错误,弹出警告窗口 -->
public function handleFault(event:FaultEvent):void
{
Alert.show(event.fault.faultString, "Error");
}
]]>
</mx:Script>
<!-- PHP URL:
http://examples.adobe.com/flex3/exchangingdata/text/plainHttpService.php
-->
<!-- JSP URL:
http://examples.adobe.com/flex3app/flex3samples/exchangingdata/text/PlainHttpService.jsp
-->
<!-- HTTPService的对象使用id属性进行定义,该对象可以调用HTTPService类定义的方法,例如send()
HTTPService的目标URL是用url属性定义,result属性和fault属性调用自定义的方法来实现,
通过设置result的格式,来实现返回普通文本的内容。 -->
<mx:HTTPService id="plainRpc"
url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/text/PlainHttpService.jsp"
result="handlePlain(event)"
fault="handleFault(event)"
resultFormat="text">
<!-- mx:request表示用于发送请求参数,请求参数来源于用户的输入,zipcode和weight_lb
是两个输入文本框,使用文本框的属性text来获取输入的值,这与JavaBean类似。 -->
<mx:request>
<zipcode>{zipcode.text}</zipcode>
<pounds>{weight_lb.text}</pounds>
</mx:request>
</mx:HTTPService>
<mx:Label x="56" y="32"
text="Zip Code"
width="55" height="18"
textAlign="right"
fontWeight="bold" />
<mx:Label x="56" y="58"
text="Weight"
width="55" height="18"
textAlign="right"
fontWeight="bold" />
<mx:TextInput id="zipcode"
x="130" y="32"
width="160" height="22" />
<mx:TextInput id="weight_lb"
x="130" y="58"
width="160" height="22" />
<!-- 通过点击按钮,来发送HTTPService -->
<mx:Button x="130" y="95"
label="Get Shipping Options"
click="plainRpc.send()"
width="160" height="22" />
<!-- shippingOptions在handlePlain方法中被赋值,动态显示 -->
<mx:Text id="shippingOptions"
x="56" y="150"
width="310" height="133"
fontWeight="bold" />
</mx:Application>
该应用程序请求的服务如下:
<%@page import="quickstart.ShippingCalculator,
quickstart.ShippingOption,
java.util.List" %>
<!--
////////////////////////////////////////////////////////////////////////////////
// ADOBE SYSTEMS INCORPORATED
// Copyright 2007 Adobe Systems Incorporated
// All Rights Reserved.
//
// NOTICE: Adobe permits you to use, modify, and distribute this file in accordance with the
// terms of the Adobe license agreement accompanying it. If you have received this file from a
// source other than Adobe, then your use, modification, or distribution of it requires the prior
// written permission of Adobe.
////////////////////////////////////////////////////////////////////////////////
-->
<%
ShippingCalculator calc = new ShippingCalculator();
List options;
int zipcode;
double pounds;
zipcode = Integer.parseInt(request.getParameter("zipcode"));
pounds = Double.parseDouble(request.getParameter("pounds"));
options = calc.getShippingOptions(zipcode, pounds);
for (int i = 0; i < options.size(); i++) {
ShippingOption option = (ShippingOption) options.get(i);
%><%= option.getService() %>: <%= option.getPrice() %> USD
<%
}
%>
其中,HTTPService发送请求时,通过使用mx:request包含了两个请求参数,分别为zipcode何pounds,HTTPService类以及其父类,将请求及参数进行了封装,封装成HTTP请求,发送给jsp,jsp接受请求参数,进行处理后,将处理结果写入到页面,实际上是写入到HTTP响应,然后HTTPService处理HTTP响应,将结果显示。
在JSP页面中使用了ShippingCalculator类和ShippingOption类,其中ShippingOption类为JavaBean,包含了两个属性,String类型的service和double类型的price,而ShippingCalculator作为一个工具类,通过简单的算法,进行了值得计算,并返回ShippingOption的List。
程序代码说明二
由于篇幅的原因,关于获取XML数据的代码,笔者只是将于获取普通文本的程序不同的地方进行说明。
首先,处理请求的方法不同了,HTTPService的result属性的值为handlerXml(event)方法。
//该方法将返回结果作为一个List,直接作为mx:DataGrid组件的数据提供者。
public function handleXml(event:ResultEvent):void
{
shippingOptionsGrid.dataProvider = event.result.option;
}
HTTPService所访问的请求目标也进行了变化:
<mx:HTTPService id="xmlRpc" url="http://examples.adobe.com/flex3app/flex3samples/exchangingdata/xml/xmlHttpService.jsp"
result="handleXml(event)"
fault="handleFault(event)"
resultFormat="e4x">