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

Editor to share with you an example of Flex layout analysis, I believe that most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to understand it!

Basic layout of Flex

First, Absolute layout

When you create a new Application with a Flex layout, there is a layout property option at the bottom: Vertical,Horizontal,Absolute. It means like a word. If Absolute is selected, the child controls of Application depend on their {xperience y} coordinates. However, it does not affect the second generation of child controls, that is, if you put a HBox into the Application, the controls in the HBox are arranged horizontally. Horizontal and Vertical are equivalent to treating Application as a horizontal or vertical Box, and the influence on child and grandchild controls is similar to that of Absolute.

Looking at the Absolute, it is not difficult to find that the width of the visual area is certain, no matter what the resolution, what kind of browser width. But in Web applications, we don't want this effect. Instead, we might want the control to automatically reposition as a percentage. Only this one, the development of Web applications, it is not recommended to use Absolute layout. This leads to a convenient, simple, and easy-to-use Box layout.

Second, Hbox layout

In the Flex layout, HBox allows child controls to be arranged horizontally, either right, left, or center.

Look at the Hbox, the control and the former do not add or decrease, the same control. But it can adapt to the browser width. The title bar of the article uses a HBox, which contains three child controls: the width of Label,Spacer and LinkButton.Spacer is set to 100%, so that no matter how many characters or how wide the Label is, you can hold the LinkButton to the far right. Similarly, you can use it in VBox and set it to 100% high. Spacer is very useful in Box layouts.

Careful friends are not difficult to find that the layout attribute of this Application is Vertical, and the whole App is equivalent to a VBox. The bottom comment text box and button are also within a HBox.

Third, VBox layout

VBox in the Flex layout allows child controls to be arranged vertically. Top,bottom or center .

Look at VBox. The layout of this App is Horiazontal, which is equivalent to a HBox. The first-level control is two VBox, one left and one right. The left side is similar to the corresponding part of the previous HBox. On the right, use Panel and TitleWindow, and Grid,Tile. Both Panel and TitleWindow have the layout property, and you can place any child control inside them in the same way as Application. What is worth mentioning is Tile, which allows child controls to flow and extend, ranking first on the x-axis, and then wrapping lines when full. TileList is similar.

Grid is very similar to Table in html, but it is very different and is not suitable for layout. In practical application, Tile or TileList is often used instead.

Box layout can meet basic project applications, but there are some problems. For example, if the content of the article needs to be scrolled, can the flow layout be implemented like Html? The answer is yes. Box layout is only a basic layout method and does not give full play to the strengths and advantages of Flex. About State and flow layout later.

In commercial project development, Application99% uses absolute layouts, with box,tile or other layouts between the containers used in the middle.

The above is all the content of this article "sample Analysis of Flex layout". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.