Shulou(Shulou.com)06/02 Report--

This article will explain in detail about the relationship between Flex4 and custom layout. The editor thinks it is very practical, so I share it for you as a reference. I hope you can get something after reading this article.

Flex4 and Custom layout

If you are not familiar with the Flex4 features yet, there must be something you want to know. One of the new features of the Flex4/Spark component architecture is the ability to customize the layout of a container without changing the container itself. All you need to do is define a custom layout.

Containers in the Flex4/Spark architecture do not control their own layout. Instead, each container has a layout property that determines how to set the layout of child elements on the screen. You can use a separate Group container and give it a vertical, horizontal, or tiled layout, depending on how you will create it.

The code is simple, as follows:

The real benefit, though, is that you don't have to be limited to the default layout defined in the framework. You can easily customize the BaseLayout class to implement your own customized layout logic. The following is a simple example of how to implement a layout that places components clockwise around the origin. Just click the button on the lower left to add more buttons to the layout.

The following is the code for the main application file. As you can see, the code is quite simple. This is a DataGroup, a bit like a repeater, which contains a set of buttons. The layout of this container is based on a custom layout implementation. In creationComplete, populate the data provider for DataGroup to create a button instance in the layout.

As you can see, the layout of the DataGroup instance is controlled by the CircularLayout class (which is shown below). This class simply loops through the children of the datagroup object and places them in a circle clockwise. I looked at the source code of the VerticalLayout class, figured out how it works, and started building my own layout implementation.

Package {importmx.core.ILayoutElement; importspark.layouts.supportClasses.LayoutBase; publicclassCircularLayoutextendsLayoutBase {overridepublicfunctionupdateDisplayList (WRV NumberMagneh): void {super.updateDisplayList (wMagh); if (! target) return; varlayoutElement:ILayoutElement; varcount:uint=target.numElements; varangle:Number=360/count; varradius:Number=Math.min (target.width/2,target.height/2)-25; varw2:Number=target.width/2; varh3:Number=target.height/2; for (vari:int=0;i)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.