9 Replies Latest reply on Jun 23, 2011 11:31 AM by Flex harUI

    Resizeable item renderer within a virtualize list

    boliz Level 1

      Hi,

      i need to accomplish a task where a customer would like me to have a virtual list (the items cycled and smartly load on demand while cached) and at the same time on resize the list size will change and at the same time the item renderer size will change as well.

       

      my list is horizental list, if I do use virtualization and dynamic itemrenderer size or columnWidth size the scroll component stop to work normally, i have read in Adobe decomentation that this feature is not supported, and the item renderer must have pre definded fixed width...

       

      that sound very wired, do any one come with a work around? if nothing easy will popup i will have to disable virtualization and create the wheel once again on the item renderer level...

       

      i will appricate any help on this one.

      10x

      Boaz

        • 1. Re: Resizeable item renderer within a virtualize list
          Shongrunden Adobe Employee

          Can you please post a link here for where the documentation states that limitation?  If you are using a spark List you should have no problems using variable width renderers with virtual layout when using HorizontalLayout.  You may want to set variableColumnWidth="true" and not specify an explicit columnWidth.

          • 2. Re: Resizeable item renderer within a virtualize list
            boliz Level 1

            This is not what i meant.

             

            i ment that you can't set virtualLayout to true and have a precentage item renderer, in my case all item renderes at the same size comparing to one another but has a percentage width, here where i found the documentation:

             

            http://opensource.adobe.com/wiki/display/flexsdk/Spark+Virtualization

             

            and this i quete:

            "Virtualized layouts do not respect layout elements' major axis percent  size property.  That's percentHeight for VerticalLayout and percentWidth  for HorizontalLayout."

             

            if there is a workaround i would love to know...

            • 3. Re: Resizeable item renderer within a virtualize list
              boliz Level 1

              Here is a small application that show the problem, copy and paste and start to scroll the scroller...:

               

              http://www.qed.co.il/demo/layout_test/

               

              and here is the code:

              --------------------------------------------------------------

               

              <?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" viewSourceURL="srcview/index.html">
                  <fx:Script>
                      <![CDATA[
                          import mx.collections.ArrayList;
                          import mx.controls.Image;
                         
                          import spark.components.VGroup;
                         
                          [Bindable] public static var imgWidth : Number;
                          [Bindable] public static var imgHeight : Number;
                         
                          public var firstTime : Boolean = true;
                          public function getIRSize( img : Image ) : void
                          {
                              if(img && img.parent && stage && firstTime)
                              {
                                  firstTime = false;
                                  imgWidth = (img.contentWidth/img.contentHeight)*stage.stageHeight;
                                  imgHeight = stage.stageHeight;
                              }
                          }
                      ]]>
                  </fx:Script>
                  <fx:Declarations>
                      <!-- Place non-visual elements (e.g., services, value objects) here -->
                  </fx:Declarations>
                  <s:List width="100%" height="100%"
                          dataProvider="{new ArrayList([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])}">
                      <s:layout>
                          <s:HorizontalLayout gap="0"/>
                      </s:layout>
                      <s:itemRenderer>
                          <fx:Component>
                              <s:VGroup width="{LayoutTesting.imgWidth}" height="{LayoutTesting.imgHeight}"
                                        addedToStage="outerDocument.getIRSize(img)">
                                  <mx:Image id="img" width="100%" height="100%" maintainAspectRatio="true"
                                            complete="outerDocument.getIRSize(img)"
                                            source="http://www.theblackvault.com/wiki/images/Example.jpg"/>
                              </s:VGroup>
                          </fx:Component>
                      </s:itemRenderer>
                  </s:List>
              </s:Application>

               

               

               

              --------------------------------------------------------------

               

              I showed here that when the item renderer width and height are changed the layout can't size the items and the scroll experiance is very bad,

              any workaround will be great!!

              10x

              Boaz

              • 5. Re: Resizeable item renderer within a virtualize list
                boliz Level 1

                Unfourtiontly it's not the case.

                i have set minWidth and minHeight to both the item renderer and to the image itself and nothing is fixed with the scrolling.

                 

                i have updated the files so you can view that it didn't worked:

                http://www.qed.co.il/demo/layout_test/

                 

                and here is the code now:

                 

                <?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" viewSourceURL="srcview/index.html">
                    <fx:Script>
                        <![CDATA[
                            import mx.collections.ArrayList;
                            import mx.controls.Image;
                           
                            [Bindable] public static var imgWidth : Number;
                            [Bindable] public static var imgHeight : Number;
                           
                            public var firstTime : Boolean = true;
                            public function getIRSize( img : Image ) : void
                            {
                                if(img && img.parent && stage && firstTime)
                                {
                                    firstTime = false;
                                    imgWidth = (img.contentWidth/img.contentHeight)*stage.stageHeight;
                                    imgHeight = stage.stageHeight;
                                }
                            }
                        ]]>
                    </fx:Script>
                    <fx:Declarations>
                        <!-- Place non-visual elements (e.g., services, value objects) here -->
                    </fx:Declarations>
                    <s:List width="100%" height="100%"
                            dataProvider="{new ArrayList([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])}">
                        <s:layout>
                            <s:HorizontalLayout gap="0"/>
                        </s:layout>
                        <s:itemRenderer>
                            <fx:Component>
                                <s:VGroup width="{LayoutTesting.imgWidth}" height="{LayoutTesting.imgHeight}"
                                          addedToStage="outerDocument.getIRSize(img)"  minWidth="32" minHeight="32">
                                    <mx:Image id="img" width="100%" height="100%" maintainAspectRatio="true"
                                              complete="outerDocument.getIRSize(img)" minWidth="32" minHeight="32"
                                              source="http://www.theblackvault.com/wiki/images/Example.jpg"/>
                                </s:VGroup>
                            </fx:Component>
                        </s:itemRenderer>
                    </s:List>
                </s:Application>

                 

                releay hope to find a workarond, i wouldn't like to write the whole virtualization machanisim from scratch...

                10x

                Boaz

                • 6. Re: Resizeable item renderer within a virtualize list
                  Shongrunden Adobe Employee

                  Your minWidth/minHeight looks much smaller than the final image size.  What you want to do is have your minWidth/minHeight be as close to what you're expecting as possible.  Sometimes this isn't great because you may later load in images of a smaller size and thats where preliminaryWidth/preliminaryHeight on s:Image can help.

                   

                  Also when specifying your item renderer you need to wrap it in the ItemRenderer class:

                          <s:itemRenderer>
                              <fx:Component>

                                <s:ItemRenderer>
                                  <s:VGroup width="{LayoutTesting.imgWidth}" height="{LayoutTesting.imgHeight}"
                                            addedToStage="outerDocument.getIRSize(img)"  minWidth="32" minHeight="32">
                                      <mx:Image id="img" width="100%" height="100%" maintainAspectRatio="true"
                                                complete="outerDocument.getIRSize(img)" minWidth="32" minHeight="32"
                                                source="http://www.theblackvault.com/wiki/images/Example.jpg"/>
                                  </s:VGroup>

                                 </s:ItemRenderer>
                              </fx:Component>
                          </s:itemRenderer>

                  • 7. Re: Resizeable item renderer within a virtualize list
                    Shongrunden Adobe Employee

                    Does this example work better?  It starts with a reasonable minWidth/minHeight and updates that as the images get loaded in:

                     

                    <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">

                        <fx:Script>

                            <![CDATA[

                                import mx.core.FlexGlobals;

                                import mx.controls.Image;

                                import mx.collections.ArrayList;

                                [Bindable]public static var imgWidth : Number = 400;

                                [Bindable]public static var imgHeight : Number = 267;

                     

                                public var firstTime : Boolean = true;

                                public function getIRSize( img : Image ) : void

                                {

                                    if(img && img.parent && firstTime)

                                    {

                                        firstTime = false;

                                        imgHeight = FlexGlobals.topLevelApplication.height;

                                        imgWidth = (img.contentWidth/img.contentHeight) * FlexGlobals.topLevelApplication.height;

                                        trace(imgWidth, imgHeight);

                                    }

                                }

                            ]]>

                        </fx:Script>

                        <s:List width="100%" height="100%"

                                dataProvider="{new ArrayList([1,2,3,4,5,6,7,8,9,10,11,12,13,14,15])}">

                            <s:layout>

                                <s:HorizontalLayout gap="0"/>

                            </s:layout>

                            <s:itemRenderer>

                                <fx:Component>

                                    <s:ItemRenderer>

                                        <mx:Image id="img" width="{ForForums2.imgWidth}" height="{ForForums2.imgHeight}"

                                                  maintainAspectRatio="true" minWidth="{ForForums2.imgWidth}" minHeight="{ForForums2.imgHeight}"

                                                  complete="outerDocument.getIRSize(img)"

                                                  source="http://www.theblackvault.com/wiki/images/Example.jpg"/>

                                    </s:ItemRenderer>

                                </fx:Component>

                            </s:itemRenderer>

                        </s:List>

                    </s:Application>

                    • 8. Re: Resizeable item renderer within a virtualize list
                      boliz Level 1

                      Sorry,

                      it didn't relay solved the problem, i have copy and paste the code and run it and you can still see when you drag the scroller that the thumb move backwards. it's only a bit less felt but still not somthing that I can work with, more ever if you need it as much as i need (to be able to jump to a spacific index) it doesn't work at all because i guess that  the full metured list width isn't calculated right.

                       

                      b.t.w

                      if you will set virtualLayout to false you will see how it should behave, but i must use virtualLayout=true for my project...

                       

                      any working workaround will make me so happy!!

                      10

                      Boaz

                      • 9. Re: Resizeable item renderer within a virtualize list
                        Flex harUI Adobe Employee

                        You will probably have better luck replacing mx:Image with the new s:Image

                        and adding a shared ContentCache.  There is another thread on this going on

                        right now.