Changing the position of the scroll bars in a spark List

The default spark List skin wraps the the underlying DataGroup with a Scroller component to easily provide scrolling functionality. Custom skinning the Scroller component isn’t very flexible; you can custom skin each scrollbar to change the visuals on them, but you can’t easily reposition them. In these cases it usually makes more sense to get rid of the Scroller and hook up the scrollbars directly.

One example of this is when you want a List that provides the ability to scroll up and down but want to move the buttons away from the right side. For example, placing the scroll buttons above and below the List content:

View Source

This was the approach I followed to get this behavior:

  1. Copy the default ListSkin.mxml into CustomListSkin.mxml
  2. Remove the Scroller (apply its top/left/right/clipAndEnableScrolling to the DataGroup below it)
  3. Remove the references to the scroller in the script block at the top (see SDK-23653)
  4. Add a VScrollBar and set its viewport to the underlying DataGroup
  5. Position the VScrollBar to stretch to the entire size by setting top/left/bottom/right to 0
  6. Increase top/bottom on the DataGroup to allow some space for the buttons
  7. Copy the default VScrollBarSkin.mxml into CustomVScrollBarSkin.mxml
  8. Tweak the VScrollBar skin to get rid of the track and the thumb and make the buttons 100% width
  9. Change the minHeight on CustomListSkin to something smaller (optional: this is to allow for the following example)

Given this skin you can create a List that only shows one item at a time by setting requestedRowCount=1 on the layout:

View Source

Note: This sample requires Flex SDK 4.0.0.10957 or higher. You can get the latest SDK builds from opensource.adobe.com.

10 thoughts on “Changing the position of the scroll bars in a spark List”

  1. This is just what I needed. I wanted to have a iphone-style scrollbar on the right that is transparent until you hover over it with the mouse.

    I couldn’t get the list items to go right up to the right hand side–they always left room for the scrollbar even if it was transparent. But with the code above, I was able to get it working just as I need.

    Thanks!

  2. Hi

    Brilliant post. I used the above example to create a stepped/paged horizontal list for a mobile application. I extended the code so that custom buttons can be used and placed anywhere in the app. I have packaged the app in such a way that it runs in the browser just like it would run on a mobile phone – with draggable functionality and all:), so that you can see the demo:
    http://bbishop.org/blog/?p=529

    Thanks again

    Brian Bishop

  3. Thanks for Steven and Brian for this great post, was very help ful.

    Thanks ,

    Vikram

  4. Hi Steven. Just posted the following on StackOverflow. Perhaps you can help out:

    I have modified the scroller skin for my VScrollBar per Steven Shongrunden’s excellent article so there are just the up and down buttons, no scroller bar.

    Now I want to modify the behavior of the scroller so that it scrolls one-page per click. Even better, I’d like to have the scrolling animate with easing, i.e. not jump from page to page, but scroll with animation.

    The documentation for the ScrollBarBase http://www.flex-component.com/asdoc/kcdualslider/spark/components/supportClasses/ScrollBarBase.html suggests a number of methods which should provide a means to achieve this, but I can’t find any examples of how to use these excellent methods and properties:

    animatePaging(newValue:Number, pageSize:Number):
    Animates the operation to move to newValue.

    button_buttonDownHandler(event:Event):
    Handles a click on the increment or decrement button

    button_buttonUpHandler(event:Event):
    Handles releasing the increment or decrement button

    decrementButton:Button
    An optional skin part that defines a button that, when pressed, steps the scrollbar up.

    incrementButton:Button
    An optional skin part that defines a button that, when pressed, steps the scrollbar down.

    My hunch is that I need to interrupt the button_buttonUp/DownHandlers for decrementButton and incrementButton and call animatePaging, but I really have no idea how to do this. These spark skins really remain quit mysterious to me in spite of having written tons of AS3 and successfully modified quite a few skins.

    Looking forward to any insight!

    Thanks!

  5. @Andrew – I haven’t tried this so I’m mostly just thinking out loud, but you might want to try thinking about writing a custom layout for your viewport. This layout might extend VerticalLayout, but override LayoutBase.getVerticalScrollPositionDelta() in the case of UP/DOWN navigation units. Or depending on what you are looking for maybe you would override getVerticalScrollPositionDelta() instead. See the documentation in LayoutBase and the following example to learn more:

    http://flexponential.com/2010/03/06/learn-how-to-create-a-simple-virtual-layout-in-flex-4/

    Then I’m hoping looking at Evtim’s article on layout animations might be useful from there:
    http://evtimmy.com/2010/04/two-examples-of-layout-animations/

  6. Hi Steven,
    Thanks for sharing such a useful post. It helped me a lot. I implemented it on HScrollBar and I putted both the button on right side and commented thumb and track part. Now can see just half of the component in matter of height. My be I need to update HScrollbar explicitly somewhere. I hope you got my problem. Any help appreciated.

Comments are closed.