12 Replies Latest reply on Feb 2, 2011 10:20 AM by HansMuller

    Scrolling over components

    jmessary

      I am having trouble and this may not even be possible but my aim is to have a scroller similar to a standard html site.

       

      I have accomplished this by using:

       

      <s:Scroller id="my_scroller" width="100%" height="100%" horizontalScrollPolicy="auto" verticalScrollPolicy="auto">

              <s:Group>            

                 <mx:ModuleLoader id="header_module_loader" left="0" top="0" width="100%" height="150" />

       

                  <s:BorderContainer id='main' width="100%" height="100%" left="0" top="150" skinClass="skins.gradient_background">

                              <mx:ModuleLoader id="main_module_loader"

                                                   top="5"

                                                   bottom="10"

                                                   width="1000"

                                                   height="100%"

                                                   horizontalCenter="0"

                                                   borderVisible="false"

                                                   cornerRadius="10" />

       

                  </s:BorderContainer>

              </s:Group>

          </s:Scroller>

       

      This works fine except for the fact that the scrolling will not work if the mouse is hovering over some components.  I am not sure exactly which ones do it but I know that <s:TextArea>, <s:List> are 2 of them.  In other words if my mouse pointer is over the background (id='main') it will scroll with no problem, but if  the mouse pointer is over the list in the module (main_module_loader) it will not scroll the bg.  I understand the fact that the component has its own "area" but is there not a way around this?  Sort of like a "scroll whole page" feature?

       

      Couple Notes:

      The module loader main_module_loader is loading a module with a height of 1000.

      I tried setting the "scroller" attribute of the <s:List> to parentApplication.my_scroller.

       

      I have been struggling with this on several applications and have ended up redesigning the whole page in order to avoid scrolling in that manner (simple html scrolling).  This project is too big to not have scrolling and I would really like to do it in Flex but if the scrolling doesn't work, then I may have to step back and just do a lot of html/php/javascript/css.

       

      Thanks for any help.

        • 1. Re: Scrolling over components
          jmessary Level 1

          Still stumped on this one.

          • 2. Re: Scrolling over components
            HansMuller

            Does the application below represent the kind of scenario you're having trouble with?  It's just a pair of s:TextAreas and an s:List within a Scroller.   If the application   shrinks enough, the Scroller shows both auto scrollbars, along with the lists and text areas.

             

            If this is representative, could you explain the scrolling behavior you're trying to achieve in terms of this example?  

             

             

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

            <s:Application initialize="trace(new DataItem())"

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

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

               

                <s:Scroller width="100%" height="100%">

                    <s:VGroup>

                        <s:TextArea heightInLines="8" width="100%" lineBreak="explicit"

                            text="a&#13;b&#13;c&#13;d&#13;e&#13;f&#13;g&#13;h&#13;i&#13;j&#13;k&#13;l"/>

                       

                        <s:TextArea heightInLines="8" width="100%" lineBreak="explicit"

                                    text="a&#13;b&#13;c&#13;d&#13;e&#13;f&#13;g&#13;h&#13;i&#13;j&#13;k&#13;l"/>

                       

                        <s:List width="100%">

                            <s:layout>

                                <s:VerticalLayout requestedRowCount="8"/>

                            </s:layout>

                            <s:ArrayList source='["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"]'/>

                        </s:List>

                    </s:VGroup>

                </s:Scroller>

            </s:Application>

             

             

            screenshot.PNG

            • 3. Re: Scrolling over components
              jmessary Level 1

              Unfortunately no it isn't.

               

              show.jpg

               

               

              As you can see from the image above I am listing products.  I have my scrollbar on the right side there.  If the mouse pointer is "hovering" over the gradient bg then the page scrolls nicely.  However, if I am hovering over the <s:List> (which contains the panels as I used an itemRenderer) the page doesn't scroll.  I am assuming it is not seeing that particular component as needing to be scrolled which indeed that component does not, but I would like the page to scroll.

               

              I tried setting the <s:List scroller="{parentApplication.my_scroller}"> but that didn't help at all so I removed it.  I guess to summarize is there a way to make every sub-component use the outer scroll bar that is displayed on the right side.

               

              In my previous applications I have ran into the problem you posted and what I ended up doing for that is dynamically setting the height of the container to fit all of the content.

               

              Thank you for your reply.

              • 4. Re: Scrolling over components
                HansMuller Level 1

                I'm still not sure what you mean by "hovering" in this context; hovering doesn't usually induce scrolling   Are you referring to how the page/application respond to the the mouse wheel?

                 

                - Hans

                • 5. Re: Scrolling over components
                  jmessary Level 1

                  I am not sure of the best way to explain the "hovering".  When I say "hovering" I do not mean like onHover.  It is much more simplified than that, I am meaning the exact location of the mouse pointer on your screen.  In other words if I move the mouse pointer over one of the panels on the image in my previous post (and then stop moving the mouse) and then scroll the wheel, the page will not will not scroll based on the outer scroller that is defined in the image above.  I cannot figure out a way to include the component inside the "main" scroller.  This is really hard to explain but when you see it, very easy.  I am not trying to use "hover" as the term we would normally think of it as programmers.

                   

                  I am going on a backpacking trip for the weekend and will not be able to respond until Monday.  I greatly appreciate any help you can offer and hope you can help me solve this issue.  Like I said before, not being able to have scrolling similar to standard pages makes some clients hesitant to want a site developed in Flex.

                   

                   

                  Thanks,

                   

                  Justin

                  • 6. Re: Scrolling over components
                    jmessary Level 1

                    Hans, do you understand what I mean by "hovering" now?


                    • 7. Re: Scrolling over components
                      HansMuller Level 1

                      It sounds like what you're referring to is how the application responds to mouse wheel input.    Flash dispatches mouse wheel events to the component under the mouse (the one you're "hovering" over) and Flex Scrollers handle the mouse wheel event by scrolling if they can.  It sounds like what you want to enable is the sort of mouse wheel behavior that some browsers provide, where if the component under the mouse can't scroll (any further), the mouse wheel event is dispatched to the next ancestor that can scroll.    Is that correct?

                       

                      - Hans

                      • 8. Re: Scrolling over components
                        jmessary Level 1

                        Yes, is there a way to do that?

                        • 9. Re: Scrolling over components
                          HansMuller Level 1

                          It should be possible to get that behavior within an application by capturing the mouse wheel event and then dispatching it to the first Scroller that has room to scroll.  I will try and concoct an example.

                           

                          - Hans

                          • 10. Re: Scrolling over components
                            HansMuller Level 1

                            I've attached an example with a scrollable List in a Scroller.   If the list is scrolled past the end with the mouse wheel, the enclosing Scroller starts scrolling.  In this example a mouseWheelChanging listener is explicitly added to the List.   One could generalize the approach by recursively adding similar listeners, starting from the Application. 

                             

                            - Hans

                            • 11. Re: Scrolling over components
                              jmessary Level 1

                              Hans, thanks for the example.  Which SDK are you using?  I am using HERO and am getting a compiler error:

                               

                              Line of code for the error:

                              scroller.addEventListener(FlexMouseEvent.MOUSE_WHEEL_CHANGING, mouseWheelChangingListener);

                               

                              Error:

                              1119: Access of possibly undefined property MOUSE_WHEEL_CHANGING through a reference with static type Class.    test.mxml    /test/src    line 33    Flex Problem

                              • 12. Re: Scrolling over components
                                HansMuller Level 1

                                Sorry about that.   The mouseWheelChanging event was added to the Flex SDK recently, on December 10th last year.    Without it you could accomplish the same thing, albeit a little more clumsily: you'd have to listen for a MOUSE_WHEEL event during the capture phase, and then if you decide to redispatch you'd have to stop propagation of the original event.

                                 

                                - Hans