为XML和JSON设计的Flex

本文很好的示范了如何将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

　　从这里我们可以滚动列表，改变窗口的大小，可以看见数据网格格式的改变。

　　增加一个小的筛选功能，我们将使用< mx:HSlider>控制来更新代码，一个横向滑动将详细说明网格应该从那个数据开始显示。

　　举例，如果我们设置slider是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>控制。Slider在< mx:DataGrid>dataProvider文件中被使用。


　　让我们仔细看一下dataProvider特性。

　　{stockData..day.(num >= daySlider.value )}

　　这是使用ActionScript's E4X语法来削减数据集的< mx:DataGrid>控制，仅当这些标签数据中的< num>函数大于或者等于slider值时有效。Flex有足够的能力监测slider自动升级数据网格给我们带来的事态的变化。

　　但我们把它从Flex Builder中提出，将如图3所示。

　　

　　图3

　　到这里我们可以调节slider，观察它如何在网格中影响数据。图4显示的是我将slider设置为12的结果。

　　

　　图4

　　这只是关于在ActionScript中使用E4X能做的事情中的一个简单的例子。E4X语法使你处理XML如此简单，以至于你不会再想使用别的办法。


　　图表

　　数据网格有一些令人厌烦，至少对我来说是这样的。我是一个被视觉主导的人。所以让我们在这个上面展开图表。要实现这个目的，我们要创造一个新的项目替换xmlgph，叫做xmlgph(XML图表)。使用表4的代码创建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> objects与< mx:DataGridColumn> objects对于制图表有相同的意义。它们让图表知道数据应该显示在数轴的什么位置是合适的。

　　当我们从Flex Builder启动这个程序，我们将会看见如图5显示的内容。

　　

　　图5

　　还不坏，不是吗?而且因为< x:HSlider>控制仍然在运行，我们可以仅仅通过移动slider来改变图表开始的day。


　　事实上，只需要进行一些小的改变，我们就可以允许图表通过slider里面的两个thumbs显示一个days窗口提供给用户，他们可以独立移动。代码如表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>


　　 所有我们需要去做的就是用< mx:HSlider>标签增加thumbCount和价值，以及在< mx:DataGrid>标签中升级dataProvider。因为这是XML，我不得不在dataProvider中编码。当我们从Flex Builder中运行它,我们会看见如图6所示的内容。

　　

　　图6

　　这是XML的部分演示。从这里，我将向你展示如何建造一个Flex应用程序消耗JSON服务器。


　　创建JSON服务器

　　创建一个可读的JSON应用程序需要以创建一个JSON数据源为前提。再次，我们将求助于可信赖的JSP去创建JSON代码数据流。服务器的JSP代码如表6。

　　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服务器，但是我们创建一个JSON 代码数据代替创建一个XML标签。

　　当我从命令行运行'curl'有效，会得到如下页面：

　　% curl "http://localhost:8080/jsp-examples/flexds/json.jsp"

　　[{"compa":992.2139849199265,"compb":939.89135379532}, ...]

　　这正是Javascript客户端想看见的。

　　消耗JSON服务器

　　Flex 在ActionScript 3中用Flash player的程序设计语言书写。这与Javascript相似，但是他缺乏eval 功能。我们如何在ActionScript data中运行JSON text?谢天谢地，免费的ActionScript 3中心实验室(http://as3corelib.googlecode.com)带来了JSON decoder 和 a JSON encoder插件。

　　表7中的代码显示的是运行的JSONDecoder object。

　　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，然后限制结果的格式(i.e. text)，当HTTP 服务用数据回复时候ActionScript开始运行。

　　这种情况下，我为JSONResult代码设置终函数，然后我可以在< mx:Script>标签中列出表。这种方法可以考虑到JSONDecoder object上任何的空白以及JSON 文本。然后在< mx:DataGrid>控制上设置dataProvider，取得JSONDecoder的返回值。

　　所有这些操作都是完全安全的，因为ActionScript上没有eval功能。JSONDecoder类是一个从工作文本中创建objects的简单的状态分析器。最坏的情况就是因为JSON 文本过大，导致它为了得到结果需要运行很长时间。

未完，原文地址：http://www.evget.com/zh-CN/Info/ReadInfo.aspx?id=9135