Flex使用json和xml数据交互

FlexFlexFlexFlex与JSONJSONJSONJSON及XMLXMLXMLXML的互操作作者JackJackJackJackHerringtonHerringtonHerringtonHerrington译者张凯峰Flex之于Java，就像美丽之于大脑，或者还有别的说法？谁能告诉我？我所知道的是，Flex和Java真的是能配合得很好，能创建出难以置信的富Internet应用（RIA）。你会问Flex是什么？Flex是一个开源框架，你可以通过基于标签的MXML语言（以及ActionScript3）来构建Flash应用。请观看：JackJackJackJack有关FlexFlexFlexFlex与JSONJSONJSONJSON及XMLXMLXMLXML互操作的演讲（QuickTime格式，33MB）。你可以从Adobe的站点下载（）FlexIDE即所谓FlexBuilder，并由此开始你的开发之旅。FlexBuilder是个商业产品，但它有很长的免费试用阶段，能让你有足够时间想清楚是不是值得掏这个钱。在这篇文章中，我会演示如何一起使用Flex和Java。Java会运行在服务器端，而Flex运行在客户端。这两端间的通信协议可以是任何你想要的协议。但在这里，我会先使用XML，然后再使用JSON，因为这两种技术是我们在Web2.0的世界里最常见的。创建服务器代码XML示例由列表1中显示的简单JSP文件开始：列表1.xml.jspjsp:rootxmlns:jsp==1.2jsp:directive.pageimport=java.text.*/jsp:directive.pageimport=java.lang.*/jsp:directive.pagecontentType=text/xml/daysjsp:scriptlet![CDATA[doublecompa=1000.0;doublecompb=900.0;for(inti=0;i=30;i++){compa+=(Math.random()*100)-50;compb+=(Math.random()*100)-50;]]/jsp:scriptletdaynumjsp:expressioni/jsp:expression/numcompajsp:expressioncompa/jsp:expression/compacompbjsp:expressioncompb/jsp:expression/compb/dayjsp:scriptlet![CDATA[}]]/jsp:scriptlet/days/jsp:root这个服务会每三十天为两家公司（compa和compb）导出一些随机的股票数据。第一家公司的数值从1000美元开始，第二家从900美元开始，而JSP代码会每天为这两个数值增加一个随机数。当我从命令行使用curl客户端去访问这个服务时，我获得的是下面这样的结果：%curl根标签是days标签，它包含了一个day标签的集合。每个day标签都有一个num标签来表示天数，一个compa值来表示公司A的股票价格，以及compb值来表示公司B的股票价格。两只股票的数值随着每次请求而不同，因为它们是随机生成的。构建界面现在我们已经有了一个web服务来输出股票的价格，我们还需要一个客户端应用来展现它。我们要构建的第一个界面是表格风格的界面，用它来简单的显示数字。为了创建Flex项目，我们在FlexBuilderIDE的新建菜单中选择FlexProject。显示如图1：图1.1.1.1.新FlexFlexFlexFlex项目对话框在这我们要做的就是给项目起个名字。我把它叫做xmldg，意思是XML数据表格。这样就会创建出一个名叫xmldg.mxml的文件，其中只包含一个空白标签。下面我会使用列表2中的代码来代替这个空白标签。列表2.xmldg.mxml?xmlversion=1.0encoding=utf-8?mx:Applicationxmlns:mx==verticalmx:XMLsource==stockData/mx:Paneltitle=StockDatawidth=100%height=100%mx:DataGriddataProvider={stockData..day}width=100%height=100%mx:columnsmx:DataGridColumndataField=compa/mx:DataGridColumndataField=compb//mx:columns/mx:DataGrid/mx:Panel/mx:Applicationxmldg应用程序代码有两个主要的组件。第一个是mx:XML标签，它告诉Flex这是个XML数据源，并提供了URL。这样就会创建一个叫做stockData（由id属性指定）的局部变量，而mx:DataGrid组件可以把它当作dataProvider来使用。代码的剩余部分就是界面了。mx:Panel对象为表格提供了一个简洁的包装。而mx:DataGrid用来显示数据。在mx:DataGrid中，是一串mx:DataGridColumn对象，来告诉表格显示什么数据。如果我们从FlexBuilder运行这个界面，你就会看到像图2的这个样子：图2.2.2.2.xmldgxmldgxmldgxmldg应用运行界面我们可以拉动滚动条，改变窗口大小，并且看到数据表格也会改变大小。如果需要添加一点过滤的功能，我们就需要使用mx:HSlider控件来更新代码，为它添加一个水平的滑块，来指定表格从哪一天开始显示数据。比如，如果我们设置滑块到6，它就会只显示从第六天开始的数据。代码如列表3所示：列表3.xmldg2.mxml?xmlversion=1.0encoding=utf-8?mx:Applicationxmlns:mx==verticalmx:XMLsource==stockData/mx:Paneltitle=StockDatawidth=100%height=100%layout=verticalpaddingBottom=10paddingLeft=10paddingRight=10paddingTop=10mx:HBoxmx:Labeltext=StartDay/mx:HSliderminimum=0maximum=30id=dayslidersnapInterval=1//mx:HBoxmx:DataGriddataProvider={stockData..day.(num=daySlider.value)}width=100%height=100%mx:columnsmx:DataGridColumndataField=numheaderText=day/mx:DataGridColumndataField==compaheaderText=CompanyA/mx:DataGridColumndataField==compbheaderText=CompanyB//mx:columns/mx:DataGrid/mx:Panel/mx:Application还有其他的一些标签，但规则基本上还是一样的。mx:Panel标签可以包含所有内容。其中可以是mx:HBox（水平格）标签，并且box还包含着mx:Label和mx:HSlider控件。slider用于mx:DataGrid的dataProvider字段。让我们来更进一步看看dataProvider属性：{stockData..day.(num=daySlider.value)}这里使用的是ActionScript的E4X语法来减少mx:DataGrid控件的数据集合，使其只包含那些num值大于或等于滑块值的标签。Flex非常智能，它能观察到滑块的变化事件，并自动更新数据表格。当我们从FlexBuilder运行这个界面时，它看起来就像是图3这样：图3.3.3.3.可过滤性网格我们可以调整滑块的位置，并查看到表格中的数据如何变化。图4显示的是我把滑块设到12时的样子：图4.4.4.4.滑块设为12121212时的显示界面这只是个使用ActionScript中E4X的简单例子。E4X语法使得处理XML变得非常容易，以至于你不会再愿意使用任何其他办法来处理XML了。画图表数据表格有点让人厌倦了，至少对我来说是这样。我喜欢有图像的。那么让我们来干点什么——在界面上放置一张图表。我们创建了一个新的名叫xmlgph（意思是XML图表）的项目，并用列表4中的代码来代替自动生成的xmlgph.xml文件。列表4.xmlgph.mxml?xmlversion=1.0encoding=utf-8?mx:Applicationxmlns:mx==verticalmx:XMLsource==stockData/mx:Paneltitle=StockDatawidth=100%height=100%layout=verticalpaddingBottom=10paddingLeft=10paddingRight=10paddingTop=10mx:HBoxmx:Labeltext=StartDay/mx:HSlider?minimum=0maximum=30id=dayslidersnapInterval=1//mx:HBoxmx:LineChartid=chartdataProvider={stockData..day.(num=daySlider.value)}width=100%height=100%mx:seriesmx:LineSeriesxField=numyField=compadisplayName=CompanyA/mx:LineSeriesxField=numyField=compbdisplayName=CompanyB//mx:series/mx:LineChartmx:LegenddataProvider={chart}//mx:Panel/mx:Application代码就跟xmldb2一样，但mx:LineChart控件替代了mx:DataGrid控件，用来显示一张数值图表，而不是一个表格。另外还有个mx:Legend控件来显示不同颜色线