Flex IViewport implementation

Question

Does anyone know of a link/book that might have example implementation of the IViewport interface in Flex. I'm trying to figure out how a component/container that implements this needs to behave when the scroll positions changes etc. The reference documentation doesn't make this very clear.

If anyone has more in-depth info on this it would be greatly helpful.

thanks

Answer 1

As mentioned in the comments, take a look at the GroupBase implementation of it. Essentially IViewport methods on GroupBase delegate to the corresponding methods on the GroupBase's layout (an instance of LayoutBase, which is also worth a read). Setting GroupBase's verticalScrollPosition and horizontalScrollPosition (which is what the Spark ScrollBars do when you move them) ultimately result in LayoutBase updating the scrollRect property on your component's DisplayObject superclass to those values which correspond to pixel offsets from the left and top of the component.

For info on the scrollRect property check out these links:

• http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html#scrollRect
• http://help.adobe.com/en_US/as3/dev/WS5b3ccc516d4fbf351e63e3d118a9b90204-7e17.html

As LayoutBase and all its subclasses are all built to work with GroupBase you may want to just extend GroupBase for your component. If you don't want to use a LayoutBase subclass at all then this should surmise what you need to implement to have your component work with a Spark ScrollBar:

contentWidth / contentHeight

These are your scrollable component's full width and height in pixels if it wasn't being clipped / scrolled - this is where a ScrollBar reads its maximum value from and should be set after your component has measured/calculated its full height.

verticalScrollPosition / horizontalScrollPosition

This is the number of pixels out of the full contentWidth / Height that you have scrolled. It is set by the appropriate vertical / horizontal scrollbar and your implementation should result in your component setting its own scrollRect to a value like

scrollRect = new Rectangle( horizontalScrollPosition, verticalScrollPosition, width, height);

getHorizontalScrollPositionDelta / getVerticalScrollPositionDelta

These will return the amount to move for a particular navigation action such as page up / page down. For instance, you want the view to scroll three rows when the user hits the down arrow on their keyboard. When the user does this, the scrollbar will call

yourComponent.getVerticalScrollPositionDelta(NavigationUnit.DOWN)

Your implementation should work out the height of three rows and return it. The scrollbar will then update your verticalScrollPosition value with the updated value which in turn causes the scrollRect to update as described for that property above. The set of different units you will need to account for can be found here: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/core/NavigationUnit.html

clipAndEnableScrolling

You don't need to worry about this unless you want the component to be able to enable or disable its ability to scroll at runtime in which case check out LayoutBase.updateScrollRect()