6 Replies Latest reply on Feb 12, 2010 1:22 AM by joakim_

    How to get a background to follow scroll in a List?

    joakim_

      Hi.

       

      I'm trying to find out how to get a repeated background to follow the scroll in a List. I've a simple custom list skin like this:

       

       

           <s:Rect left="0" right="0" top="0" bottom="0">
                <s:fill>
                     <s:BitmapFill source="@Embed('//images/list_fill.png')" fillMode="repeat"/>
                </s:fill>
           </s:Rect>
           <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" horizontalScrollPolicy="off" focusEnabled="false">
                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                     <s:layout>
                          <s:VerticalLayout gap="0" horizontalAlign="contentJustify"/>
                     </s:layout>
                </s:DataGroup>
           </s:Scroller>
      
      

       

       

       

      Works well until I start to scroll the list. The background stays fixed. I've tried to put the rect in a group inside the scrolls but then the item renderer lose it's width.

       

      Any help is very appreciated, thanks a lot!

        • 1. Re: How to get a background to follow scroll in a List?
          Flex harUI Adobe Employee

          Try putting the s:Rect in the Scroller with the DataGroup

          • 2. Re: How to get a background to follow scroll in a List?
            joakim_ Level 1

            Thank you for your prompt reply. When I try this I get an error:

             

             

            "Multiple initializer values for default property, 'viewport', of type 'spark.core.IViewport'."

             

             

            Thanks.

            • 3. Re: How to get a background to follow scroll in a List?
              Flex harUI Adobe Employee

              Then you didn't set it up correctly.  The Rect should be inside the Scroller

              tag.

              • 4. Re: How to get a background to follow scroll in a List?
                Shongrunden Adobe Employee

                This is a lot trickier than I thought.  The key is you want the background Rect to be the size of the content size of the DataGroup.  Here is an example that works for me (when in a List skin):

                 

                <s:Scroller left="0" top="0" right="0" bottom="0" id="scroller" minViewportInset="1" hasFocusableChildren="false">
                        <s:Group id="viewport">
                            <s:Rect left="0" right="0" height="{viewport.contentHeight}">
                                <s:fill>
                                    <s:BitmapFill source="@Embed('bg.png')" fillMode="repeat"/>
                                </s:fill>
                            </s:Rect>
                            <s:Group width="100%" height="100%">
                                <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer">
                                    <s:layout>
                                        <s:VerticalLayout gap="0" horizontalAlign="contentJustify" requestedMinRowCount="5" />
                                    </s:layout>
                                </s:DataGroup>
                            </s:Group>
                        </s:Group>
                    </s:Scroller>

                 

                 

                But this approach will essentially negate virtual layout.  I think there is a better way of doing this, I'll see if I can dig it up.

                • 5. Re: How to get a background to follow scroll in a List?
                  Shongrunden Adobe Employee

                  The last solution I posted wasn't very good since virtual layout doesn't support that use case and its possible the Rect might misbehave when its height grows too big given a sufficiently large contentHeight on the viewport.

                   

                  A better approach would be to have the bgImage in another Group behind the Scroller and as the scroll position changes on the DataGroup update the scroll position of the other Group.

                   

                  Here is an application that demonstrates this approach: (bg2.png is attached)

                   

                  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                                 xmlns:s="library://ns.adobe.com/flex/spark" 
                                 creationComplete="init()">
                      
                      <fx:Script>
                          <![CDATA[
                              import mx.events.PropertyChangeEvent;
                              import mx.collections.ArrayList;
                              
                              private function init():void {
                                  dataGroup.addEventListener("propertyChange", handle);
                              }
                              
                              private function handle(e:PropertyChangeEvent):void {
                                  if (e.property == "verticalScrollPosition"){
                                      // update the scroll position of the bgImageGroup as the DataGroup scroll
                                      // position changes
                                     bgImageGroup.verticalScrollPosition = Number(e.newValue) % bgImageGroup.height;
                                  }
                              }
                              
                              private function createItems(n:int):ArrayList {
                                  var arr:Array = new Array();
                                  for (var i:int = 0; i < n;i++){
                                      arr.push(i);
                                  }
                                  return new ArrayList(arr);
                              }
                          ]]>
                      </fx:Script>
                  
                      <s:Group id="bgImageGroup" width="{dataGroup.width}" height="{dataGroup.height}" clipAndEnableScrolling="true">
                          <s:Rect id="bgImage" width="100%" height="{dataGroup.height * 2}">
                              <s:fill><s:BitmapFill source="@Embed('bg2.png')" fillMode="repeat"/></s:fill>
                          </s:Rect>
                      </s:Group>
                      
                      <s:Scroller id="scroller" width="200" height="200">
                          <s:DataGroup id="dataGroup" itemRenderer="spark.skins.spark.DefaultItemRenderer" dataProvider="{createItems(10000)}">
                              <s:layout>
                                  <s:VerticalLayout useVirtualLayout="true" gap="0" horizontalAlign="contentJustify" />
                              </s:layout>
                          </s:DataGroup>
                      </s:Scroller>
                      
                      <s:Button left="300" top="100" label="vsp++" click="dataGroup.verticalScrollPosition++" />
                  
                  </s:Application>
                  
                  
                  • 6. Re: How to get a background to follow scroll in a List?
                    joakim_ Level 1

                    This works! Thank you so much for your help, really appreciate it.