Flex 3 layout container Study Notes sorting

Good article
Flex3 interface layout tutorial (1)
Http://www.jb51.net/article/20349.htm
Flex3 interface layout tutorial (2)
Http://www.jb51.net/article/20350.htm
Positioning and layout of Flex Components
Http://www.adobe.com/cn/devnet/flex/quickstart/layout_modes/
Using Layout Containers
Http://livedocs.adobe.com/flex/3/html/help.html? Contentappslayouts_07.html

Basically, after reading the first three articles, this can be done well. The last one is the official manual on easy layout. You can read more details when you are free. Next, I will share my study notes (with retouching). The content is not separated from the above four articles. If you are not interested, you can skip this article.

Positioning Mode
To understand the flex interface layout, it is necessary to first understand its positioning mode. Flex is free because you can write a lot of code in the positioning mode in mxml. When these fixed attributes conflict, it will automatically execute the highest priority Attribute Based on the priority. You don't have to worry about remembering these priorities. The flex IDE will display a warning in the problem box when detecting a conflict, so that you can remove the location attribute with a lower priority.

Among the many positioning modes, the first is the absolute mode. That is, you can set the x, y, width, and height attributes by using the specified values; when using the absolute mode, you need to know where your control is placed and determine its size. Obviously, this makes it difficult for your customers to easily adapt to customers' screens and la S, therefore, we usually use automatic positioning. Automatic positioning is still not flexible enough. In this case, we can use a constraint-based layout, as the name suggests, this is a way to implement layout by describing its relationship with the container. You can use the top, bottom, left, right, horizontalCenter, or verticalCenter style attributes of sub-components to specify the limit. For more information, see the third article recommended above.

HBox, VBox, and Spacer
These two Box classes are "invisible" controls used to constrain the component layout. If you have used wxWidgets, you must be quite familiar with them. This Box-based layout method adds constraint attributes, it is easy to maintain proportional changes as the size of the parent control changes. Alas, remember how much code I wrote when I used MFC to achieve this effect, how many nights have you debugged!

In the Box control, the distance between two controls is set by the verticalGap attribute, and the default value is not 0. Therefore, if you want to put the two controls together, you need to manually set them to 0; if you want to adjust the interval between two controls separately, you can use the "invisible and visible" control Spacer to separate them. Spacer is displayed as a pure transparent component on the interface, so invisible, but can play a blank role, so visible, its width and height attributes can correspond to make HBox and VBox control components more beautiful.

ApplicationControlBar
If you use Win32 SDK or MFC interface programming experience, you must be crazy about "adding a ComboBox or Edit requirement to the toolbar", right? Now you don't have to worry about it. In the flex world, ApplicationControlBar is quite a small case. Let's take a look at the figure below. It is a small case with 1 + 1 = 2.

DividedBox, HDividedBox, and VDividedBox
It is also difficult to use MFC, even wxWidgets, as a splitting component that can drag and drop to change the splitting ratio at any time. But in the Flex era, everything has become very easy, dividedBox and its subclass can be used to easily split components as they are using Box and its subclass. The following is a living example. Drag the separators in the middle to change the size ratio at any time. ,

In addition, there are also the most common container Canvas, the base class ControlBar of ApplicationControlBar, and the Form, FormHeading, and FormItem, Grid similar to Box, and Panel, Tile, and TitleWindow can all be seen in the manual. If you are free, read the fucking manuals; google is your friend at work.