Flex, working with.

This post is the last page of a 4-post series on “Extending ScrollControlBase.” It describes the completed widget, along with providing a checklist on how to properly implement a component extending ScrollControlBase. Here’s a list of links to the other pages in this article:

1. Its Internals and Design Philosophy
2. Displaying the Scrollbars
3. Getting Scrolling to Work
4. The Workflow

Implementing scrolling is an intuitive process, involving merely a mask, updateDisplayList, and an event listener. We’ve implemented from scratch, a scrolled image viewer, but the code is simple enough to be expanded to scroll any arbitrary content (Matter of fact, we’ve actually gone out of the way to make it be image-specific).

To summarize, here’s the generic workflow you’ll use to implement ScrollControlBase in your own components:

1. Extend ScrollControlBase - extend the class, set the policies to any defaults as you see fit.
2. Implement commitProperties - Clean up and remove any old content. Add the new content, and set its mask to maskShape
3. Implement measure - Get the default size of your content, and add viewMetrics to it, assigning the calculated width and height to measuredWidth and measuredHeight, respectively.
4. Implement updateDisplayList - Draw your component if necessary. Its position is given by viewMetrics‘ left and top properties, subtracting any current horizontalScrollPosition and verticalScrollPosition. Finally, call setScrollBarProperties(totalColumns, visibleColumns, totalRows, visibleRows) with the intended visible area, along with the total visible area.
5. Implement scrollHandler - Check if 1.) your content is valid, 2.) this ScrollEvent isn’t from a TextField and thus incompatible with your component, and 3.) that this is a finished scroll if liveScrolling is false. If so, then position your content according to the new positions.

And that’s it. If you find out scrolling is expensive, then it’s probably due to alot of content having to be redrawn. ScrollControlBase enables you to use its scrolling capability and its mask independently, so you can produce your own mask over a smaller area, if necessary (ListBase, and therefore, all List-like deriatives of it) use this in many cases to produce a faster rendering by as much as 25% (As it says in the source). As always, the source code provided in the Flex SDK is invaluable in letting you come up with ways to build components and optimizing it as necessary.

Here’s a link to the complete source of what we wrote. It’s free for you to use, modify, or do whatever.