Flex Examples
The following example shows how you can scroll a Flex TextArea control by setting the verticalScrollPosition and maxVerticalScrollPosition properties.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_verticalScrollPosition_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
private function init():void {
callLater(setMaxVScrollPos);
}
private function setMaxVScrollPos():void {
slider.maximum = textArea.maxVerticalScrollPosition;
}
]]>
</mx:Script>
<mx:String id="lorem" source="lorem.html" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalScrollPosition:">
<mx:HSlider id="slider"
minimum="0"
snapInterval="1"
liveDragging="true" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
text="{lorem}"
verticalScrollPosition="{slider.value}"
verticalScrollPolicy="on"
width="100%"
height="100%"
resize="init();" />
</mx:Application>
View source is enabled in the following example.
You can also set the verticalScrollPosition property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/26/programmatically-scrolling-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_verticalScrollPosition_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
creationComplete="init();">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function init():void {
callLater(setMaxVScrollPos);
}
private function setMaxVScrollPos():void {
slider.maximum = textArea.maxVerticalScrollPosition;
}
private function slider_change(evt:SliderEvent):void {
textArea.verticalScrollPosition = evt.value;
}
]]>
</mx:Script>
<mx:String id="lorem" source="lorem.html" />
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="verticalScrollPosition:">
<mx:HSlider id="slider"
minimum="0"
snapInterval="1"
liveDragging="true"
change="slider_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
text="{lorem}"
verticalScrollPolicy="on"
width="100%"
height="100%"
resize="init();" />
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Hi again Peter!
A question regarding the scroll bar – is there a way to reference this at all? I see in the docs that the
verticalScrollBaris protected…I have a chat application that sets:
after a user sends input to the chat, and this works great to force the scrolling down and therefore display the new line in the textArea. But if a person is scrolling through the text that is already there, and someone else sends something to the textArea, it snaps to the bottom of the chat (as expected) and therefore the scrolling user has lost where they were scrolling to.
I want to add a eventListeners of mouseDown & mouseUp on the scroll bar, then set a boolean value if the mouse is being held down on the scroll bar or not – if it is, I know not to set the verticalScrollPosition of the textArea as the user is using the scroll bar at that moment.
But
textArea.verticalScrollBar.addEventListener(...)does not work with the error:I’ve tried using
textArea.addEventListener(ScrollEvent.SCROLL, scrollHandler)but this fires repeatedly while scrolling. I could set the boolean to be true when this event fires, but then I have no way of knowing when to set it back to false.So, is there any way of doing this as the textArea control stands at the moment, or should I just stop complaining and extend the class to make verticalScrollBar public? ;-)
Cheers,
K.
Kristian,
I think “extend the class to make
verticalScrollBarpublic” is probably your best bet.Peter
Thanks Peter.
I thought as much – just checking if there was something I was missing…
Cheers,
K.
PS Thanks for re-formatting my comment – I’ll try and not be so lazy next time! ;-)