6 Replies Latest reply on Jan 18, 2011 10:24 AM by FTQuest

    Scroller and RichEditableText - max position of scroller

    arsenox

      Hi

       

      I have maybe quick and easy question, but it's hard to find solution. Does anybody know, how to set max postion of the (vertical) scroller which wrapped RichEditableText ??

       

      I'm writing chat, and vertical scroller must be at the bottom, to see recent message

       

      Here is a code  :

       


                          <s:Scroller width="100%" id="outputScroller"  height="90%"  >


                              <s:RichEditableText  editable="true" clipAndEnableScrolling="true"
                                                   textFlow="{TextConverter.importToFlow(mesgHtml, TextConverter.TEXT_FIELD_HTML_FORMAT)}"
                                                   width="100%" id="outputTf" height="100%" />
                          </s:Scroller>

       

      I'll be grateful for the answers,

      Best wishes

        • 1. Re: Scroller and RichEditableText - max position of scroller
          Gregory Lafrance Level 6

          From this blog entry:

           

          http://blog.flexexamples.com/2009/08/19/setting-the-vertical-scroll-position-on-a-spark-ri cheditabletext-control-in-flex-4/

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
            xmlns:mx="library://ns.adobe.com/flex/mx" 
            xmlns:s="library://ns.adobe.com/flex/spark">
            <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>
          


          If this post answers your question or helps, please mark it as such. Thanks!

          http://www.stardustsystems.com
          Adobe Flex Development and Support Services

          • 2. Re: Scroller and RichEditableText - max position of scroller
            arsenox Level 1

            Ok, I have seen it, but it isn't extacly what I'm looking for..

             

            Scroller class, doesn't have proporties like e.g. slider maximum or event change.. because of that, could you help me with Scroller class, as I wrote in first post.

            By the way, thanks for interest

             

            Best wishes

            • 3. Re: Scroller and RichEditableText - max position of scroller
              FTQuest Level 3

              arsenox,

               

              I believe Gregory has given you all you need: just use the 'verticalScrollPosition' property of your RichEditableText and assign it a value of ret.contentHeight - ret.height. That would open your text at its lowest portion.

               

              FTQuest

              1 person found this helpful
              • 4. Re: Scroller and RichEditableText - max position of scroller
                arsenox Level 1

                Hmm... ok, just I was doing in this way which you prospose, but it didn''t work.. I will try to do it once again, maybe it will work ...

                 

                Thanks guys;)

                • 5. Re: Scroller and RichEditableText - max position of scroller
                  arsenox Level 1

                  Well, I figured out what was wrong. I don't know why, but the solution you gave me works only in mxml, when I was writing it in action script it collapsed. Weird, but I found solution and have made custom control, list with itemrenderer contain richtext

                   

                  Thx for all for help;)

                  • 6. Re: Scroller and RichEditableText - max position of scroller
                    FTQuest Level 3

                    I'm not sure why AS version doesn't work for you.

                     

                    Incidentally, I have to do something with RichEditableText, and here is a simple case of pure AS, where you can get to any desired vertical scroll position.

                     

                    <?xml version="1.0" encoding="utf-8"?>

                    <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

                       xmlns:s="library://ns.adobe.com/flex/spark"

                       xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="loadTxtSource()" >

                     

                    <fx:Script>

                    <![CDATA[

                    import mx.events.FlexEvent;

                     

                    import spark.components.RichEditableText;

                    import spark.utils.TextFlowUtil;

                     

                    private var txtLoader:URLLoader;

                    private var richEdTxt:RichEditableText;

                     

                    private function loadTxtSource():void

                    {

                    txtLoader = new URLLoader();

                    txtLoader.dataFormat = URLLoaderDataFormat.TEXT;

                    txtLoader.addEventListener(Event.COMPLETE, parseText);

                    txtLoader.load(new URLRequest('assets/genText/Lorem.xml'));

                    }

                     

                    private function parseText(event:Event):void

                    {

                    txtLoader.removeEventListener(Event.COMPLETE, parseText);

                    richEdTxt = new RichEditableText();

                    richEdTxt.horizontalCenter = 0;

                    richEdTxt.verticalCenter = 0;

                    richEdTxt.width = 400;

                    richEdTxt.height = 300;

                    richEdTxt.setStyle('backgroundColor', 0xDDDDDD);

                    richEdTxt.clipAndEnableScrolling = true;

                    richEdTxt.textFlow = TextFlowUtil.importFromString(txtLoader.data);

                    richEdTxt.addEventListener(FlexEvent.CREATION_COMPLETE, checkParams);

                    addElement(richEdTxt);

                    }

                     

                    private function checkParams(event:FlexEvent):void

                    {

                    richEdTxt.removeEventListener(FlexEvent.CREATION_COMPLETE, checkParams);

                    richEdTxt.verticalScrollPosition = Math.floor(richEdTxt.contentHeight) - richEdTxt.height;

                    }

                     

                    ]]>

                    </fx:Script>

                     

                    </s:Application>