Flex Tour--flex4 container and layout positioning

Container

Here the main introduction of spark containers, halo containers are not introduced, Adobe recommends the use of spark components to replace the Halo components, of course, some are unique to Halo is irreplaceable, with Halo's grid container layout components are very convenient, similar to HTML table. The following gives a spark container inheritance relationship, drawing this picture but a lot of effort, the following figure contains only the container class, the other component classes are not included.

Spark components can be divided into two categories, one can not set the appearance, a class to set the appearance, Groupbase is not set the appearance of the component base class, Skinnablecomponent is a set of skin component base class, The Skinnablecontainerbase class sets the base class for the skin container, and the Skinnablecomponent class uses the Skin class (a subclass of group) to set the appearance. Group is a base class that does not set the Appearance container, and Tilegroup,vgroup,hgroup uses different layout subclasses for group; the Skinnablecontainer class has visual content to set the base class for the appearance container, and its common subclass has a panel. Bordercontainer,navigatorcontent (for the Navigator container), Titlewindow (used as a pop-up window).

Layout

Four layout classes: Basiclayout, Horizontallayout, Verticallayout, Tilelayout

Basiclayout (also called an absolute layout) requires that each container descendant be explicitly positioned. You can use the X and Y properties of a descendant, or use constraints to locate each descendant, corresponding to the layout= "absolute" in Flex3. The default layout when layout is not set, Group,panel,bordercontainer,application,titlewindow and so on are the layout of the way. Absolute layout is the only way to make a component overlap.

Horizontallayout arranges the layout elements in horizontal order from left to right, corresponding to Flex3 layout= "horizontal". Hgroup use Layout method.

Verticallayout arranges the layout elements from top to bottom in vertical order, corresponding to Flex3 layout= "vertical". Vgroup use Layout method.

Tilelayout arranges layout elements in columns and rows that are equal in cell size, spark new layout. Tilegroup use Layout method.

Note: paddingleft, paddingright, Paddingtop, paddingbottom Four attributes have been transferred to Horizontallayout, Verticallayout. There are no paddingleft, paddingright, Paddingtop, paddingbottom properties in the Spark component.

Positioning
The following reference from: http://blessht.iteye.com/blog/1130475

There are three ways to locate components in a Flex application: automatic positioning, absolute positioning, layout based on constraints

Auto-positioning: Flex automatically locates container children based on the layout rules of the container, such as layout direction, container padding, and clearance between components within the container. For a container that uses automatic positioning, setting the X or Y property of its subcomponents directly or calling the move () method has no effect, or has only a temporary effect, because the layout calculation sets the location of the component to a computed result instead of the specified value.

Absolute positioning: Specifies the position of the control by using its X and Y properties, or specifies a layout based on the constraint; otherwise, Flex places the child at the parent container's location 0, 0.

Constraint-based layout: the side or center of a component that you anchor in the layout is positioned relative to the component's container by using a constraint-based layout to manage the size of the subassembly and locate the subassembly. Specify the restrictions by using the top, bottom, left, right, horizontalcenter, or Verticalcenter style properties of the subassembly.

Note: Absolute positioning, based on a restricted layout, requires the parent container to be an absolute layout (basiclayout).