Showing the hand cursor on a Flex scrollbar

Posted by Dennis on Jul 30, 2008 in ActionScript, Flex • 5 comments

Here’s a little trick/hack to get the hand cursor to appear on the up and down arrows of a standard Flex scrollbar. In order to do this you need to create a class that subclasses a class that has a scrollbar attached to it. In this case a TextArea:


public class CustomTextArea extends TextArea

The class mx.controls.TextArea extends mx.core.ScrollControlBase. This class contains the verticalScrollbar and horizontalScrollBar. We can reference these in our code. For instance:


verticalScrollBar.visible = false;

When you take a deeper look into the mx.controls.scrollClasses.Scrollbar class you’ll find the downArrow and upArrow properties:


    /**
     *  @private
     *  The up arrow button.
     */
    mx_internal var upArrow:Button;

    /**
     *  @private
     *  The down arrow button.
     */
    mx_internal var downArrow:Button;

They’re defined in the mx_internal namespace and normally you can’t access these properties. There is a way to do it though (in the CustomTextArea class defined above):


import mx.core.mx_internal;

....

use namespace mx_internal;

verticalScrollBar.mx_internal::upArrow.useHandCursor = true;
verticalScrollBar.mx_internal::upArrow.buttonMode = true;
verticalScrollBar.mx_internal::downArrow.useHandCursor = true;
verticalScrollBar.mx_internal::downArrow.buttonMode = true;

Only use this when you don’t have any other options though. I think Adobe uses this namespace to mark things that they might change in future releases.



Tags: , ,


5 comments

» Comments RSS Feed
  1. simon on Sep 25, 2009, 4:47 am:

    Hi i’m trying to get this to work with no success. Flex gives error: Access of undefined property verticalScrollBar;

    This is my class:

    package {
    import mx.controls.TextArea;
    import mx.core.mx_internal;

    public class CustomTextArea extends TextArea
    {
    public function CustomTextArea()
    {
    super();
    }
    use namespace mx_internal;
    verticalScrollBar.mx_internal::upArrow.useHandCursor = true;
    verticalScrollBar.mx_internal::upArrow.buttonMode = true;
    verticalScrollBar.mx_internal::downArrow.useHandCursor = true;
    verticalScrollBar.mx_internal::downArrow.buttonMode = true;
    }
    }

    Is this correct?

    Tnx,
    simon

  2. Dennis on Sep 25, 2009, 11:21 am:

    Hi Simon,
    Which Flex SDK are you using?

  3. simon on Sep 25, 2009, 1:52 pm:

    I’m using Flex 3.4.

    I would like to eventually implement this to tilelist scrollbar. I couldn’t find anything around the web and i’m still learning about classes.

    Tnx for your help.

  4. breakmachine on Feb 15, 2010, 5:32 pm:

    I got it working like this (works on all components with vertical and horizontal scrollbars):

    package
    {
    import mx.containers.Canvas;
    import mx.core.mx_internal;

    public class CanvasWithScrollCursor extends Canvas
    {
    public function CanvasWithScrollCursor ()
    {
    super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    if (this.verticalScrollBar) {
    if (!verticalScrollBar.mx_internal::upArrow.useHandCursor) {
    use namespace mx_internal;
    verticalScrollBar.mx_internal::upArrow.buttonMode = true;
    verticalScrollBar.mx_internal::downArrow.useHandCursor = true;
    verticalScrollBar.mx_internal::downArrow.buttonMode = true;
    verticalScrollBar.mx_internal::scrollThumb.useHandCursor = true;
    verticalScrollBar.mx_internal::scrollThumb.buttonMode = true;
    }
    }

    if (this.horizontalScrollBar ) {
    if (!horizontalScrollBar.mx_internal::upArrow.useHandCursor) {
    use namespace mx_internal;
    horizontalScrollBar.mx_internal::upArrow.useHandCursor = true;
    horizontalScrollBar.mx_internal::upArrow.buttonMode = true;
    horizontalScrollBar.mx_internal::downArrow.useHandCursor = true;
    horizontalScrollBar.mx_internal::downArrow.buttonMode = true;
    horizontalScrollBar.mx_internal::scrollThumb.useHandCursor = true;
    horizontalScrollBar.mx_internal::scrollThumb.buttonMode = true;
    }
    }
    }

    }
    }

  5. breakmachine on Feb 15, 2010, 5:42 pm:

    revised version:

    package
    {
    import mx.containers.Canvas;
    import mx.core.mx_internal;

    public class CanvasScrollCursor extends Canvas
    {
    public function CanvasScrollCursor()
    {
    super();
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
    {
    super.updateDisplayList(unscaledWidth, unscaledHeight);

    if (this.verticalScrollBar) {
    if (!verticalScrollBar.mx_internal::upArrow.buttonMode) {
    use namespace mx_internal;
    verticalScrollBar.mx_internal::upArrow.buttonMode = true;
    verticalScrollBar.mx_internal::downArrow.buttonMode = true;
    verticalScrollBar.mx_internal::scrollThumb.buttonMode = true;
    }
    }

    if (this.horizontalScrollBar ) {
    if (!horizontalScrollBar.mx_internal::upArrow.buttonMode) {
    use namespace mx_internal;
    horizontalScrollBar.mx_internal::upArrow.buttonMode = true;
    horizontalScrollBar.mx_internal::downArrow.buttonMode = true;
    horizontalScrollBar.mx_internal::scrollThumb.buttonMode = true;
    }
    }
    }

    }
    }

Leave a comment