0 Replies Latest reply on Nov 22, 2010 11:40 AM by roestigraben

    Binding data when using xml data files

    roestigraben

      Hello,

      I am pretty new to Flex4 and hope you hang on with my question. MAny thanks:

       

      I built an application first with PHP connection into a database which essentially listed IP of my company in a grid.

      One could filter the IP depending of technology, type of Ip and so on.

      When clicking in the grid, the details with many more fileds would apprear. This was working niceley as I had my services defined and needed only to drag services in the right place and add here and there some changes in the code

       

      Now, I wanted to do the same with an xml file instead of a mySQL database so to deploy it a little easier.

      I have the grid and the filtering working nicely.

       

      But I cannot create the data binding for the details.

       

      Below is the code. See the line before last where I tested if I could access to the  descriptipn fuield in my arrayCollection (coming from my xml)

       

      CAn anyone help me, please

       

      many thanks in advance and best regards

       

      Peter

       

       

      <?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"

         applicationComplete="myServ.send()" width="900" height="500">

       

       

       

      <fx:Script>

      <![CDATA[

      import mx.collections.ArrayCollection;

      import mx.controls.Alert;

      import mx.events.ListEvent;

      import mx.rpc.events.FaultEvent;

      import mx.rpc.events.ResultEvent;

       

      import spark.events.TextOperationEvent;

       

       

      [Bindable]

      private var myIPList:ArrayCollection;

       

      protected function myServ_faultHandler(event:FaultEvent):void

      {

      Alert.show("Something went wrong", "Cannot load data");

      }

       

       

      protected function myServ_resultHandler(event:ResultEvent):void

      {

      if(event.result.test.IP is ArrayCollection){

      this.myIPList = event.result.test.IP as ArrayCollection;

      }else{

      var buffer:ArrayCollection = new ArrayCollection([event.result.test.IP]);

      this.myIPList = buffer;

      this.searchInput.enabled = false;

      this.searchInputTechnology.enabled = false;

      this.searchInputProvider.enabled = false;

      }

      }

       

       

      // serach for IP

       

       

      protected function searchInput_changeHandler(event:TextOperationEvent):void

      {

      this.myIPList.filterFunction = filterFunc;

      this.myIPList.refresh();

      }

       

      private function filterFunc(item:Object):Boolean

      {

      if(String(item.IP).toLowerCase().indexOf(this.searchInput.text.toLowerCase()) > -1){

      return true;

      }else{

      return false;

      }

      }

       

       

       

       

       

      //  Search for Technology

       

      protected function searchInputTechnology_changeHandler(event:TextOperationEvent):void

      {

      this.myIPList.filterFunction = filterFuncTechnology;

      this.myIPList.refresh();

      }

       

       

      private function filterFuncTechnology(item:Object):Boolean

      {

      if(String(item.Technology).toLowerCase().indexOf(this.searchInputTechnology.text.toLowerCa se()) > -1){

      return true;

      }else{

      return false;

      }

      }

       

       

      //  Search for Provider

       

      protected function searchInputProvider_changeHandler(event:TextOperationEvent):void

      {

      this.myIPList.filterFunction = filterFuncProvider;

      this.myIPList.refresh();

      }

       

       

      private function filterFuncProvider(item:Object):Boolean

      {

      if(String(item.Provider).toLowerCase().indexOf(this.searchInputProvider.text.toLowerCase() ) > -1){

      return true;

      }else{

      return false;

      }

      }

       

       

       

       

       

      protected function myDG_changeHandler(event:ListEvent):void

      {

      Alert.show("I Clicked. It should now be possible to see details, damned");

      }

       

      ]]>

      </fx:Script>

      <fx:Declarations>

       

      <s:HTTPService id="myServ" url="IP.xml" fault="myServ_faultHandler(event)" result="myServ_resultHandler(event)"/>

       

       

      </fx:Declarations>

       

       

       

      <mx:DataGrid id="myDG" change="myDG_changeHandler(event)" x="37" y="134" width="814" height="159" dataProvider="{this.myIPList}">

      <mx:columns>

      <mx:DataGridColumn headerText="IP" dataField="IP"/>

      <mx:DataGridColumn headerText="short description" dataField="detail"/>

      <mx:DataGridColumn headerText="type" dataField="type"/>

      <mx:DataGridColumn headerText="Provider" dataField="Provider"/>

      <mx:DataGridColumn headerText="Technology" dataField="Technology"/>

      </mx:columns>

      </mx:DataGrid>

       

       

       

       

       

      <s:HGroup x="33" y="74" width="152" height="41" verticalAlign="middle">

      <mx:Spacer width="100%">

       

      </mx:Spacer>

      <s:Label text="IP"/>

      <s:TextInput id="searchInput" change="searchInput_changeHandler(event)" width="103"/>

      </s:HGroup>

       

      <s:HGroup x="686" y="74" width="153" height="41" verticalAlign="middle">

      <mx:Spacer width="100%">

       

      </mx:Spacer>

      <s:Label text="Technology"/>

      <s:TextInput id="searchInputTechnology" change="searchInputTechnology_changeHandler(event)" width="94"/>

      </s:HGroup>

       

      <s:HGroup x="519" y="74" width="153" height="41" verticalAlign="middle">

      <mx:Spacer width="100%">

       

      </mx:Spacer>

      <s:Label text="Provider"/>

      <s:TextInput id="searchInputProvider" change="searchInputProvider_changeHandler(event)" width="94"/>

      </s:HGroup>

       

       

       

       

       

       

       

      <s:Label x="135" y="38" text="IP Road Map" fontSize="29" color="#524E4E"/>

       

       

      <s:TextArea id="myText" x="37" y="315" width="204" text="{this.myIPList}" height="164"/>

       

       

       

      <mx:Image x="33" y="18" width="74" height="57" id="STLogo" source="file:/Users/peterhirt/Pictures/stlogo.png"/>

       

       

       

       

      </s:Application>

       

       

      Here at tzhe end I append one record out of the xml files I used

      <?xml version="1.0" encoding="utf-8" ?>

       

      <test>

       

       

          <IP>

              <IP>USB2 PHY</IP>

              <detail>single port </detail>

              <type>USB</type>

              <Provider>TR&amp;D</Provider>

              <Technology>65lp</Technology>

              <maturity_status>MAT20</maturity_status>

              <status_date>Q4/09</status_date>

              <next_Maturity>MAT30</next_Maturity>

              <next_Date></next_Date>

              <HED>y</HED>

              <HED_criticality>2</HED_criticality>

              <HED_MAT20_request>Q4/09</HED_MAT20_request>

              <CCI></CCI>

              <CCI_criticality></CCI_criticality>

              <_CCI_MAT20_request></_CCI_MAT20_request>

              <APG></APG>

              <APG_criticality></APG_criticality>

              <APG_MAT20_request></APG_MAT20_request>

              <STE></STE>

              <STE_criticality></STE_criticality>

              <STE_MAT20_request></STE_MAT20_request>

              <IMS></IMS>

              <IMS_criticality></IMS_criticality>

              <IMS_MAT20_request></IMS_MAT20_request>

          </IP>