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"/>
.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.
5 comments:
Hi,
I am trying to use your component. My text area holds htmlText instead of text. will this work with htmlText property of textarea?
Yes it works fine whenever I've used html inside TextAreas.
Yes, it is working fine.
I have one more question. Can we have previous/next kind of facility in this?.
When i click on 'next' it should move to the next occurance of that word in next area and same rule for previous.
Any suggestion on how to do that?
Also, can we have different color for track and different color highlight?
To color the highlight there are two styles that I mention above: highlight-color and highlight-alpha. To change the color of the track you'll have to look at the Styles available for the Flex VScrollBar. In Flex 4/spark you probably have to skin the ScrollBar in order to change the track colours.
As for the previous/next functionality, you might try working with the BlockTextArea class. I'd suggest having a currentIndex property that keeps track of which occurrence you're on.
Here's a really quick version of what might work, you can work out the finer details yourself:
public function set currentIndex(index:int):void {
var lines:Array = blockLines;
if ((index >= 0) && (index != _currentIndex) && (index < lines.length)) {
this._currentIndex = index;
var line:Number = lines[index];
var max:Number = textField.numLines;
var pos:Number = Math.ceil((line * maxVerticalScrollPosition) / max);
verticalScrollPosition = pos;
}
}
Post a Comment