How add Vertical scrolling on canvas in flex?

Question

I have a canvas and inside that canvas have a Vgroup.i add dynamically graphic objects to that vgroup. After adding more than 4 graphic objects i enable up and down arrows.

this is my canvas code.

            <mx:Canvas id="canvas" width="120">
          <s:VGroup id="levels" width="120"/>
        </mx:Canvas>

this is whole code

<s:VGroup>
                <s:VGroup>
                    <s:HGroup>
                        <s:Spacer width="50"/>
                        <s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
                                 buttonMode="true" click="clickUpArrow()"/>
                    </s:HGroup>

                    <mx:Canvas id="canvas" width="120">
                        <s:VGroup id="levels" width="120"/>
                    </mx:Canvas>

                    <s:HGroup>
                        <s:Spacer width="50"/>
                        <s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
                                 buttonMode="true" click="clickDownArrow()" />
                    </s:HGroup>
                </s:VGroup>
        </s:VGroup>

when click on up and down arrows .. i want to scroll on canvas.How can i do that ?

i tried this one but did not work

private function clickUpArrow():void
        {
            canvas.verticalScrollPosition-=(levellength+10);
        }


        private function clickDownArrow():void
        {
            canvas.verticalScrollPosition +=(levellength+10);

        }

Answer 1

Hope this will help you,

Need to set height for your canvas component like height="120" because items are arranged in vertical order so height is mandatory for enabling vertical scrollbar.

<mx:Canvas id="canvas" height="120">
    <s:VGroup id="levels" width="120"/>             
</mx:Canvas>

Better you need to use Scroller spark component instead of Canvas (mx component) like below markup.

   <s:VGroup>
    <s:VGroup>
        <s:HGroup>
            <s:Spacer width="50"/>
            <s:Image id="prev" source="../assets/navPrev.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
                     buttonMode="true" click="clickUpArrow()"/>
        </s:HGroup>

         <s:Scroller id="scroller" height="120" width="150">            
            <s:VGroup id="levels" width="120"/>
        </s:Scroller>           

        <s:HGroup>
            <s:Spacer width="50"/>
            <s:Image id="next" source="../assets/navNext.png" mouseOver="arrowImageMouseOver(event)" mouseOut="arrowImageMouseOut(event)" visible="false"
                     buttonMode="true" click="clickDownArrow()" />
        </s:HGroup>
    </s:VGroup>
</s:VGroup>

Up and Down Arrow click handler like this,

private function clickUpArrow():void
{
    if(scroller.verticalScrollBar){
        scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10);
    }

    //scroller.verticalScrollBar.changeValueByPage(false);
}

private function clickDownArrow():void
{
    if(scroller.verticalScrollBar){
        scroller.verticalScrollBar.viewport.verticalScrollPosition -=(levellength+10);
    }

    //scroller.verticalScrollBar.changeValueByPage(true);
}