Flex element Layout rule summary, and layout and container

First, the element classification in Flex
From a functional level, you can divide the elements in flex into components and containers (Containers) in two main categories:
Component-refers to an element that has explicit interaction or data presentation capabilities, such as a button, Checkbox, Datagrid, list, and so on.
Container-refers to the type of element that is used to place other elements, and the container often does not have a specific interaction function, the main function is to accommodate the elements. The container subdivision can also be divided into layout container and navigation (Navigator) container, wherein the layout container function is used to layout the interface elements, such as application, panel, etc., the navigation container is mainly used for functional navigation, interface switch, such as Tabnavigator and so on.

Ii. layout rules in Flex
The layout in flex refers to the layout of the layout container, which can be divided into two categories according to the layout characteristics: basic layout and special layout.
Base layout-layouts that are based on layout properties and constraint-based, such as application, Panel, canvas, and so on.
Special layout-based on the function of the container, different containers have very obvious layout methods, such as form, Grid, Hdividedbox and so on.

Basic layout

1. Layout properties
The layout property of the container is set to include the following methods:
(1) Vertical-The child element is placed vertically in a single column from top to bottom, and horizontal alignment can be set by horizontalalign, and vertical alignment can be set by VerticalAlign.
(2) Horizontal-The child element is placed horizontally in a single row from left to right, while horizontal alignment can be set by horizontalalign, and vertical alignment can be set by VerticalAlign.
(3) Absolute-locates each child element by setting the X/Y property of each child element, and the container does not automatically adjust the position of the subassembly. If no coordinates are specified, all child elements are drawn in the upper-left corner of the container.
2. constraint-based
In the case where the layout property of the container is set to absolute (except for canvas, because canvas is only absoulte one layout, so canvas defaults), you can use the constraint-based layout. This layout is determined by the offset of the 4 side of the child element and the 2 centerline to the corresponding side and centerline of the container to determine the positioning of the child elements. The corresponding property settings are as follows:
(1) left-the distance from the left edge of the child element
(2) Right-the distance from the right side of the container to the left of the child element
(3) Top-the distance from the top edge of the child element
(4) Bottom-the distance from the bottom edge of the sub-element
(5) Horizontalcenter-The offset of the horizontal centerline of the child element relative to the container's horizontal centerline, a positive number representing the offset to the bottom of the container, and a negative number representing the offset to the top of the container.
(6) Verticalcenter-The offset of the vertical centerline of the child element relative to the container's vertical centerline, a positive number representing the offset to the right of the container, and a positive representing the offset to the left of the container.
* Description: The priority of Horizontalcenter and Verticalcenter is higher than the other four attributes, that is, when Horizontalcenter, Verticalcenter are set, the other four properties are ignored. In addition, the constraint-based layout must be valid in the absolute's underlying layout. Since the layout of the canvas container is only absolute, the constraint-based layout can be used directly in the canvas, The constraint-based layout is effective when you need to set the layout property to absolute in other containers, and when you use the constraint-based layout, setting the X/Y coordinates will no longer make sense.

Special layout

1. Box
In the absolute layout, the position of the child element does not resize as the size of the container changes, which can have an unpredictable effect on the layout of the interface, and in many cases it is desirable for the box layout to be able to automatically adjust the position of the child elements as the size of the container changes.
The box layout is divided into Hbox and VBox, where the Hbox layout is consistent with the set container layout for horizontal, the child elements are arranged horizontally in one row, and the VBox is the child elements vertically in a column.
2. DividedBox
Divided into Hdividedbox and vdividedbox,dividedbox will divide the child elements into a separate partition, and there will be an adjustment bar between each partition, which can be used to adjust the size of each partition manually.
3. Tile
Rows its child elements into one or more vertical columns or rows, adding new or new columns when needed. When you place a child element horizontally, it is similar to Hbox, except that tile does not place all child elements on a single line, but instead wraps them when the tile width is about to be exceeded.
All tile container cell sizes are the same.
Flex places the cells of the tile container in a square grid, where each cell is placed in a child element. The layout method is determined by the direction property.
4. Grid
Similar to the table in HTML, you can define the number of rows, columns, and select a cell to place child elements.
5. Form
Form container for building forms, generating specific form layouts

flex_ Layouts and containers

