Custom scrolling for a flex component
by Tony on Nov.14, 2008, under Flex
Second!
Alright, it’s been like 20 hours since my first post and I don’t have any comments yet! What’s going on?!
Seriously though - here is the content:
This week I’ve been working on some custom flex components for the new Stock20 site. One is a tracks list and one is a songs list. The tracks list scrolls horizontally, and the songs list scrolls vertically.
The songs list is built using a VBox, so it’s custom scroll componets were fairly easy to build, as I had the verticalScrollPosition and maxVerticalScrollPosition properties to work with. The tracks list component was an HBox, but I needed custom scroll bars, so I had to use the scrollRect proprty and thus couldn’t use the horizontalScrollPosition properties.
Here is the main function for the custom scrolling in the songs list:
private function scrollToSelected(cNum:int):void{ var curObj:DisplayObject = mainVBox.getChildAt(cNum); var cY:int = curObj.getBounds(mainVBox).y; var nsp:int = 0; if (cY + curObj.height > mainVBox.height) { nsp = cNum * curObj.height - (mainVBox.height - curObj.height); } else if (cY < 0) { nsp = cNum * curObj.height; } else { return; } if (nsp <= 0) { mainVBox.verticalScrollPosition = 0; } else if (nsp >= mainVBox.maxVerticalScrollPosition) { mainVBox.verticalScrollPosition = mainVBox.maxVerticalScrollPosition; } else { mainVBox.verticalScrollPosition = nsp; } }
In the function above, the cNum property is the index number of the control we are trying to scroll to. The function then gets that controls DisplayObject so it can getBounds. It then uses that information along with the height information of the parent container (mainVBox) to figure out if it’s visible or not, and then change the verticalScrollPosition so that it is visible.
The scrollToSelected function in the tracks list is similar, excet I had to replace the verticalScrollPosition stuff with the scrollRect information. Here is it’s code:
private function scrollToSelected(cNum:int):void{ var rect:Rectangle = tracksList.scrollRect; var curObj:DisplayObject = tracksList.getChildAt(cNum); var cY:int = curObj.getBounds(tracksList).x; var nsp:int = 0; if (cY + curObj.width > rect.x + rect.width) { nsp = cNum * curObj.width - (rect.width - curObj.width); } else if (cY < rect.x) { nsp = cNum * curObj.width; } else { return; } if (nsp <= 0) { rect.x = 0; } else if (nsp >= tracksList.width) { rect.x = tracksList.width - rect.width; } else { rect.x = nsp; } tracksList.scrollRect = rect; }
content v0.1
by Tony on Nov.13, 2008, under Uncategorized
Here is the infamous “first post”.
“Hopefully not the last.”
I’ll get more content and links up asap (meaning, don’t hold your breath).
