7 Replies Latest reply on Aug 24, 2011 8:19 PM by Pierre_Chaillet

    Scroller bounce effect

    s_davies

      I have a page with a scroller on it.

       

      No I also have a page with a list item on it and when you drag it down or up and there is no more to scroll it like pulls down the list box like an eleastic band effect showing the background.

       

      But how can I achieve the same effect on the scroller.

       

      Below is some of the code I have used hope thi shelps:

       

      <s:Group left="0" right="0" top="60" bottom="-60">

           <s:RichEditableText id="contenttext" left="20" right="20" top="40" bottom="120" editable="false" selectable="false">

                <s:p> Textual content here....</s:p>

           </s:RichEditableText>

      </s:Group>

      <s:Scroller left="20" right="20" top="100" bottom="65" id="thescroller" viewport="{contenttext}" />

       

      many thanks

      si

        • 1. Re: Scroller bounce effect
          s_davies Level 1

          Sorry a bit more info its flex 4.5 mobile using flash builder

          • 2. Re: Scroller bounce effect
            Shongrunden Adobe Employee

            RichEditableText isn't supported in mobile.  Can you use the spark TextArea component?

             

            Also, I believe setting your Scroller's viewport in this way may lead to problems.  The recommended practice is to wrap the viewport with a Scroller rather than bind to an already parented viewport.

            • 3. Re: Scroller bounce effect
              s_davies Level 1

              Did not know this as not had issues on my test device.

               

              Anyway I have done the following and having some more issues.

               

              <s:TextArea id="contenttext" left="20" right="0" top="35" height="603" borderVisible="false" selectable="false" />

               

              And am setting the text in the following way:

               

              StyleableTextField(contenttext.textDisplay).htmlText = ".....";

               

              But the issue I am having is when I use .htmlText="" the text will NOT scroll, but if I change it to simply .text="" then it will scroll, As I need to use html tagging this would be good.

               

              The other issue is that I woudl like to add images but this does nto seem to work either in both the above.

               

               

              What's the best way to simply have text and images display that if too long will then scroll?? thats all I woudl like to do??

               

              Many Thanks

              Si

              • 4. Re: Scroller bounce effect
                s_davies Level 1

                I found this tonight:

                http://opensource.adobe.com/wiki/display/flexsdk/Bounce+and+Pull+Effects+for+List+Specific ation

                 

                its say:


                The bounce/pull behavior is implemented in the Scroller class when the "interactionMode" style is set to InteractionMode.TOUCH. Any component based on Group, DataGroup, or RichEditableText and parented by a Scroller will exhibit bounce/pull when scrolled and/or thrown.

                 

                But hence nope funny thing is the scrollbar actually bounces but the RET box will just stop dead. :-)

                 

                Thanks

                • 5. Re: Scroller bounce effect
                  Shongrunden Adobe Employee

                  This seems to work for me:

                   

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

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

                      <fx:Script>

                          <![CDATA[

                              import mx.events.FlexEvent;

                   

                              import spark.components.supportClasses.StyleableTextField;

                   

                              protected function updateText(event:FlexEvent):void

                              {

                                  StyleableTextField(ta.textDisplay).htmlText = "<b>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD</b>";

                              }

                          ]]>

                      </fx:Script>

                   

                      <s:TextArea id="ta" width="100%" height="100" creationComplete="updateText(event)" />

                   

                  </s:View>

                   

                  htmlText support is probably very limited.  I don't think it will be easy/possible for you to add images into that TextArea via HTML.  Can you consider using a Group with Labels and BitmapImages instead?

                   

                  Good cach on the spec, I've filed a bug here: http://bugs.adobe.com/jira/browse/SDK-30964

                  • 6. Re: Scroller bounce effect
                    s_davies Level 1

                    Thast for this, I like your bug report, hope they fix this issue and in facet get a good textfield section working textarea is not a really good fix as this is fo rtext entry etc :-)

                    • 7. Re: Scroller bounce effect
                      Pierre_Chaillet

                      Hi,

                       

                      The Shongrunden code was not working on my Android device. I added a bindable variable, and some focus, and it works properly, but I am not sure if the syntax is right:

                       

                       

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

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

                      >

                      <fx:Script>

                      <![CDATA[

                      import mx.events.FlexEvent;

                       

                      import spark.components.supportClasses.StyleableTextField;

                       

                      [Bindable]

                      private var myText:String = "<b>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD<br>HELLO WORLD</b>";

                       

                      protected function updateText(event:FlexEvent):void

                      {

                      StyleableTextField(ta.textDisplay).htmlText = myText;

                      StyleableTextField(ta.textDisplay).setFocus();

                      StyleableTextField(ta.textDisplay).setSelection(0,0);

                      }

                      ]]>

                      </fx:Script>

                       

                      <s:TextArea id="ta" text="{myText}" width="100%" height="100" creationComplete="updateText(event)" />

                       

                      </s:View>