8 Replies Latest reply on Jun 29, 2009 8:45 AM by abeymg

    Leveraging Depth within TileLayout

    paul_ingalls

      We’re trying to do a simple zoom out rollover transition inside a DataGroup that is using a TileLayout of images.  One of the challenges of animating something so that it looks like it pops out is that you need to swap depths.  When we attempt to do this using setChildIndex the framework throws an exception saying the data group doesn’t support setChildIndex. 

      This seems like a pretty simple requirement.  I must admit my flex knowledge is not extensive so maybe I’m missing something?  Why is it limiting access to depth?  Is there a workaround, or a better way to handle this?

        • 1. Re: Leveraging Depth within TileLayout
          CoreyRLucier Adobe Employee

          The beta Flex 4 SDK has a 'layer' property for view elements.  Just make sure the item you wish to be on top has a larger layer than the others.

           

          This property was renamed to depth in trunk builds of the SDK.

           

          -Corey

          1 person found this helpful
          • 2. Re: Leveraging Depth within TileLayout
            Ely Greenfield Level 1

            Try the 'layer' property on your itemRenderer.

             

            Ely.

            • 3. Re: Leveraging Depth within TileLayout
              benz03

              Maybe a different topic but I think my questions fits in here. If I have a list with a custom layout and i need to manage the depth of the items where would be the best place to do it? Say I need to put the selected item always on top. Normally the layout classes are not aware that items are selectable and that a certain item is selected so it`s difficult to do it here. The item however are unaware of the other items and so it`s difficult to manage depth out of them. What would you suggest?

               

              Thanks

              Benz

              • 4. Re: Leveraging Depth within TileLayout
                CoreyRLucier Adobe Employee

                Well, typically custom 3D layouts, etc. manage the 'layer' property of their layout elements themselves, in their updateDisplayList method.  I suppose if you had a custom layout manager that was selection aware, it could query the 'selected' property of its IItemRenderer typed children. e.g. if (element is IItemRenderer)...

                 

                Other than that, your custom item renderers could always affect their own depth (a.k.a. layer) when selected, but this solution is limited as you described.

                 

                -Corey Lucier

                • 5. Re: Leveraging Depth within TileLayout
                  Shongrunden Adobe Employee

                  I just posted a sample application that demonstrates one way of doing what you are looking for:

                  http://flexponential.com/2009/06/24/zoom-in-on-items-in-a-list-with-a-tilelayout/

                  • 6. Re: Leveraging Depth within TileLayout
                    abeymg Level 1

                    Thanks for this example. I was looking for something like this.

                     

                    Is there a way to change the initial "depth" order that a Layout uses to lay its children out?

                     

                    I have a custom layout that extends the HorizontalLayout such that the children are stacked on top of each other with a partial overlap. However by default the children are stacked from left to right with the rightmost being the highest depth. I'd like to change that so that the leftmost (i.e the first child) is the highest. Is there a way to achieve this?

                    • 7. Re: Leveraging Depth within TileLayout
                      Shongrunden Adobe Employee

                      I was able to get something working by subclassing HorizontalLayout and setting the depth property on each element in updateDisplayList.

                       

                      For example:

                       

                          public class HorizontalLayoutOverlap extends HorizontalLayout
                          {
                              override public function updateDisplayList( width:Number, height:Number ):void
                              {
                                  var numElements:int = target.numElements;
                                  
                                  for ( var i:int = 0; i < numElements; i++ )
                                  {
                                      IVisualElement(target.getElementAt(i)).depth = -i;
                                  }
                                  super.updateDisplayList(width, height);
                              }
                          }

                       

                      And then set the gap to negative on this layout:

                       

                              <s:layout>
                                  <local:HorizontalLayoutOverlap gap="-10" />
                              </s:layout>

                       

                      Is this what you had in mind?

                      • 8. Re: Leveraging Depth within TileLayout
                        abeymg Level 1

                        Thanks!. Yes that is the layout I had in mind.

                         

                        I'd like to try and apply this layout to the concept of the item renderer as demonstrated in the link to your example above. Specifically the idea of varying depths for the itemrenderer in normal, hovered, selected states. Will post back on how that goes.

                         

                        - abey