flex 得到Java传过来的xml 显示到datagrid

 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>