Flex Examples
The following example shows how you can programatically scroll a Spark RichEditableText control in Flex 4 by setting the verticalScrollPosition property.
Full code after the jump.
The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/08/19/setting-the-vertical-scroll-position-on-a-spark-richeditabletext-control-in-flex-4/ --> <s:Application name="Spark_RichEditableText_verticalScrollPosition_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="verticalScrollPosition:"> <s:HSlider id="slider" minimum="0" maximum="{richEditableTxt.contentHeight - richEditableTxt.height}" change="richEditableTxt.verticalScrollPosition = slider.value;" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <s:RichEditableText id="richEditableTxt" widthInChars="20" heightInLines="10" textAlign="justify" horizontalCenter="0" verticalCenter="0"> <s:content> <s:p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque tempus, eros ac dignissim interdum, elit sem euismod velit, eget laoreet urna metus nec enim. Cras ornare nulla imperdiet nulla blandit vehicula. Donec risus dolor, sollicitudin nec fringilla nec, aliquet vitae nisl. Duis tincidunt fermentum posuere. Nullam augue sem, rutrum a viverra aliquet, elementum interdum lacus. Aliquam dictum, nulla sit amet tempor commodo, tortor purus ullamcorper turpis, id aliquet dolor mauris vel turpis. Mauris placerat justo non orci porttitor hendrerit. Aenean mattis augue quis turpis dapibus sed eleifend mi sodales. Morbi sem tortor, ultricies vitae laoreet in, viverra id erat. Cras sed varius dolor. Sed vestibulum, sem at vehicula volutpat, enim augue facilisis nunc, ut dapibus nisi mi vel dui. Phasellus elementum leo quis velit mollis aliquam. Fusce a hendrerit lectus. Suspendisse potenti. Nulla urna diam, vulputate sed fringilla eget, consectetur ac risus. Duis sem nisl, hendrerit sit amet volutpat ut, posuere nec diam. Donec dignissim tortor in velit bibendum imperdiet. Sed nibh nulla, fringilla et auctor eu, tincidunt vel arcu.</s:p> <s:p>Phasellus egestas nunc et eros accumsan congue ornare nunc vestibulum. In quis erat magna, in mattis purus. Aliquam tempor, velit ac interdum sagittis, nisi neque sodales neque, ac tempus metus leo eget tellus. Cras non gravida tortor. Cras dictum rutrum vehicula. Morbi arcu odio, ultricies quis rhoncus aliquam, consectetur sit amet ligula. In aliquam fermentum mollis. Suspendisse ut massa nibh. Praesent tincidunt, tortor a semper egestas, purus mauris blandit magna, non bibendum leo leo varius odio. Suspendisse aliquet tempor arcu porta posuere.</s:p> </s:content> </s:RichEditableText> </s:Application>
This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.
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
Doesn’t work with FlashBuilder B1.
I’ll try using the latest nightly build of Flex SDK a bit later.
So, check this out:
Standard FB b1 rendered the textbox as wide as the text. So slider didn’t work.
Downloaded latest nightly build, switched compiler, error: An internal build error..
restarted FB, no error, compiled, textbox as wide as the text… *frown* no good.
Went back to compiler properties, checked settings, disabled Network Monitor (completely unrelated…),
pressed “Apply”, compiled again, voila!
text is shown in a neat square box, slider does what it’s supposed to do.
Perfect.
Then I switched back to standard FB b1 Flex SDK, restarted FB, compiled:
Text is still shown in neat square box! *frown*?
Went back to compiler properties, checked settings, enabled Network Monitor (completely unrelated…still..), pressed “Apply”, compiled again, voila!
Textbox again as wide as text.
?
I can replicate this behaviour as much as I want.
I’m using the FB-plugin for eclipse by the way.
Is this a bug, or me being confused?
AH.. I have an other clue:
So, starting with FB b1 standard SDK, I get textbox as wide as the textlines in it.
Changing compilersettings to latest SDK, restart, compiling, same textbox still as wide as the text in it.
From menu: Project > Clean…
compiling again: Voila! Square textbox with wrapped text & working slider.
In between: I got the error:
unable to open ‘C:\Program Files\Adobe\Flash Builder Plug-in Beta\sdks\4.0.0.9377\frameworks/libs/netmon.swc’
So that was the reason for me to uncheck Network Monitor in the first place & press apply.
I guess it also preforms a ‘clean project’
Yeah, I doubt [m]any of these examples will work in the old Flex 4 Beta 1 SDK. It is super old (build 7219 vs 9377), and we have seen many renames since that old beta build.
And yes, when using nightly Flex 4 SDKs in Flash Builder 4, you’ll want to disable that network monitor since it isn’t included in Nightly SDK builds. That is/was a bug and has been fixed in newer (internal) Flash Builder 4 builds (or so I understand). I’m guessing you were seeing the odd behavior when switching SDKs because the project files weren’t always getting recompiled. Sometimes I’ll add a space and delete it just to force a recompile (or just try doing a Project > Clean).
Peter
Thanks for the example, I added some animation based on your example and posted it here http://jucast.tumblr.com/post/185468850/animated-text-scrolling-in-gumbo
Hello!
What if I update my richEditableText dinamically (for example, by clicking on a list)? It does not update my scroll properly (PS:I am very new to Flex, sorry if it is a very silly question) here is my code:
my_rich_text.textFlow = TextFlowUtil.importFromString(my_list.selectedItem.conteudo);
my_scroll.minimum = 0;
my_scroll.maximum = my_rich_text.contentHeight – my_rich_text.height;
my_rich_text.verticalScrollPosition = 0;
my_scroll.setVisible(Boolean(my_scroll.maximum > 0));
Thanks in advance!