5 Replies Latest reply on Sep 10, 2010 10:40 AM by lionh

    Simple Binding Issues

    bobbybeag

      Hi All

      I am having some problems with my data binding and I hope somebody can help me.

      I have created a really simple example for what I am trying to achieve, which you can see below.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" horizontalAlign="center" verticalAlign="middle" initialize="init()">

      <!-- Controller -->
      <mx:Script>
        <![CDATA[
          import mx.collections.XMLListCollection;
          import mx.binding.utils.BindingUtils;
         
          protected var _tally:Number = 3;
         
          //RAW XML
          [Bindable]protected var _model:XML = new XML("<model><option title='Option 1'/> <option title='Option 2'/> <option title='Option 3'/> </model>");

          //This should bind the children to the XMLLList BUT DOES NOT
          [Bindable]protected var _list:XMLList = new XMLList(_model.children());
         
          //This Binds the _list to the _collection.  Combos prefer their DP in the form of a collection
          [Bindable]protected var _collection:XMLListCollection = new XMLListCollection(_list);
         
         
          //ADDS NEW DATA TO MODEL
          protected function updateModel():void
          {
           _tally++;
           _model.appendChild(new XML("<option title='Option " + _tally + "'/>"))
           trace(_model)
          }
         
        ]]>
      </mx:Script>

      <!-- View -->
      <mx:Panel title="Combo Binding Test" >
        <mx:ComboBox id="_combo" width="100%" labelField="@title" dataProvider="{_collection}" />
        <mx:Text id="_text" height="100" width="300" selectable="false" text="{_model}" />
        <mx:ApplicationControlBar width="100%" dock="true">
         <mx:Button label="Update Model" click="updateModel()" />
        </mx:ApplicationControlBar>
      </mx:Panel>

      </mx:Application>

       

      (I hope that has formatted ok!)

      When I preview this I can see that the bindings have put the data into the correct places but when I update the XML with more data, the view does not update.

      2 problems exist:

      1.       When I remove the 'children()' from the _list.dataProvider, the ComboBox updates using the bindings, but I need to read the children, so the bindings fail.

      2.       Despite the model being defined as bindable, the text NEVER updates.

       

      Why bind to the children()?

      I have created a custom component that will receive different sets of data from its parent.  Within this custom component lies a ComboBox that needs to display the children of the data.  If I cant bind to the children,  I may have to hardcode a unique component each instance it is used.

       

      For example, once instance of data could be

      <locations>

                      <option title="Hampshire"/>

                      <option title="Warwickshire"/>

                      <option title="Yorkshire"/>

      </locations>

       

      Another could be:

      <stock>

                      <option title="Hammer"/>

                      <option title="Drill"/>

                      <option title="Spanner"/>

      </stock>

       

      So it is important for me to bind to the children(). 

       

      Is this possible and if not, does anyone know how I will get round this issue?

      Any advice on this would be greatly appreciated.

        • 1. Re: Simple Binding Issues
          lionh

          Hi,

           

          The PropertyChangeEvent asociated with metadata [Bindable] on _model will never be dispatched because it dispatch it only and only if the xml object instance changes.

           

          So... in your method updateModel, do that:

           

          //ADDS NEW DATA TO MODEL
          protected function updateModel() : void {
               _tally++;

                    var xml : XML = new XML(_model);
               xml.appendChild(new XML("<option title='Option " + _tally + "'/>"))
               _model = xml;
               trace(_model)
          }

           

          Bye!

          1 person found this helpful
          • 2. Re: Simple Binding Issues
            bobbybeag Level 1

            Hi LionH,

             

            Thanks for that - it has sorted of the issues however it did not solve the issue of binding XML children to a combox.

             

            Thanks anyway LionH

            • 3. Re: Simple Binding Issues
              lionh Level 1

              Use labelFunction property of the combobox.

              • 4. Re: Simple Binding Issues
                bobbybeag Level 1

                Hi LionH

                 

                I can see how you would use the labelFunction to reference a particular attribute within the XML for each XML node however the problem here is that the attribute has not changed, but the number of options available to the comboBox has changed.

                 

                The XML is changing from:

                 

                <locations>

                                <option title="Hampshire"/>

                                <option title="Warwickshire"/>

                                <option title="Yorkshire"/>

                </locations>

                 

                To:

                 

                <locations>

                                <option title="Hampshire"/>

                                <option title="Warwickshire"/>

                                <option title="Yorkshire"/>

                               <option title="Cornwall"/>

                </locations>

                 

                Can you explain further how the labelFunction would help here

                 

                Thanks.

                • 5. Re: Simple Binding Issues
                  lionh Level 1

                  Hi,

                   

                  sorry for my previous answer, the issue isn't on your labelField but:

                   

                  I rearrange your code:

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                  horizontalAlign="center" verticalAlign="middle"
                                  initialize="init()">

                   

                      <!-- Controller -->
                      <mx:Script>
                          <![CDATA[
                              import mx.collections.ArrayCollection;
                              import mx.collections.XMLListCollection;
                              import mx.binding.utils.BindingUtils;

                   

                              protected var _tally : Number = 3;

                   

                              //RAW XML
                              [Bindable]
                              protected var _xml : XML = new XML("<model><option title='Option 1'/> <option title='Option 2'/> <option title='Option 3'/> </model>");

                   

                              //ADDS NEW DATA TO MODEL
                              protected function updateModel() : void {
                                  _tally++;
                                  var xml : XML = new XML(_xml);
                                  xml.appendChild(new XML("<option title='Option " + _tally + "'/>"))
                                  _xml = xml;
                                  trace(_xml)
                              }

                   

                              protected function dataprovider(xml : XML) : XMLList {
                                  var ret : XMLList = _xml.option;
                                  return ret;
                              }
                          ]]>
                      </mx:Script>

                   

                      <!-- View -->
                      <mx:Panel title="Combo Binding Test">
                          <mx:ComboBox id="_combo" width="100%" labelField="@title"
                                       dataProvider="{dataprovider(_xml)}"/>
                          <mx:Text id="_text" height="100" width="300" selectable="false"
                                   text="{_xml}"/>
                          <mx:ApplicationControlBar width="100%" dock="true">
                              <mx:Button label="Update Model" click="updateModel()"/>
                          </mx:ApplicationControlBar>
                      </mx:Panel>

                   

                  </mx:Application>

                   

                  you can see that if you bind a method and the instance of one of its parameters change, then the method will be recalled. I delete 2 of your 3 global field. Only the xml (your model) needs to be alocated in memory.

                   

                  Bye,

                   

                  Lionel