5 Replies Latest reply on Dec 5, 2007 10:32 AM by paulfeuer

    ArrayCollection Data Binding NOT WORKING!

    Tikis_Mikis
      Hello I am building an application that displays a list of water filters in a List component. I am retrieving the data from a DB with a PHP/AMFPHP service. I can get all the data I need and the list is displayed perfectly.

      here is a sample array returned by PHP:

      Array(
      [0] => Array('filter_id'=>'1', 'filter_set_name'=>'Filter 1', 'description'=>'nice filters!');
      [1] => Array('filter_id'=>'2', 'filter_set_name'=>'Filter 2', 'description'=>'nice filters!');
      [2] => Array('filter_id'=>'3', 'filter_set_name'=>'Filter 3', 'description'=>'nice filters!');
      )

      I am able to susscessfully display the filter_set_name in the list component and what I wish to do is when user clicks on a row in the list box the display form on the right hand side is autopopulated with the object data user has clicked. I have tried several methods but nothing yet.

      Here is the mxml app:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="initApplication()"
      layout="absolute"
      width="700"
      height="100%">

      <mx:Script source="FilterSetManagerScript.as" />

      <mx:Binding source="filterSetList.selectedItem as ArrayCollection" destination="selectedFilterSet" />

      <mx:Panel width="100%" height="100%" layout="absolute" title="Filter Set Manager Version 1.0">

      <mx:Label x="10" y="2" text="Filter Sets" fontSize="13" fontWeight="bold"/>

      <mx:List id="filterSetList"
      height="300" width="330" x="10" y="25"
      dataProvider="{phpData}"
      labelFunction="showFilterSetName" />

      <mx:Label x="360" y="2" text="Filter Set Details" fontSize="13" fontWeight="bold"/>
      <mx:Label x="360" y="28" text="Name:"/>
      <mx:TextInput x="454" y="26" id="filterSetName" width="216" text="{selectedFilterSet.getItemAt(0).toString()}"/>
      <mx:Label x="362" y="88" text="Description:"/>
      <mx:TextArea x="454" y="87" height="103" width="216"/>
      <mx:Button x="603" y="198" label="Update"/>

      </mx:Panel>

      </mx:Application>

      ###################################################################
      ###################################################################
      ###################################################################

      Here is the FilterSetManagerScript.as:

      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import flash.net.Responder;

      [Bindable]
      public var phpData:ArrayCollection;
      [Bindable]
      private var selectedFilterSet:ArrayCollection;

      // new remoting connection object
      public var gateway:RemotingConnection;

      public function initApplication():void
      { //Alert.show('hi');
      gateway = new RemotingConnection(" http://project/web/backend_dev.php/gateway/amfphp");
      gateway.call("FilterSets.getFilterSets", new Responder(onResult, onFault));
      }

      public function onResult(result:Array):void
      {
      //phpData = result;
      phpData = new ArrayCollection(result);
      //trace(phpData);
      //filterList.dataProvider = phpData;

      //var myArray:Array = result;
      //for (var i:String in phpData) {
      // trace (phpData ['username']);
      //}
      }

      public function onFault(fault:String):void
      {
      trace(fault);
      }

      private function showFilterSetName(data:Object):String
      {
      // return the filter name
      return data['filter_set_name'];
      }

      ###################################################################
      ###################################################################
      ###################################################################

      I wont post the RemmotingConnection.as file because that part of my app works perfectly. As you can tell in this part of the xml file ->

      <mx:TextInput x="454" y="26" id="filterSetName" width="216" text="{selectedFilterSet.getItemAt(0).toString()}"/>

      I just DONT iknow how to correctly bind the object to each textInput when a user clicks on an item in the list.

      HELP! thank you very much!
        • 1. Re: ArrayCollection Data Binding NOT WORKING!
          batmitra Level 1
          hi
          i don't use and don't know how to use PHP or AMFPHP so the only thing i saw that can help you is this:

          1st- you need to have a click event on your list so that flex knows which item has been choosed

          2nd- on your click event function you assign the text tou yout textinput fields like this

          filterSetName.text=selectFilterSet.getItemAt(0).filter_set_name; //the last part is your field that comes from your array.

          • 2. Re: ArrayCollection Data Binding NOT WORKING!
            paulfeuer
            to expand on the the previous post, you need to add a listener on your list and assign your "selectedFilterSet" variable inside that listener. the ListEvent should have a "selectedItem" or maybe it's itemRenderer.data that has the item in it.
            • 3. Re: ArrayCollection Data Binding NOT WORKING!
              Tikis_Mikis Level 1
              Ok.....I did what you suggested. I will post the answer here for others to see thank you very much!
              • 4. Re: ArrayCollection Data Binding NOT WORKING!
                Tikis_Mikis Level 1
                Ok so I made some changes to the code but the most important part of it is this function:
                //need a variable declaration at top:
                [Bindable]
                private var filterSetObj:Object = new Object();

                // event handler function:
                private function changeHandler(event:Event):void
                {
                filterSetObj = Object(List(event.currentTarget).selectedItem);
                }

                this is the mxml for the list:

                <mx:List id="filterSetList"
                height="300" width="330" x="10" y="25"
                change="changeHandler(event)"/>

                <mx:TextInput x="454" y="26" id="filterSetName" width="216" text="{filterSetObj.filter_set_name}"/>

                Also for anyone trying to display a certaing value from an array collection in a List component you will need this function:

                public function onFilterSetsResult(result:Array):void
                {
                phpData = new ArrayCollection(result);

                //phpData = new ArrayCollection( ArrayUtil.toArray(event.result) );
                for(x=0; x<phpData.length; x++) {
                phpData[x].label = phpData[x].filter_set_name;
                }

                filterSetList.dataProvider = phpData;
                }

                This function will set the label to whaterver you choose from phpData to an item in the List component.

                Thanks guys!
                • 5. Re: ArrayCollection Data Binding NOT WORKING!
                  paulfeuer Level 1
                  this might work too:
                  <mx:List id="filterSetList"
                  height="300" width="330" x="10" y="25"
                  change="{filterSetObj=filterSetList.selectedItem}"/>