Creating a vertically draggable container in Adobe Flex 3.5

Question

I am attempting to create a container which I can drag the bottom edge down to increase the height of the container. I cannot find a container that does this by default or one that will apply this functionality by simply setting a property (resizable="true").

The VDividedBox has the dragging functionality similar to what I am looking for, however, it can only be used to drag a divider that is located between two panels within its preset height, I cannot increase the height of the VDivivdedBox itself which is what I need to happen.

I have found a few examples that use a wrapper class that essentially wraps a UIComponent to implement dragability. However, I am trying to avoid adding several different classes to achieve this effect.

The source code below uses a mx:HBox to contain and display text, however, I am willing to use a different container if it allows me to implement the vertical dragability I need.

If anybody has a solution, or link to a solution, I would be greatful. ....

<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                    height="750" width="1080" xmlns:AppComponents="*"
                    creationComplete="windowedapplication1_creationCompleteHandler(event)" textAlign="center">

<mx:Script>
    <![CDATA[
        import flash.display.NativeWindow;
        import flash.display.Sprite;
        import flash.events.Event;

        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 windowedapplication1_creationCompleteHandler(event:FlexEvent):void{
            bannerText.text = str;
            verticalExpand.end();
            verticalExpand.play();
            fadeIn.play();
        }
        protected function linkButton_clickHandler(event:MouseEvent):void{
            verticalContract.end();
            verticalContract.play();
        }
        protected function expandButton_clickHandler(event:MouseEvent):void{
            verticalExpand.end();
            verticalExpand.play();
            fadeIn.play();
        }
        protected function closeBanner_clickHandler(event:MouseEvent):void{
            verticalContract.end();
            verticalContract.play();
            fadeOut.play();
        }
    ]]>

</mx:Script>

<mx:Resize id="verticalContract" target="{banner}" heightTo="0"/>
<mx:Resize id="verticalExpand" target="{banner}" heightFrom="0" heightTo="162"/>
<mx:Fade id="fadeOut" duration="600" target="{banner}" alphaFrom="1.0" alphaTo="0.0"/>
<mx:Fade id="fadeIn" duration="1200" target="{banner}" alphaFrom="0.0" alphaTo="1.0"/>

<mx:Button id="expandBanner" label="Expand" click="expandButton_clickHandler(event)" />

<mx:HBox id="banner" width="61%" height="0" borderColor="#000" 
         top="0" paddingLeft="34" paddingTop="7" paddingBottom="7"
         backgroundColor="#FAA7B0" horizontalCenter="0"
         borderStyle="solid" filters="{[new DropShadowFilter(3,90,0x996666,.8,10,10,.98)]}"
         verticalScrollPolicy="off" hideEffect="{fadeOut}"
         horizontalScrollPolicy="off"
         verticalAlign="middle">

    <mx:HBox x="167" width="741" height="146" backgroundColor="#FAA7B0"
             verticalScrollPolicy="auto" horizontalScrollPolicy="off">
        <mx:Text id="bannerText" width="725" fontSize="11"/>
    </mx:HBox>

    <mx:LinkButton label="close  x" id="linkButton" themeColor="#FAA7B0" textRollOverColor="#000"
                   fontWeight="normal" click="closeBanner_clickHandler(event)"/>
</mx:HBox>


</mx:WindowedApplication>