Scrolling a Flex List control horizontally

29 Responses to Scrolling a Flex List control horizontally

1. s'ergo says:

   March 12, 2008 at 9:37 am

   very nice trick.
   i have another question about TileList and scrolling (actually two):
   - how can i control amount of scrolling pixels, say vertical? by default scroll occurs for one line (i.e. scroll for one item along), but what i should to do if i want to scroll for three line?
   - how can i use liveScrolling properties in TileList? simply set its to true change nothing…
   anyway thank you, do a big deal.

   Reply
2. burn says:

   May 19, 2008 at 3:48 am

   Hi there,

   I had a similar problem in an app of mine in which a list’s data provider is being received from an http service. For some strange reason the list did show all received data but without adapting the required maxHorizontalScrollPosition. so what worked fine for me was listening to the dataprovider’s collectionChange event and setting the list’s maxHorizontalScrollPosition according to the measured list width.

   cheers, burn

   [...]

   [...]

   Reply
3. burn says:

   May 19, 2008 at 3:51 am

   ok, my example code got cut away. but the magic happens when you calculate the required horizontal width with measureWidthOfItems(0,0) and assign the measured value minus the lists’s width to your list’s maxHorizontalScrollPosition.

   burn

   Reply
4. Vitalik says:

   February 23, 2009 at 8:12 am

   i have a problem in scrolling for all application … it’s dont show all region of application it cut from top and left

   Reply
5. goodness says:

   May 11, 2009 at 12:56 pm

   Follow up on burn’s post. Setting the maxHorizontalScrollPosition to the list’s column width actually tells the list that it can scroll a full list-width beyond where it should be allowed to (at least in the latest flash). That’s why you need to subtract out the list’s width from the max width.

   Reply
6. Veena Pandit says:

   July 23, 2009 at 4:36 pm

   How do I position (dock) the horizontal scroll list component to the bottom of the web page like a task bar?

   Thanks in advance.

   Reply
   • Peter deHaan says:

     July 23, 2009 at 5:34 pm

     Veena Pandit,

     If you are using an absolute layout, just set the bottom property to 0.
     If you are using a vertical layout, i’d just create a <VBox/> and set it’s height to 100% and then add the horizontal scroll list below that. Then add all your content to the VBox instead of the Application directly.

     Peter

     Reply
7. Veena Pandit says:

   July 24, 2009 at 1:06 pm

   I am trying to populate the list with a horizontalScrollList.addChild(item) dynamically. Nothing is getting added to the list.

   Reply
   • Peter deHaan says:

     July 25, 2009 at 10:10 am

     Veena Pandit,

     You would add you item to the dataProvider itself, not use the addChild() method:

     <?xml version="1.0" encoding="utf-8"?>
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
             layout="vertical"
             verticalAlign="middle"
             backgroundColor="white">
      
         <mx:Script>
             <![CDATA[
                 protected function btn_click(evt:MouseEvent):void {
                     var value:String = new Date().toString();
                     horizontalScrollList.dataProvider.addItem({label:value});
                 }
             ]]>
         </mx:Script>
      
         <mx:Button id="btn"
                 label="add item to horizontal list"
                 click="btn_click(event);" />
      
         <mx:HorizontalList id="horizontalScrollList"
                 labelField="label"
                 itemRenderer="mx.controls.Text"
                 horizontalScrollPolicy="on"
                 width="100%"
                 columnWidth="80"
                 height="100"
                 rowCount="1">
             <mx:dataProvider>
                 <mx:ArrayCollection />
             </mx:dataProvider>
         </mx:HorizontalList>
      
     </mx:Application>

     Peter

     Reply
