Adobe Flex学习笔记（11）- Flex和…

普通情况下我们使用HttpService只是很简单地新建一个Object然后把它Send出去，然后诸如a=1&b=2的的url请求就被发到了Sever端，然后Sever端又默默地把请求转化….在原始时代，这样做好像没什么不妥，甚至在一个Form里面包含大于7条的请求也是乖乖地使用

Var o:Object = new Object();

o.a = 1;

o.b = 2;…

o.z=26;

这样来解决。

嗯。一条请求如此，如果我要同时删除10条数据呢?难不成，发10次请求?失败的话，我们是撤销，还是重发?要是同一个页面要添加10条类似的数据和几条完全不同的数据呢?你的HttpService又应该如何设计?用For循环的事件链吗?失败了又怎么办?设置标志位好像很好玩~

但是xml出现了，我们为什么不把xml在Flex的华丽持续延续下去，并且在服务器端进行更加舒坦的xml解析?我们来延续xml的华丽吧！

话不多说，我们新建一个工程，来尝试一下xml的威力…

我们先很不责任地拖一个Hbox，里面嵌套五个Vbox。每个Vbox里面又有三个TextInput。

然后分别给它们命名为name1,count1,total1,第二个vbox里面就为name2,count2,total2…依此类推。

然后我们在MX:Application的标签下定义一个XML的数据模型并且对里面的内容进行数据绑定…

<mx:XML id="AddXML" format="e4x">

       <request>

              <item id="1">

                     <name>{name1.text}</name>

                     <count>{count1.text}</count>

                     <TotalPrice>{TotalPrice1.text}</TotalPrice>

              </item>

              <item id="2">

                     <name>{name2.text}</name>

                     <count>{count2.text}</count>

                     <TotalPrice>{TotalPrice2.text}</TotalPrice>

              </item>

              <item id="3">

                     <name>{name3.text}</name>

                     <count>{count3.text}</count>

                     <TotalPrice>{TotalPrice3.text}</TotalPrice>

              </item>

              <item id="4">

                     <name>{name4.text}</name>

                     <count>{count4.text}</count>

                     <TotalPrice>{TotalPrice4.text}</TotalPrice>

              </item>

              <item id="5">

                     <name>{name5.text}</name>

                     <count>{count5.text}</count>

                     <TotalPrice>{TotalPrice5.text}</TotalPrice>

              </item>

       </request>

</mx:XML>

跟着我们加入<script>字段:时间有限，请参照下面代码:

      

<mx:Script>

              <![CDATA[

                     import mx.rpc.http.mxml.HTTPService;  

                     public var abs:HTTPService;

                     public function init():void

                     {

                            abs = new HTTPService();

                            abs.url="http://192.168.0.1:88/Web/admin/xml";

                            abs.method="POST";

                            abs.contentType="application/xml";    

                            abs.send(AddXML);

                     }

              ]]>

       </mx:Script>

需要注意的就是我这里使用了POST的方法和设定了它的contentType为XML。设定了这个的话我们就可以对Sever端发送XML数据了。

TREE

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="src/index.html">
   
    <mx:Script>
        <![CDATA[

            import mx.collections.XMLListCollection;
           
            [Bindable]
            private var company:XML =

              <list>
                <department title="Finance" code="200">
                    <employee name="John H"/>

                    <employee name="Sam K"/>
                </department>
                <department title="Operations" code="400">

                    <employee name="Bill C"/>
                    <employee name="Jill W"/>
                </department>                   
                <department title="Engineering" code="300">

                    <employee name="Erin M"/>
                    <employee name="Ann B"/>
                </department>                               
              </list>;
           
            [Bindable]

            private var companyData:XMLListCollection = new XMLListCollection(company.department);
           
            private function treeLabel(item:Object):String
            {

                var node:XML = XML(item);
                if( node.localName() == "department" )

                    return node.@title;
                else
                    return node.@name;
            }
            private function addEmployee():void

            {
                var newNode:XML = <employee/>;
                newNode.@name = empName.text;
                var dept:XMLList =company.department.(@title == "Operations");
                if( dept.length() > 0 ) {

                    dept[0].appendChild(newNode);
                    empName.text = "";
                }
            }

            private function removeEmployee():void
            {
                var node:XML = XML(tree.selectedItem);
                if( node == null ) return;
                if( node.localName() != "employee" ) return;
           
                var children:XMLList = XMLList(node.parent()).children();
                for(var i:Number=0; i < children.length(); i++) {

                    if( children[i].@name == node.@name ) {
                        delete children[i];
                    }

                }
            }
        ]]>
    </mx:Script>
   
    <mx:Tree id="tree" top="72" left="50" dataProvider="{companyData}"
        labelFunction="treeLabel"
         height="224" width="179"/>

    <mx:HBox>       
        <mx:Button label="Add Operations Employee" click="addEmployee()"/><mx:TextInput id="empName"/>

    </mx:HBox>
    <mx:Button label="Remove Selected Employee" click="removeEmployee()"/>   
</mx:Application>

<script type="text/javascript" id="wumiiRelatedItems"> </script>