The following example shows how you can toggle live scrolling on a TextArea control in Flex by setting the liveScrolling property.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/disabling-live-scrolling-on-a-flex-textarea-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:String id="lorem" source="lorem.txt" />
<mx:ApplicationControlBar dock="true">
<mx:CheckBox id="checkBox"
label="liveScrolling:"
labelPlacement="left"
selected="true" />
</mx:ApplicationControlBar>
<mx:TextArea id="textArea"
text="{lorem}"
liveScrolling="{checkBox.selected}"
editable="false"
condenseWhite="true"
width="100%"
height="100%" />
</mx:Application>
View source is enabled in the following example.
{ 9 comments… read them below or add one }
Hi. I can not experience any differnce when enabling or disabling the checkbox. Could you please describe the functionality of liveScrolling?! – Further I myself cannot manage to set up scrolling behaviour on a TextArea component – what is the secret trick? Thx, Tobias
Tobias,
In the example above, select the checkbox and try scrolling the TextArea control’s vertical scrollbar thumb. As you click and drag the scrollbar thumb, you should see the text scroll line by line.
Now, deselect the checkbox and try again. Now the text doesn’t scroll as you drag the scrollbar, but will scroll to the correct position when you release the scrollbar thumb.
Peter
Ah! Thank you.
Can you tell me how I can set up scrolling for a TextArea via Actionscript? It seems as if it is disabled by default.
Tobias,
You can scroll the Flex TextArea control vertically using the
verticalScrollPositionandmaxVerticalScrollPositionproperties, as seen in the following example:<?xml version="1.0" encoding="utf-8"?> <mx:Application 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>Peter
He Peter. Thanks a lot – I like the example you give.
But what I mean is another thing: When I move my mouse cursor over the textarea I like the text to scroll if there is more content then the textarea can show at once. I found an example here:
http://livedocs.adobe.com/flex/3/html/help.html?content=basic_as_1.html
Last swf for example Unluckely there is no attribute or sourcecode available.
Do you know how?
Tobias
I tried to decompile the swf.. did not work ;{
Holy shit! I got it.
For debugging purposes (with Firefox 3 Console does not show trace prints) I use Safari as Webbrowser. – After days of testing I tried to scroll the TextArea within Firefox: I works. Safari just ignores the Scrollwheel of my mouse so I thought I need to set some attribute…
Sorry for going onto your nerves.
-) Tobias
How can I reset a TextArea scrollbar when switching from one view to another with a viewstack?
In other words, when I scroll the text to the bottom in one canvas they switch to another canvas, when I go back to the previous canvas I want the TextArea to reset to the top of the text.
I hope this makes sense.