<s:layout>
<s:VerticalLayout/>
</s:layout>
<?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/halo"
xmlns:local="*">
<s:creationComplete>
<![CDATA[
for ( var x:int = 0; x < 10; x++ ){
dataSource.addItem( dataSource.length );
}
]]>
</s:creationComplete>
<fx:Declarations>
<mx:ArrayCollection id="dataSource" />
</fx:Declarations>
<s:DataGroup
width="100%" height="100%"
dataProvider="{ dataSource }"
itemRenderer="SimpleItemRenderer">
<s:layout>
<local:CircularLayout />
</s:layout>
</s:DataGroup>
<mx:Button
left="5" bottom="5"
label="Click to Add a Button"
click="dataSource.addItem( dataSource.length )" />
</s:Application>
package
{
import mx.core.ILayoutElement;
import spark.layouts.supportClasses.LayoutBase;
public class CircularLayout extends LayoutBase
{
override public function updateDisplayList(w:Number, h:Number):void
{
super.updateDisplayList(w, h);
if (!target)
return;
var layoutElement:ILayoutElement;
var count:uint = target.numElements;
var angle : Number = 360/count;
var radius : Number = Math.min( target.width/2, target.height/2 ) - 25;
var w2 : Number = target.width/2;
var h2 : Number = target.height/2;
for (var i:int = 0; i < count; i++)
{
layoutElement = target.getElementAt(i);
if (!layoutElement || !layoutElement.includeInLayout)
continue;
var radAngle : Number = (angle * i) * (Math.PI / 180) ;
var _x : Number = Math.sin( radAngle );
var _y : Number = - Math.cos( radAngle );
layoutElement.setLayoutBoundsPosition( w2 + (_x * radius) - 25, h2 + (_y * radius) - 10 );
}
}
}
}
<s:ItemRenderer
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo">
<s:states>
<s:State name="normal"/>
<s:State name="hovered"/>
</s:states>
<s:layout>
<s:BasicLayout/>
</s:layout>
<s:Button label="{ data }" baseColor.hovered="#FF0000" />
</s:ItemRenderer>
glenn
tinylion
Thanks for the blog!:D
]]>Elements that are accessed by getElementAt are not necessarily children on the display list, they are just elements that can be laid out within the GroupBase. Children are accessed by getChildAt, and are actually on the display list.
This way, you can build layouts that support data virtualization, and scale to support very large data providers, without decreasing application performance.
If you are building a 3d layout, i would loop over the elements to determine what should be placed on screen, then loop over the children and set depths appropriately. It's hard to give any more detail without knowing what you are doing.
]]>Take a look at the source of the HorizontalLayout class inside of the Flex framework to get an idea how Adobe is doing it internally.
]]>However, to do advanced layout, there a few additional features you might want to take advantage of:
1) every element has a depth property, which controls the layering of the elements on screen, independent of their order within their parent. Some layouts will modify this property to get proper layering.
2) while most layouts simply use the new layout functions to set the bounds and size of the element post transform, more advanced layouts will want complete control over the transformation of the elements. In this case, you can call setLayoutBounds, passing false for the postTransformation flag, and then call setLayoutMatrix to have finegrained control over 2D and 3D rotation, scale, and position.
Go to town...great to see everyone reallying digging in to this stuff.
Ely Greenfield.
Adobe, Flex SDK.
Is there some other way to change their z-order?
]]>I have one question though... how to invoke updateDisplayList method in the custom layout?
I've a group of buttons that get placed in a SkinnableDataContainer with the help of a custom layout class as follows:
dataProvider="{appModel.myButtons}"
width="{DIAPLAY_WIDTH}" height="{BUTTON_HEIGHT+4}"
skinClass="view.skins.ContainerSkin"
itemRenderer="view.renderer.MyButtonRenderer"
click="startPointAreaClickHandler(event)"
mouseMove="areaMouseMoveHandler(event)"
mouseUp="areaMouseUpHandler(event)"
rollOut="areaMouseOutHandler(event)"
>
myButtons is an ArrayCollection of VOs and VO has x and y coordinates as fields. Values of x and y determine the location of the button. When I add an object to myButtons, the application behaves as expected (adds a button in buttonsContainer at specified x and y coordinate). But when I just change values of x and y of an existing button, the buttons don't get repositioned. I have tried calling invalidateDisplayList on buttonsContainer but that doesn't trigger updateDisplayList method in the custom layout ButtonsLayout.
How do I trigger updateDisplayList method in the custom layout so that the button positions get updated whenever an event changes values of x and y of a button?
Any help is very much appreciated.
]]>