flex 得到Java传过来的xml 显示到datagrid
最近觉得flex挺不错,做出来的东西比较漂亮 也比较绚丽,用户体验值非常高,于是就没事瞎鼓捣了下,首先我一直从事的是JAVA开发,所以么我这边搞的也是flex与Java的通信。废话有点多了,直接上图上代码。
一.安装环境
我这里用的是myeclipse 8.5集成flash builder4 插件。flex需要的就是一个sdk,所以在你本身的已有环境下,安装一个sdk,就可以了,呃,对,flash player也是肯定要安装的,不过这个一般都安装了的,我这里安装的是flash player 10.
二.开工
1. 新建一个flex项目 new--other--flex项目
2.注意图中标注的地方,下一步,新建“目标运行时”的tomcat服务器,其他默认,点击finish. 这样这个flex工程就建立起来了,目录结构如图所示。
3. 这个时候看见flex还是比较激动的,所以先来写flex的代码,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="doit()">
<fx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
//可绑定变量
[Bindable]
public var xmldata:XML;
public function success(event:ResultEvent):void{
xmldata = event.result as XML;
}
public function fail(event:FaultEvent):void{
Alert.show(event.fault.message,"得到结果时发生错误!");
}
public function doit():void{
myservice.send();
}
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<mx:HTTPService resultFormat="xml" id="myservice" url="http://localhost:8080/flex_datagrid/getdata" result="success(event)" fault="fail(event)" useProxy="false">
</mx:HTTPService>
</fx:Declarations>
<mx:Panel width="800" height="500" x="300" y="100" label="My First DataGrid---by jwd">
<mx:DataGrid width="480" height="191" x="100" dataProvider="{xmldata.user}">
<mx:columns>
<mx:DataGridColumn headerText="序号" dataField="id"/>
<mx:DataGridColumn headerText="名字" dataField="name"/>
<mx:DataGridColumn headerText="年龄" dataField="age"/>
<mx:DataGridColumn headerText="学校" dataField="school"/>
</mx:columns>
</mx:DataGrid>
</mx:Panel>
</s:Application>
关于后台传过来的xml格式
如果flex端想要XML格式的
后台Java端设置response.setContentType("text/xml");
flex通过httpservice请求 需要设置resultFormat="xml"
代码如下
private var xmlList:XMLList=new XMLList();
private var xmlListCollection:XMLListCollection=new XMLListCollection();
private var provider:ArrayCollection;
public function success(e:ResultEvent):void{
xmlResult=XML(e.result);
xmlList=xmlResult.elements("node");
xmlListCollection.source=xmlList;
provider=new ArrayCollection(xmlListCollection.toArray());
// if(e.result.root.node is ArrayCollection){
// userList = e.result.root.node as ArrayCollection;
// }else{
// userList = new ArrayCollection();
// userList.addItem(e.result.root.node);
// }
// Application.application.mydatagrid.dataProvider = provider;
<mx:HTTPService id="myservice" url="/netMonitorPro/resource/data/testNode.xml" useProxy="false" resultFormat="xml" result="success(event)" >
<mx:DataGrid id="mydatagrid" x="100" y="180" width="1100" height="150" >
<mx:columns>
<mx:DataGridColumn headerText="节点IP" textAlign="center" dataField="@id" />
<mx:DataGridColumn headerText="设备MAC" textAlign="center" dataField="@imgUrl"/>
<mx:DataGridColumn headerText="设备位置X" textAlign="center" dataField="@x"/>
<mx:DataGridColumn headerText="设备位置y" textAlign="center" dataField="@y"/>
<mx:DataGridColumn headerText="设备描述" textAlign="center" dataField="@desc">
<mx:itemRenderer>
<mx:Component>
<mx:LinkButton label="{data.desc}" textDecoration="underline" textAlign="center" click="parentDocument.urls()">
</mx:LinkButton>
</mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>
</mx:columns>
</mx:DataGrid>
这里我设置了从JAVA传过来的为xml 注释部分为后台传过来的未设置xml格式的。
下面是xml的内容
<root>
<node id="1" name="A" x="300" y="20" imgUrl="olt" desc="我们的祖国是花园" nstatus="1"/>
<node id="2" name="B.1" x="150" y="70" imgUrl="splitter" desc="我们的祖国是花园" />
<node id="3" name="B.2" x="450" y="70" imgUrl="splitter" desc="我们的祖国是花园"/>
<node id="4" name="C.1" x="75" y="120" imgUrl="onu" desc="我们的祖国是花园"/>
<node id="5" name="C.2" x="225" y="120" imgUrl="onu" desc="我们的祖国是花园"/>
<node id="6" name="C.3" x="375" y="120" imgUrl="onu" desc="我们的祖国是花园"/>
<node id="7" name="C.4" x="525" y="120" imgUrl="onu" desc="我们的祖国是花园"/>
<line id="1" fromNode="1" toNode="2" lstatus="1"/>
<line id="2" fromNode="1" toNode="3" lstatus="1" />
<line id="3" fromNode="2" toNode="4" lstatus="0"/>
<line id="4" fromNode="2" toNode="5" lstatus="0"/>
<line id="5" fromNode="3" toNode="6" lstatus="1"/>
<line id="6" fromNode="3" toNode="7" lstatus="1"/>
</root>