8. Veena Pandit says:

   July 25, 2009 at 12:03 pm

   Thanks!
   How do I add eventListeners to the individual items in the horizontalList?

   Reply
   • Peter deHaan says:

     July 25, 2009 at 3:57 pm

     Veena Pandit,

     It depends on what you’re trying to do, but typically you’d listen for the change event on the HorizontalList control and handle your code there. For example, the following code shows how you can determine when the user has selected a new item in the HorizontalList control and the show an Alert dialog:

     <?xml version="1.0" encoding="utf-8"?>
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
             layout="vertical"
             verticalAlign="middle"
             backgroundColor="white">
      
         <mx:Script>
             <![CDATA[
                 import mx.events.ListEvent;
                 import mx.controls.Alert;
      
                 protected function horizontalScrollList_change(evt:ListEvent):void {
                     var selectedLabel:String = horizontalScrollList.itemToLabel(horizontalScrollList.selectedItem);
                     Alert.show(selectedLabel, "You selected:");
                 }
             ]]>
         </mx:Script>
      
         <mx:HorizontalList id="horizontalScrollList"
                 labelField="label"
                 columnWidth="120"
                 columnCount="5"
                 height="100"
                 rowCount="1"
                 change="horizontalScrollList_change(event);"
                 verticalAlign="middle">
             <mx:dataProvider>
                 <mx:ArrayCollection>
                     <mx:Object label="Flex 3" />
                     <mx:Object label="Flex Builder 3" />
                     <mx:Object label="Flash CS4" />
                     <mx:Object label="ColdFusion 8" />
                     <mx:Object label="Fireworks CS4" />
                     <mx:Object label="Dreamweaver CS4" />
                     <mx:Object label="Photoshop CS4" />
                 </mx:ArrayCollection>
             </mx:dataProvider>
         </mx:HorizontalList>
      
     </mx:Application>

     Peter

     Reply
9. Veena Pandit says:

   July 25, 2009 at 4:44 pm

   I added an event listener to each button before I added it to the horizontalScrollList. I have an event listener so:

   handleButtonClick(event:MouseEvent):void {)

   how do I change the code above so that, I call the eventListener handleButtonClick when a button is clicked in the horizontalScrollList.

   Thanks,

   Veena

   Reply
   • Peter deHaan says:

     July 25, 2009 at 11:56 pm

     Veena Pandit,

     I’d probably do something like the following, or create a custom item renderer:

     <?xml version="1.0" encoding="utf-8"?>
     <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
             layout="vertical"
             verticalAlign="middle"
             backgroundColor="white">
      
         <mx:Script>
             <![CDATA[
                 import mx.events.ListEvent;
                 import mx.controls.Alert;
      
                 protected function horizontalScrollList_change(evt:ListEvent):void {
                     var itemData:Object = evt.itemRenderer.data;
                     this[itemData.clickFunc].call(null, itemData);
                 }
      
                 private function flexBtn(evt:Object):void {
                     Alert.show("You clicked the Flex button.", evt.label);
                 }
      
                 private function flexBldBtn(evt:Object):void {
                     Alert.show("You clicked the Flex Builder button.", evt.label);
                 }
      
                 private function flashBtn(evt:Object):void {
                     Alert.show("You clicked the Flash Authoring button.", evt.label);
                 }
             ]]>
         </mx:Script>
      
         <mx:HorizontalList id="horizontalScrollList"
                 itemRenderer="mx.controls.Button"
                 backgroundAlpha="0.0"
                 borderSides=""
                 useRollOver="false"
                 columnWidth="120"
                 columnCount="5"
                 height="100"
                 rowCount="1"
                 change="horizontalScrollList_change(event);"
                 verticalAlign="middle">
             <mx:dataProvider>
                 <mx:ArrayCollection>
                     <mx:Object label="Flex 3" clickFunc="flexBtn" />
                     <mx:Object label="Flex Builder 3" clickFunc="flexBldBtn" />
                     <mx:Object label="Flash CS4" clickFunc="flashBtn" />
                 </mx:ArrayCollection>
             </mx:dataProvider>
         </mx:HorizontalList>
      
     </mx:Application>

     Peter

     Reply
     • Peter deHaan says:

       July 25, 2009 at 11:57 pm

       For lots of excellent examples on custom item renderers, see Alex Harui’s blog at http://blogs.adobe.com/aharui/item_renderers/.

       Peter
