How add Vertical scrolling on canvas in flex? - apache-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);
}