美丽和大脑。 Flex和Java。 或者是周围的其他方式？ 谁能说？ 我所知道的是，Flex和Java可以很好地协同工作，以创建出色的Rich Internet应用程序（RIA）。 您问什么是Flex？ Flex是一个开放源代码框架，可用于使用基于标签的MXML语言（以及ActionScript 3）来构建Flash应用程序。
观看： Jack演示的Flex for XML和JSON屏幕投射 （Quicktime MOV，33MB）
您可以从Adobe网站（ http://adobe.com/flex ）下载称为Flex Builder的Flex IDE来开始使用。 Flex Builder是一种商业产品，但是具有很长的免费试用期，可以为您提供足够的时间来确定它是否物有所值。 在本文中，我将演示如何一起使用Flex和Java。 Java将运行服务器。 Flex将在客户端上运行。 两者之间的协议实际上可以是您想要的任何协议。 但是在这种情况下，我将首先使用XML，然后使用Javascript Object Notation（JSON），因为这两个都是我们在Web 2.0世界中看到的最多的标准。
搭建服务器
XML示例从清单1所示的简单JSP文件开始。
Listing 1. xml.jsp
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2">
<jsp:directive.page import="java.text.*"/>
<jsp:directive.page import="java.lang.*"/>
<jsp:directive.page contentType="text/xml"/>
<days><jsp:scriptlet>
<![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i<=30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
]]>
</jsp:scriptlet>
<day>
<num><jsp:expression>i</jsp:expression></num>
<compa><jsp:expression>compa</jsp:expression></compa>
<compb><jsp:expression>compb</jsp:expression></compb>
</day>
<jsp:scriptlet>
<![CDATA[ }
]]>
</jsp:scriptlet>
</days>
</jsp:root> 此服务将为30天的两家公司（compa和compb）导出一些随机的库存数据。 第一家公司的价值开始于$ 1000，第二家公司的价值从$ 900开始，并且JSP代码每天都会对这些值应用随机因子。
当我从命令行使用“ curl”客户端访问服务时，我得到如下所示的内容：
% curl "http://localhost:8080/jsp-examples/flexds/xml.jsp"
<days><day><num>0</num><compa>966.429108587301</compa>
<compb>920.7133933216961</compb>
</day>...</days> 根标签是<days>标签，其中包括一组<day>标签。 这些<day>标签中的每个标签均具有日期编号的<num>标签，公司A的股价的<compa>值以及带有公司B的股价的<compb>标记。这两个值股票价格随每个请求而变化，因为它们是随机生成的。
建立介面
现在我们有了一个输出股票价格的Web服务，我们需要一个客户端应用程序来查看它。 我们将构建的第一个是简单显示数字的网格样式界面。 要创建Flex项目，我们从Flex Builder IDE的“新建”菜单中选择“ Flex项目”。 如图1所示。
图1。 ew Flex项目对话框
从这里开始，我们要做的就是为项目命名。 我将其称为 “ XML数据网格”的xmldg 。 这将创建一个xmldg.mxml文件，该文件具有 标记在其中。 我们将用清单2中的代码替换这个简单的“不做任何事”应用程序，该应用程序完成了很多工作。
Listing 2. xmldg.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout= "vertical">
<mx:XML source= " http://localhost:8080/jsp-examples/flexds/xml.jsp" id= "stockData" />
<mx:Panel title= "Stock Data" width= "100%" height= "100%" >
<mx:DataGrid dataProvider="{stockData..day}" width= "100%" height= "100%" >
<mx:columns>
<mx:DataGridColumn dataField= "compa" />
<mx:DataGridColumn dataField= "compb" />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application> 此xmldg应用程序代码具有两个主要组件。 第一个是<mx：XML>标记，它告诉Flex那里有一个XML数据源并为其提供URL。 这将创建一个名为stockData（由id属性指定）的局部变量， <mx：DataGrid>组件可以将其用作dataProvider。
其余代码只是接口。 有一个<mx：Panel>对象，它为网格提供了一个漂亮的小包装。 然后显示数据的<mx：DataGrid>对象。 在<mx：DataGrid>中包含一组<mx：DataGridColumn>规范对象，这些规范对象告诉网格要显示哪些数据。
当我们从Flex Builder启动它时，我们应该看到如图2所示的内容。
图-2。 运行中的xmldg应用程序
从这里我们可以滚动列表，调整窗口大小，并观察数据网格的更改大小。
为了增加一点过滤功能，我们将使用<mx：HSlider>控件（水平滑块）更新代码，该控件将指定网格应在哪一天开始显示数据。
例如，如果将滑块设置为6，它将仅显示第6天以后的数据。 清单3显示了此代码。
Listing 3. xmldg2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout=" vertical ">
<mx:XML source="http://localhost:8080/jsp-examples/flexds/xml.jsp" id="stockData" />
<mx:Panel title=" Stock Data " width=" 100% " height=" 100% " layout=" vertical "
paddingBottom=" 10 " paddingLeft=" 10 " paddingRight=" 10 " paddingTop=" 10 ">
<mx:HBox>
<mx:Label text= "Start Day" />
<mx:HSlider minimum= "0" maximum= "30" id= "dayslider" snapInterval ="1" />
</mx:HBox>
<mx:DataGrid dataProvider="{stockData..day.(num >= daySlider.value )}" width= " 100% " height= " 100% ">
<mx:columns>
<mx:DataGridColumn dataField= " num " headerText= " day " />
<mx:DataGridColumn dataField= =" compa " headerText= " Company A " />
<mx:DataGridColumn dataField= =" compb " headerText= " Company B " />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application> 还有更多标签，但故事仍然相同。 有一个<mx：Panel>标记，其中包含所有内容。 其中是一个<mx：HBox> （水平框）标记，其中包括<mx：Label>和<mx：HSlider>控件。 滑块用于<mx：DataGrid>的dataProvider字段中。
让我们仔细看看dataProvider属性：
{stockData..day.(num >= daySlider.value )}
这是使用ActionScript的E4X语法将<mx：DataGrid>控件的数据集缩减为仅数据中<num>值大于或等于滑块值的那些标记。 Flex足够聪明，可以监视来自滑块的更改事件，以自动为我们更新数据网格。
当我们从Flex Builder中提出该功能时，它看起来如图3所示。
图-3。 可过滤的网格
从这里我们可以调整滑块，并查看它如何影响网格中的数据。 图4显示了将滑块设置为12时发生的情况。
图-4。 滑块在数据网格上设置为12
这只是在ActionScript中使用E4X可以完成的简单示例。 E4X语法使处理XML变得如此容易，以至于您再也不想用其他任何方式处理XML。
绘图
数据网格有点无聊，至少对我而言。 我是个视觉专家。 因此，让我们在这件事上画一个图。 为此，我们创建一个名为xmlgph （用于XML图）的新项目，并用清单4中的代码替换所创建的xmlgph.mxml文件。
Listing 4. xmlgph.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout=" vertical ">
<mx:XML source=" http://localhost:8080/jsp-examples/flexds/xml.jsp " id=" stockData " />
<mx:Panel title=" Stock Data " width=" 100% " height=" 100% " layout=" vertical "
paddingBottom=" 10 " paddingLeft=" 10 " paddingRight=" 10 " paddingTop=" 10 ">
<mx:HBox>
<mx:Label text=" Start Day " />
<mx:HSlider? minimum=" 0 " maximum=" 30 " id=" dayslider " snapInterval=" 1 " />
</mx:HBox>
<mx:LineChart id=" chart " dataProvider="{stockData..day.(num >= daySlider.value )}"
width=" 100% " height=" 100% ">
<mx:series>
<mx:LineSeries xField=" num " yField=" compa " displayName=" Company A " />
<mx:LineSeries xField=" num " yField=" compb " displayName=" Company B " />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{chart}" />
</mx:Panel>
</mx:Application> 该代码与xmldg2完全一样，但是<mx：DataGrid>控件已由<mx：LineChart>控件代替，该控件将显示值的图表而不是网格。 还有一个<mx：Legend>控件，它将显示与每种颜色的线条关联的公司的名称。 两个<mx：LineSeries>对象与<mx：DataGridColumn>对象的图表等效。 这些使折线图知道在哪个轴上显示哪些数据。
当我们从Flex Builder启动它时，我们应该看到如图5所示的内容。
图-5。 折线图示例
还不错吧？ 并且由于<x：HSlider>控件仍然存在，因此我们只需移动滑块即可更改图表的开始日期。
实际上，通过一些小的更改，我们可以通过向用户在滑块中提供两个可以独立移动的拇指来允许图形显示一天的“窗口”。 清单5显示了此代码。
Listing 5. xmlgph2.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="vertical">
<mx:XML source=" http://localhost:8080/jsp-examples/flexds/xml.jsp " id=" stockData " />
<mx:Panel title=" Stock Data " width=" 100% " height=" 100% " layout=" vertical "
paddingBottom=" 10 " paddingLeft=" 10 " paddingRight=" 10 " paddingTop=" 10 ">
<mx:HBox>
<mx:Label text=" Date Range " />
<mx:HSlider minimum=" 0 " maximum=" 30 " id=" daySlider " snapInterval=" 1 "
thumbCount="2 " values="[0,30] " />
</mx:HBox>
<mx:LineChart id=" chart "
dataProvider="{stockData..day.(num>=daySlider.values[0] &&
num<=daySlider.values[1])} "
width=" 100% " height=" 100% ">
<mx:series>
<mx:LineSeries xField=" num " yField=" compa " displayName=" Company A " />
<mx:LineSeries xField=" num " yField=" compb " displayName=" Company B " />
</mx:series>
</mx:LineChart>
<mx:Legend dataProvider="{chart}" />
</mx:Panel>
</mx:Application> 我们要做的就是将thumbCount和values属性添加到<mx：HSlider>标记，并更新了<mx：DataGrid>标记中的dataProvider。 因为这是XML，所以我不得不对dataProvider中的某些实体进行编码。 当我们从Flex Builder运行此代码时，我们看到如图6所示的内容。
图-6。 窗口折线图
这将在演示的XML部分完成。 从这里，我将向您展示如何构建使用JSON服务的Flex应用程序。
构建JSON服务器
创建JSON阅读应用程序始于创建JSON数据源。 再一次，我们将依靠可信赖的JSP来构建JSON编码的数据流。 清单6显示了服务器的JSP代码。
Listing 6. json.jsp
<jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="1.2">
<jsp:directive.page import="java.text.*"/>
<jsp:directive.page import="java.lang.*"/>
<jsp:directive.page contentType="text/json"/>
[<jsp:scriptlet>
<![CDATA[
double compa = 1000.0;
double compb = 900.0;
for (int i = 0; i<=30; i++) {
compa += ( Math.random() * 100 ) - 50;
compb += ( Math.random() * 100 ) - 50;
if ( i > 0 ) out.print( "," );
]]> </jsp:scriptlet>{"compa":<jsp:expression>compa</jsp:expression>,"compb":<jsp:expres
sion>compb</jsp:expression>}<jsp:scriptlet>
<![CDATA[ }
]]>
</jsp:scriptlet>]
</jsp:root> 这与XML服务完全一样，但是我们没有创建XML标签，而是创建JSON编码的数据。
当我从命令行运行“ curl”实用程序以获取页面时，它看起来像：
% curl "http://localhost:8080/jsp-examples/flexds/json.jsp"
[{"compa":992.2139849199265,"compb":939.89135379532}, ...] 那只是Javascript客户端希望看到的那种东西。
消费JSON服务
Flex是用Flash Player的编程语言ActionScript 3编写的。 它类似于Javascript，但是缺少eval函数。 那么，如何将JSON文本转换为ActionScript数据呢？ 幸运的是，免费的ActionScript 3核心库（ http://as3corelib.googlecode.com ）随附了JSON解码器和JSON编码器。
清单7中的代码显示了运行中的JSONDecoder对象。
Listing 7. jsondg.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml " layout="vertical"
creationComplete="jsonservice.send()">
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import com.adobe.serialization.json.JSONDecoder;
private function onJSONResult( event:ResultEvent ) : void {
var data:String = event.result.toString();
data = data.replace( /\s/g, '' );
var jd:JSONDecoder = new JSONDecoder( data );
dg.dataProvider = jd.getValue();
}
]]>
</mx:Script>
<mx:HTTPService id=" jsonservice "
url=" http://localhost:8080/jsp-examples/flexds/json.jsp "
resultFormat=" text " result="onJSONResult(event)" />
<mx:Panel title=" Stock Data " width=" 100% " height=" 100% ">
<mx:DataGrid id=" dg " width=" 100% " height=" 100% ">
<mx:columns>
<mx:DataGridColumn dataField=" compa " />
<mx:DataGridColumn dataField= " compb " />
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</mx:Application> 由于服务器以文本形式返回JSON，因此我们无法使用<mx：XML>标记来获取数据。 因此，我们改为使用<mx：HTTPService >>标记。 它的工作原理很像<mx：XML>标记。 给它提供服务的URL，然后告诉它结果格式（即文本）和HTTP服务用数据回复时要调用的ActionScript函数。
在这种情况下，我将结果函数设置为在<mx：Script>标记中指定的onJSONResult代码。 此方法删除所有空格并将JSON文本传递到JSONDecoder对象。 然后，它将<mx：DataGrid>控件上的dataProvider设置为JSONDecoder返回的值。
所有这些都是完全安全的，因为ActionScript没有eval功能。 JSONDecoder类是一个简单的状态机解析器，它可以根据文本动态构建对象。 在最坏的情况下，如果JSON文本太大，可能会花费很长时间。
从这往哪儿走
Flex是基于Flash的，Flash几乎可以与任何人交谈。 它可以直接与基于SOAP的Web服务对话。 它甚至可以与诸如Adobe Message Format（AMF）之类的协议进行二进制对话。
如果这是您第一次使用Flex，则可能需要研究使用Flex构建Flash小部件，您可以将该Flash小部件发布到您的网站上，以视觉上有吸引力的方式呈现数据。 为确保Flash应用程序足够小以进行快速下载，请确保使用新的Flash Player中的运行时共享库（RSL）功能。 这使您可以在客户端中缓存大型库（如Flex库），然后在不同的Flash应用程序之间重用它们。
Flex和Java是一支强大的团队。 Java在服务器上提供了出色的后端支持。 Flex和ActionScript 3一起提供了易于编写和采用的通用跨平台GUI层。
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
