Adding a listener to a VerticalScrollBar in flex

Question

I am attempting to set an EventListener to this verticalScrollBar. However, the verticalScrollBar is not being initiated when my attempt is executed and thus is 'null' disallowing me to add the EventListener. I am not sure where and when to add this listener so that I can access its postion attribute. Please help.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                   xmlns:s="library://ns.adobe.com/flex/spark" 
                   xmlns:mx="library://ns.adobe.com/flex/mx"
                   backgroundColor="#9B9B9B"
                   height="750" width="1080"
                   creationComplete="windowedapplication1_creationCompleteHandler(event)" >

<fx:Script>
    <![CDATA[
        import mx.controls.VScrollBar;
        import mx.events.FlexEvent;

        var str1:String = "This is a shorter test string.";

        var str:String = "\r\n  Version 1.1.0.3 This new version includes:\r\n  * Added numerous new icons " +
            "to support different file types in the list screens.\r\n  * Made changes that allowing search " +
            "index to remain on the server and not have it download to the desktop.  This will save people from " +
            "having to download the search index, but they will have to be connected to the server to do a search.  " +
            "On small projects this is not an issue, but larger projects should keep the search index on the " +
            "server.  This is configurable by project.\r\n  * Added Support for Adobe Acrobat 11.\r\n  * Added " +
            "Network Version Support – MySmartPlans will now allow you to store your files anyplace on your hard " +
            "drive or on a network.  Multiple people can now point to the same place on a network, eliminating " +
            "redundant downloads.  Users will need to be connected to the network to see their information.  " +
            "This is computer independent, so a user’s desktop computer could store files on the server and " +
            "their laptop could store files locally.  This new option appears under the Help dropdown in MySmartPlans." +
            "\r\n  * Added features so PIMs can add links to external documents in the calendar and can email " +
            "out .ics files from the Admin screen and attach files to the emails that go out.\r\n  * Fixed problem " +
            "with User Profile and errors caching email and password information.\r\n  * Added %USERNAME% support " +
            "in open URL to include email addresses.  This will support auto logins.\r\n  * Added support for web " +
            "pages to link to external reports from the local center browser option.\r\n  * Added ability to add " +
            "links to calendar events which will become clickable on the desktop version.\r\n\r\nIf you wish to " +
            "be a beta tester for our Mac version please email [email protected]\r\n\r\n"


        protected function closeBannerButton_clickHandler(event:MouseEvent):void{
            verticalContract.end();
            verticalContract.play();
        }

        // banner.verticalScrollBar is always null so it wont let me 
        // set the listener !!!  
        private function init():void{
            if (banner.verticalScrollBar != null){
                banner.verticalScrollBar.addEventListener(Event.CHANGE, verticalScrollBar_Listener);
            }
        }

        protected function bannerCloseButton_clickHandler(event:MouseEvent):void{
            verticalContract.end();
            verticalContract.play();
        }

    ]]>
</fx:Script>


<fx:Declarations>
    <mx:Resize id="verticalContract" target="{banner}" heightTo="0"/>
    <mx:Resize id="verticalExpand" target="{banner}" heightTo="135"/>
</fx:Declarations>

<!-- #@#@#@#@#@#@#@#@#@# -->
<mx:HBox id="banner" width="68%" height="0"
         paddingTop="5"  paddingBottom="5" cornerRadius="3" 
         paddingRight="6" horizontalCenter="0" 
         borderStyle="outset" backgroundColor="#FAA7B0"  
         color="#00FFFFFF" horizontalAlign="center" 
         verticalAlign="bottom" horizontalGap="0" 
         paddingLeft="58" visible="true"
         verticalScrollBar=""
         creationComplete="init();">
    <mx:Text width="650" color="#000" id="bannerText"  
             fontSize="14" fontWeight="bold" fontFamily="vardana" 
             fontStyle="normal" textDecoration="none" textAlign="center">
    </mx:Text>  
    <mx:LinkButton label="close  x" id="closeBannerButton" 
                   color="#000" enabled="true"  
                   fontWeight="bold" fontFamily="Verdana" fontSize="11" textAlign="right" 
                   paddingBottom="4" paddingRight="1" alpha="1.0" click="bannerCloseButton_clickHandler(event)"/>
</mx:HBox>
<!-- #@#@#@#@#@#@#@#@#@# -->


<mx:Button id="expandBannerButton" label="Exapnd" 
           click="verticalExpand.end(); verticalExpand.play()"/>

<mx:Text id="textBox" width="135" height="135" paddingTop="400">

</mx:Text>

Answer 1

You need to set verticalScrollPolicy="ScrollPolicy.ON" in your banner declaration.