1. The Halo component, also known as the MX component, is a unique component of Flex3 (buttons, text fields, containers, etc.). and Flex4 introduced a new generation of components, called Spark.
FLEX4 supports both Halo and spark. However, many Halo components have updated spark components.

2. Layout type
Spark supports any of the following layouts:
-Basiclayout: Absolute layout. Use x, y coordinates.
-Horizontallayout: Horizontal arrangement in a single row.
-Verticallayout: Single row vertical arrangement.
-Tilelayout: Displays the component in grid form, creating as many rows and columns as possible.

3. Absolute layout
Absolute layout, using x, y coordinates, allows to control the exact position and size of the element.
The upper-left corner of the container represents the coordinate origin (0,0). (in Flex, the x-coordinate starts from the left; the y-coordinate, starting at the top.) ）
The application container uses absolute layout by default.

When the x, Y coordinates are negative, the component moves outside the visual range.

4. Constraint-based layouts
Constraint-based layouts in absolute layout mode can be used when it is difficult to determine the exact coordinates of a component. A constraint-based layout is a component that is positioned relative to the container's 4 edges or the center point of a container.
-4 Sides: Top,bottom,left,right
-Center point: horizontalcenter,verticalcenter
-Baseline: The distance from the top of the component to the container
The advantage is that the relative position of the component remains the same even if the window is resized.

5. Enhanced constrained layout(Spark container not supported, spark component support)
You can create hidden guides arbitrarily in both horizontal and vertical directions, and then position components based on guides.
Constraint row and constraint column settings (<mx:constraintColumns> <mx:constraintRows>):
-Fixed constraint: specified by absolute number (pixels)
-Relative constraints: determined by the percentage of container size
-Content size constraint: Constraint rows and constraint columns will be the same size as the largest items

The canvas container for Halo supports enhanced constraints, and the Spark container does not support enhanced constraints, but spark components can be placed in the Halo container.

6. Automatic Layout
In automatic layout mode, the container is directed to the location element.
1) using the Layout class
The Spark container has 4 layout classes, where Basiclayout is the absolute layout, and the other three below provide automatic layout options:
-Horizontallayout
-Verticallayout
-Tilelayout (automatic grid layout)

2) Use of space
The <mx:Spacer/> component separates the component from the relative distance in the direction specified by the layout class.
Example: <mx:spacer width= "50%" >//to evenly separate the components from relative distances

7. Container
1) Application
An application can have only one, which is the root container.
There is a special attribute preloader, which is the progress bar when you start the Flex program. The default is on, which can be off.
You can load global variables and functions.

2) Canvas
is the most basic container and is the Halo component. used when enhancing constraints.

3) Group
is a simple container that is used in conjunction with the layout class, the default Basiclayout layout.
The sub-containers have Hgroup and vgroup.

4) Skinnablecontainer
Similar group, support skin changing.

5) Panel
Based on Skinnablecontainer, it is characterized by adding a title bar and a frame, and by default draws a border for child objects.
Basiclayout is used by default.

6) Applicationcontrolbar
Added a control bar to the program, similar to the File menu. To be used in conjunction with the application container.
(ControlBar and it is similar, but the effect is not good, avoid)

7) Datagroup
For grouping data, you can use the item renderer to render the data to customize the display. The default is Basiclayout.
The data needs to be sent to Datagroup's dataprovider.
To display the data, you can use the following renderer:
-Spark.skins.spark.DefaultItemRenderer: Display as simple text
-Spark.skins.spark.DefaultComplexItemRenderer: Displayed as a component within the group container. Valid only if the data contains visual components.

8) Skinnabledatacontainer
Similar to Datagroup, supports skin resurfacing.

9) DividedBox, Hdividedbox, Vdividedbox
These are the HALO components that allow you to control the size of the adjustment.
Dividedbox supports the ability to set horizontal and vertical layouts through the direction property.
Hdividedbox is a horizontal layout, and Vdividedbox is a vertical layout.

Ten) Form
Convenient layout of the form, purely for the purpose of layout.
It consists of three labels
-Form: Main container
-Formheader: Optional, add title
-FormItem: Associating text with each form input field

One ) Grid
An HTML-like table with a top-level grid tag that identifies the beginning of the grid, gridrow for inserting rows, and GridItem for entering data into the grid.

The following is a simple code to use the container (the skin code used is omitted, the FB default is made on the line):

Flex element Layout rule summary, and layout and container