How to change 'dataprovider' using 'states'

Question

Hi All
I have 2 arrays and a HorizontalList. I want to be able to switch between the arrays using states. The states and horizontal list look like
<mx:Array id="arr1">
</mx:Array>
<mx:states>
   <mx:State name="state1">
      <mx:SetProperty name="dataprovider" target="{horizontalList}">
         <mx:value>
            arr1
         </mx:value>
      </mx:SetProperty>
   </mx:State>
   <mx:State name="state2">
      <mx:SetProperty name="dataprovider" target="{horizontalList}">
         <mx:value>
            arr2
         </mx:value>
      </mx:SetProperty>
   </mx:State>
</mx:states>
<mx:HorizontalList id="horizontalList"
  dataProvider="{arr1}"
/>
This code doesn't work, the mx:Value is probably not what I need. Any suggestions how to fix this ?
thnx
Luca

Answer 1

Hi Luca,
Try the code below...
Instead of  <mx:value>arr1</mx:value> assign the value in the SetProperty tag itself....as shown below
<mx:SetProperty name="dataProvider" target="{horizontalList}" value="{arr1}">
</mx:SetProperty>
Also you have used the name of the property as dataprovider instead of dataProvider.(P should be uppercase)
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Array id="arr1">
  <mx:Object data='bar' label="bar1"/>
  <mx:Object data='bar' label="bar2"/>
  <mx:Object data='bar' label="bar3"/>
  <mx:Object data='bar' label="bar4"/>
  <mx:Object data='bar' label="bar5"/>
  <mx:Object data='bar' label="bar6"/>
</mx:Array>
<mx:Array id="arr2">
  <mx:Object data='bar' label="bar7"/>
  <mx:Object data='bar' label="bar8"/>
  <mx:Object data='bar' label="bar9"/>
  <mx:Object data='bar' label="bar10"/>
  <mx:Object data='bar' label="bar11"/>
  <mx:Object data='bar' label="bar12"/>
</mx:Array>
<mx:states>
    <mx:State name="state1">
       <mx:SetProperty name="dataProvider" target="{horizontalList}" value="{arr1}">
       </mx:SetProperty>
    </mx:State>
    <mx:State name="state2">
       <mx:SetProperty name="dataProvider" target="{horizontalList}" value="{arr2}">
       </mx:SetProperty>
    </mx:State>
</mx:states>
<mx:HorizontalList id="horizontalList"  dataProvider="{arr1}" labelField="label" height="100"/>
<mx:HBox horizontalGap="5" top="200">
  <mx:Button id="btn1" label="Go to State1" click="this.currentState='state1'" />
  <mx:Button id="btn2" label="Go to State2" click="this.currentState='state2'" />
</mx:HBox>
</mx:Application>
Thanks,
Bhasker