在Flex中用xml做数据源的界面操作的测试

主要解决:

1、xml外部数据的引用,可以用固定xml文件编写测试,之后可以用webservices引用后台数据。

2、对xml数据和界面控件的绑定和操作。

数据源,同在src目录下

data/invoices.xml内容:

<?xml version="1.0"?>
<invoices>
  <invoice>
    <customer>
      <firstname>Maria</firstname>
      <lastname>Smith</lastname>
    </customer>
    <items>
      <lineitem price="21.41" quantity="4">Widget</lineitem>
      <lineitem price="2.11" quantity="14">Mouse</lineitem>
      <lineitem price="8.88" quantity="3">Wrench</lineitem>
    </items>
  </invoice>
  <invoice>
    <customer>
      <firstname>John</firstname>
      <lastname>Jones</lastname>
    </customer>
    <items>
      <lineitem price="7.41" quantity="84">Mouse</lineitem>
      <lineitem price="0.91" quantity="184">Mousepad</lineitem>
    </items>
  </invoice>
</invoices>

--------------------------------------------

界面操作程序

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12" creationComplete="intoApp()">
 <mx:Button x="46" y="32" label="getxml"  click="show()"/>
 <mx:Script>
  <![CDATA[
   import mx.collections.XMLListCollection;
  
   import mx.rpc.events.ResultEvent;
   [Bindable]
   private var testxml:XML;
   
   [Bindable]
   private var myx:XML=<customer><firstname></firstname><lastname></lastname></customer>;
   
   [Bindable]
   private var customer:XMLListCollection;
   
   private function intoApp():void{

    xml1.send();//引入外部xml文件
    
   }
   
   private function resultHandle(event:ResultEvent):void{
    testxml=event.result as XML;
   }
   private function show():void{
    //showxml.text=testxml.toString();
    customer=new XMLListCollection(testxml..customer);
    showxml.text=customer.toString();
   }
   private function rxml():void{
    showxml.text=testxml.toString();
   }
   private function add():void{
    
    if (myx.firstname!="") {
    customer.addItem(myx.copy());
    }
   }
   private function del():void{
    if (showgrid.selectedIndex!=-1) {
    customer.removeItemAt(showgrid.selectedIndex);
    }
   }
  ]]>
 </mx:Script>
 
 <mx:HTTPService id="xml1" url="data/invoices.xml" resultFormat="e4x" result="resultHandle(event)"/>
 <mx:TextArea height="182" width="649" id="showxml" right="10" top="43"/>
 <mx:DataGrid id="showgrid" x="46" y="257" dataProvider="{customer}" editable="true">
  <mx:columns>
   <mx:DataGridColumn headerText="FirstName" dataField="firstname" />
   <mx:DataGridColumn headerText="LastName" dataField="lastname"/>
   
  </mx:columns>
 </mx:DataGrid>
 <mx:Button x="46" y="78" label="regetxml" id="bt2" click="{rxml()}"/>
 <mx:TextInput x="319" y="289" text="{testxml.invoice[0].customer[0].firstname}"  id="mytxt">
  <mx:focusOut>testxml.invoice[0].customer[0].firstname=mytxt.text</mx:focusOut>
 </mx:TextInput>
  

 <mx:Button x="46" y="173" label="add" id="btAdd" click="{add()}"/>
 <mx:Button x="46" y="122" label="delete" click="del()"/>
 <mx:TextInput x="46" y="225" width="102" id="t1" text="{myx.firstname}" change="myx.firstname=t1.text"/>
 <mx:TextInput x="187" y="225" width="109" id="t2" text="{myx.lastname}" change="myx.lastname=t2.text"/>
 <mx:Label x="46" y="205" text="FirstName"/>
 <mx:Label x="187" y="205" text="LastName"/>
 <mx:Label x="319" y="261" text="第一条记录FirstName"/>
 <mx:Label x="134" y="124" text="删除选择的记录"/>
 <mx:Label x="139" y="80" text="查看更新的xml文件"/>
 <mx:Label x="125" y="34" text="获取xml文件"/>
 <mx:Label x="104" y="175" text="将下面的记录添加到记录中"/>
 <mx:Label x="365" y="22" text="查看xml"/>
</mx:Application>

-----------------------------------------------------------

导航