Leveraging Depth within TileLayout

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

Try the 'layer' property on your itemRenderer.

Ely.

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

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

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/

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?

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?

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