Synchronized Scrollbars

I recently had a need for two side-by-side TextAreas whose vertical scrollbars were synchronized. So if you drag the left scrollbar, the right one updates, and vice versa.

I've written a utility class called LinkedScrollers that synchronizes the scrolling of two Scrollers. It has 5 public properties:

• enabled (defaults to true) - set to false to allow scrollbars to move independently
• scroller1 - the first Scroller
• scroller2 - the second Scroller
• component1 - the first SkinnableComponent, e.g. List, TextArea
• component2 - the second SkinnableComponent (List, TextArea, etc)

Originally I wanted to bind the scrollers directly to my LinkedScrollers in MXML like this:

<spark:LinkedScrollers scroller1="{list.scroller}" scroller2="{textArea.scroller}"/>

But unfortunately the scroller property on List/TextArea is not bindable, so that didn't work. You can still use the scroller1 and scroller2 in ActionScript (e.g. in the application's creationComplete handler) to set the scrollers.

So another solution is to set the component1 and component2 properties to the two SkinnableComponents that you want to link (Lists, TextAreas, etc). It should work for any SkinnableComponent that contains a "scroller" skin part.
E.g.

<spark:LinkedScrollers component1="{list}" component2="{textArea}"/>

Here it is in action, view source enabled (right click on the example below):


As you might guess, this follows on from my previous post on Spark TextArea With Line Numbers.

Spark TextArea with Line Numbers

Here is a skin that you can use on the Spark TextArea class to show line numbers down the left side of the text.
The line numbers use the same size font as the TextArea.

It is very simply to use, simply set the skinClass property in mxml like this:

<s:TextArea skinClass="flex.utils.spark.TextAreaLineNumbersSkin"/>

If you want a horizontal scroll bar on the TextArea, then set lineBreak="explicit" and the horizontal scrollbar will appear.

Here is an example of it in action (right click to view source).


It would be very easy to modify this skin to make it resizable by adding a resize handle in the bottom right corner. Look at the source code from my previous blog post on Resizable Controls, specifically the flex.utils.spark.resize.ResizableTextAreaSkin class, it uses a custom skin for the Scroller, which adds the resize handle.

Highlight The ScrollBar Track

I'm not sure what this feature is called, but have you seen in Google Chrome when you search the current web page for a certain phrase, the vertical scroll bar will be highlighted showing you all the locations of that phrase? See the screenshot on the right for an example of what I mean.  In front of the track, but behind the scrollbar thumb are lines showing you were the search results are located. It's a nice little feature that I find quite helpful.

I've implemented the same thing in Flex for showing the scrollbar track highlighting when words in a TextArea are highlighted, and when items are selected in a List (it should work for a DataGrid too, but I haven't tested it).

The nice thing about my implementation is that it is very simple to set up.  All you have to do is set the verticalScrollBarStyleName property on your List, DataGrid or TextArea, and then create your CSS to set the trackSkin style to one of my two custom skins and it will all work.
E.g.

<mx:Style>
.highlightList {
    track-skin: ClassReference("skins.HighlightListScrollTrackSkin");
}
.highlightTextArea {
    trackSkin: ClassReference("skins.HighlightTextAreaScrollTrackSkin");
}
</mx:Style>

<mx:List verticalScrollBarStyleName="highlightList"/>

The text highlighting in the TextArea is done using some useful code that I found on this blog:
How to Highlight the Text in Flex.
I slightly modified the com.components.BlockTextArea class to make it work with my skins.HighlightTextAreaScrollTrackSkin class.

Here's the example (right click to View Source):


You can also set two more styles if you want to customize the color and alpha transparency of the highlighting:
highlight-color and highlight-alpha. Just add it to the css classes shown above.