Flex, working with.

In writing the previous article on extending ScrollControlBase, I mentioned that the current implementation could be used as a generic scroller for any component. However, in keeping the article on topic, I didn’t really delve into how that would be done. I ended up writing it, so here’s a link to the complete source of ScrolledComponent.

Some details on its implementation:

Feeding ScrolledComponent Content

ScrolledComponent accepts any DisplayObject or subclass thereof as its content property. This will be the component that will be scrolled. All Flex components extend UIComponent, which itself extends DisplayObject so you can throw whatever you want in there. The component we made in the “Extending ScrollControlBase” article would be implemented like so:

var scrolled:ScrolledComponent = new ScrolledComponent();
var image:Image = new Image();
image.source = this.someDisplayAsset; // This would be some embedded image, or a URL to one.
scrolled.content = image;
this.addChild(scrolled);

You could (And probably would) do the same thing in MXML via setting the content property. For convenience, ScrolledComponent defaults to using the content property in MXML, so you can just define the content property inline, like so:

<local:ScrolledComponent width="100%" height="100%">
    <mx:image source="{this.someDisplayAsset}"/>
</local:ScrolledComponent>

You can also use it as a item renderer, since it implements IDataRenderer, and can give it a class to use as content via data property.

Changing How Content Is Displayed

ScrolledComponent implements the following styles and properties affecting its display:

• verticalAlign and horizontalAlign - Affects where content is displayed inside the scrolled content. These work like they do in VBox and HBox. Currently, there is no center or middle alignment, since the use case for those is rare, but adding them wouldn’t be too difficult in your own code. (If you need them, just request it here and I’ll throw them in.)
• verticalPinPolicy - Affects how vertical scrolling works. If this is set to true, the list will stick to the bottom as content is added. Scrolling up will “unpin” the document, but if it is scrolled back to the bottom, it will be stick again. This behavior emulates IRC clients and chat message windows.

  I didn’t add a horizontalPinPolicy, but if the need arises, I’ll do so. If you wish to implement it, it would act the same as the vertical, but obviously in the horizontal direction. (Again, if you need them, just request so in the comments, and I’ll add it.)

I hope this is useful for anyone looking for a generic scroller, and again, here’s the link to the source. Please post any comments or bug findings here, and I’ll see to them. I’m using this component in my own projects, so I hopefully should run into any before you do.