10. Veena Pandit says:

    July 26, 2009 at 5:53 am

    Hi Peter,

    There isn’t one about HorizontalLists in there though. I just need to know how to propagate the event from the container(HorizontalList, the ListEvent) to the individual Object that was clicked on(the button in the list,the MouseClick Event).

    Thanks,

    Veena

    Reply
11. Veena Pandit says:

    July 26, 2009 at 7:16 am

    Sorry did not see the earlier post. I am trying it out now

    Reply
12. Veena Pandit says:

    July 26, 2009 at 8:37 am

    Peter,

    I like your example above, except that I am adding objects to the horizontalList at runtime.
    and my dataProvider is defined so in the HorizontalList:

    So I dont know how to hook to the original event listener in the object in the horizontalList.

    Thanks in advance,

    Veena

    Reply
13. Veena Pandit says:

    July 26, 2009 at 8:41 am

    Sorry I did not see the note below:
    Let me try again:
    

    Reply
14. Veena Pandit says:

    July 26, 2009 at 8:42 am

    Hmmm….Not sure how to post the code.

    Reply
    • Peter deHaan says:

      July 26, 2009 at 1:25 pm

      Veena Pandit,

      You need to escape the < tags as &lt; and the > tags as &gt;.

      Peter

      Reply
15. Veena Pandit says:

    July 26, 2009 at 4:58 pm

    My dataProvider is defined like this:

    <mx:dataProvider>
        <mx:ArrayCollection/>
    </mx:dataProvider>

    My objects are populated at runtime. So from the example above

    <mx:dataProvider>
        <mx:ArrayCollection>
            <mx:Object label="Flex 3" clickFunc="flexBtn" />
            <mx:Object label="Flex Builder 3" clickFunc="flexBldBtn" />
            <mx:Object label="Flash CS4" clickFunc="flashBtn" />
        </mx:ArrayCollection>
    </mx:dataProvider>

    I cannot use the clickFunc

    Also my event listener has a parameter that is of type MouseEvent.Click not of type Object.

    (I added the semicolons; too bad you can’t delete a post);

    Reply
    • Peter deHaan says:

      July 26, 2009 at 5:02 pm

      How are you populating the items in the data provider at runtime?

      Peter

      Reply
16. Veena Pandit says:

    July 27, 2009 at 4:48 am

    taskBar.dataProvider = new ArrayCollection(); in the init method
    taskBar.dataProvider.addItem(item); at runtime.

    Reply
    • Peter deHaan says:

      July 27, 2009 at 7:11 am

      And what is an “item”? How are you attaching your listeners to it?

      Peter

      Reply
17. Veena Pandit says:

    July 27, 2009 at 9:23 am

    item is a subclass of button.

    item.addEventListener(MouseEvent.CLICK,handleClick);

    where handleClick is a event handler method

    Reply
18. Veena Pandit says:

    July 27, 2009 at 12:40 pm

    Could you also post a small example on how to add objects to the horizontalList dynamically?

    Thanks for your time.

    Reply
    • Peter deHaan says:

      July 28, 2009 at 7:05 am

      Veena,

      My example above shows how you can add items to the HorizontalList data provider dynamically using ActionScript:
      http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/#comment-4725

      Peter

      Reply
19. veena pandit says:

    July 28, 2009 at 7:29 am

    Cool! Given this example, how do I capture the MouseEvent(MouseEvent.CLICK) when an individual item in the
    list is clicked. I have seen the clickFunc for when you add items in a static fashion.

    Reply
    • Peter deHaan says:

      July 28, 2009 at 8:10 am

      Veena,

      My earlier example shows how you can listen for changes in the selected item on a HorizontalList control by using the change event: http://blog.flexexamples.com/2008/01/26/scrolling-a-flex-list-control-horizontally/#comment-4730

      Or, you could use the earlier solution of using some clickFunc type approach which calls different methods depending on which specific item was clicked.

      Or, you could look at creating a custom item renderer which may do what you want.

      Peter

      Reply