基于XML和JSON设计的Flex

基于XML和JSON设计的Flex2010-04-20 IT专家网薇薇本文很好的例举了如何将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﹥

这个服务器输出两个公司（公司A和公司B）三十天的一些任意的库存数据。第一个公司从$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﹥标签做日期标志，一个﹤compa﹥函数作为公司A的交易价格，﹤compb﹥标签作为公司B的交易价格。两个公司的交易价格可以随着他们自己的要求改变。

创建界面

现在，我们有一个web服务器输出交易价格，我们需要一个客户端应用程序去查看交易价格。第一个我们要创建的是一个可以简单的显示数字的网格界面。去创造Flex产品，我们从Flex Builder IDE的新菜单上面挑选Flex产品。这在图1中展示。

图1

到这一步，所有我们需要做的就是给这个产品一个名字。因为XML Data Grid的缘故，我将叫它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﹥ object给予一个精致的小的环绕网格。然后﹤mx:DataGrid﹥ object显示数据。在﹤mx:DataGrid﹥之内是一组控制网格什么数据可以显示的﹤mx:DataGridColumn﹥规范。

当我们从Flex Builder启动这个程序，我们将会看到如图2所示的画面。

图2