0 Replies Latest reply on Oct 26, 2009 2:39 AM by Kalyani Tiwari

    Flex HorizontalList Dynamic Dataprovider Issue

    Kalyani Tiwari

      I have created a sample Flex application that uses HorizontalList
      component.

      Now when I use static dataprovider that is if data to display is
      static the HorizontalList component is working but when I use dynamic
      dataprovider component's scrolling doesn't work.

       

      My code for the sample app is as under:

       

      sampleHList.mxml

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

       

      <?xml version="1.0"?>

      <!-- Simple example to demonstrate the HorizontalList Control. -->

      <mx:Application

       

      xmlns:mx="http://www.adobe.com/2006/mxml"

      >

       

       

       

      <mx:Script>

      <![CDATA[

       

       

      import

      mx.collections.ArrayCollection;

       

      [

       

      Bindable

      ]

      [

       

      Embed(source="assets/album1.jpg"

      )]

       

       

      public var

      phone1:Class;

       

      [

       

      Bindable

      ]

      [

       

      Embed(source="assets/album2.jpg"

      )]

       

       

      public var

      phone2:Class;

       

      [

       

      Bindable

      ]

      [

       

      Embed(source="assets/album3.jpg"

      )]

       

       

      public var

      phone3:Class;

       

      [

       

      Bindable

      ]

      [

       

      Embed(source="assets/album4.jpg"

      )]

       

       

      public var

      phone4:Class;

       

       

       

      private var

      hListDP:ArrayCollection;

       

       

       

      private function initHList():

      void

      {

      hListDP =

       

      new

      ArrayCollection();

       

       

      var

      tempObj:Object;

       

      hList.dataProvider = hListDP;

       

       

       

      var rendererProducer:ClassFactory = new

      ClassFactory(CustomHorizontalListRenderer);

      rendererProducer.properties = {width:hList.width/2,height:hList.height*2};

      hList.itemRenderer = rendererProducer;

       

       

       

      for(var

      itemCtr:Number=1; itemCtr<=8; itemCtr++)

      {

      tempObj =

       

      new

      Object();

      tempObj.label =

       

      ""

      ;

      tempObj.thumbnailImage =

       

      "http://www.neovasolutions.com/bandticker/images/album"+[itemCtr]+".jpg";

      //url from feed

      hListDP.addItem(tempObj);

      }

       

      }

       

      ]]>

       

       

      </mx:Script>

       

       

       

      <mx:Panel title="HorizontalList Control Example" height="75%" width="75%

      "

      paddingTop="

       

      10" paddingBottom="10" paddingLeft="10" paddingRight="10"

      >

       

       

       

      <mx:Label width="100%" color="blue

      "

      text="

       

      A HorizontalList control displays items in a single row."

      />

       

       

       

      <mx:HorizontalList id="hList" rowCount="1" columnCount="2" creationComplete="initHList()" scroll="hListDP.refresh();"

      >

       

       

      <!--<mx:dataProvider>

      <mx:Array>

      <mx:Object label="Nokia 6630" icon="{phone1}"/>

      <mx:Object label="Nokia 6680" icon="{phone2}"/>

      <mx:Object label="Nokia 7610" icon="{phone3}"/>

      <mx:Object label="Nokia LGV" icon="{phone4}"/>

      </mx:Array>

      </mx:dataProvider>-->

       

       

      </mx:HorizontalList>

       

       

      </mx:Panel>

      </mx:Application>

       

       

      And here is the code for custom ItemRenderer:

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas  name="CustomHorizontalListRenderer" xmlns:mx="http://
      www.adobe.com/2006/mxml" borderStyle="solid" >
              <mx:VBox horizontalAlign="center"  verticalAlign="middle">
                      <mx:Image source="{data.thumbnailImage}" horizontalAlign="center"
      verticalAlign="middle"/>
          </mx:VBox>
      </mx:Canvas>


      Can anybody throw some light on this issue? Thanks,

      Sincerely,
      Kalyani R. Tiwari