2 Replies Latest reply on Aug 20, 2010 2:05 PM by FM_Flame

    Flex 4 Difference between getPreferredBoundsWidth and getLayoutBoundsWidth

    FM_Flame Level 1

      Hi,

       

      I've been reading about layouts, saw some examples, read the ILayoutElement API and I still don't understand what's the difference between (lets take for example) getPreferredBoundsWidth and getLayoutBoundsWidth? When would one use one and when the other ? Please explain, thanks ! 

        • 1. Re: Flex 4 Difference between getPreferredBoundsWidth and getLayoutBoundsWidth
          Evtim Georgiev (Adobe) Level 2

          Hi,

           

          The layouts or custom layout logic generally use these methods.

          The getPreferredBoundsWidth/Heihgt return the preferred size. This is the size of the component that's calculated based on its content (explicit or measured size, optionally transformed with the component's matrix.

          The getLayoutBoundsWidth/Height return the current layout size, as it is on screen. This is the component's size that was set by the layout.

           

          The reason to have these two sizes is that one serves as input to the layout (how big a component wants to be / how big did it measure?) and and the other is an output of the layout - the final / layout size is based on the preferred size + any constraints or other special layout logic.

           

          Here's an example:

           

          <s:Group id="outer" width="100", height="100">

           

              <s:Group id="inner" left="10" right="10">

           

                   <s:Button width="20" height="20"/>

           

              </s:Group>

           

          </s:Group/>

           

          The outer group will be sized at 100, 100 because it has 100, 100 as explicit size. The outer's both layout and preferred sizes are the same.

          The inner group will be sized at 80, 20 because it is constrained horizontally to the outer. Its layout size is going to be 80, 20, but its preferred size is going to be 20, 20, because in this case its content is a 20x20 Button.


          Now if you remove the explicit constraints from outer, then it will snap to its preferred size. The preferred size will be calculated from its content - inner 20x20 plus the constraints for a total of 40x20. The inner group now will have layout size of 20x20 and also a preferred size of 20x20:

           

          <s:Group id="outer">

           

              <s:Group id="inner" left="10" right="10">

           

                   <s:Button width="20" height="20"/>

           

              </s:Group>

           

          </s:Group/>

          • 2. Re: Flex 4 Difference between getPreferredBoundsWidth and getLayoutBoundsWidth
            FM_Flame Level 1

            Hi thanks for the great reply, I really get the difference put into these examples

             

            I would like to ask one thing which is more about the methodology of how to create custom layouts using these two methods.

            I've seen examples where it's all done in the updateDisplayList or examples where some calculations are made in measure too.

            So my question is what would be the correct approach, where to calculate sizes (where to use the preferred and where the layout Bounds) and when to start positioning them.

             

            At first glance I should do all the sizing (gaps etc) calculations in measure (using preferred bounds) and then position the items in updateDisplayList (using layout bounds). Is that correct? (not sure where gaps and constrains should go)

             

            Any advices on what pattern I should use to build my logic are welcome. Thanks again !

             

            P.S.

             

            What more question just a little off topic, I have a spark list where I would like to change the scrolling animations to fixed pixels and maybe add some easing. The list is for a news page having a limit of 10 news. they have variable size and should be in vertical layout.

            My question is: Is it more convinient to extend the vertical layout and override its methods for scrolling or build up a custom layout, what do you think?

            Thanks again

             

            Regards,

            Filip Nedyalkov