Flex 3 Layout Container Learning notes Collation _flex

Source: Internet
Author: User
Tags wxwidgets

It's a 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?content=layouts_07.html

Basically read the first three, this can be done very well; the last one is an official manual on the layout, and when you have time, you can get more details. Now I'm starting to share My Learning notes (with the touches), and the content is not separated from the four articles above, and no interested friends can skip and watch.

Positioning mode
To understand Flex's interface layout, it is necessary to understand its positioning mode first. Flex's freedom lies in the fact that you can write many positioning patterns in the mxml, and when these set attributes collide, it automatically performs the highest priority with priority. You don't have to worry about remembering these priorities, flex. When the IDE detects a conflict, it displays a warning in the problem box so that you can remove the lower-priority positioning attribute.

The first of the many positioning modes is the absolute pattern, that is, you set the X, Y, Width, and height properties by determining the values; using absolute mode you need to know where your control is positioned and determine its size, which obviously makes it difficult for your client to easily get a layout that adapts to the customer's screen and habits, So we are more commonly used in automatic positioning, automatic positioning is still not flexible, then we can use a constraint based layout, as the name suggests, this is a way by describing its relationship with the container to implement the layout of the method, by using the subcomponents of top, bottom, left, right, Horizontalcenter or Verticalcenter style properties to specify restrictions. For more information on this, you can learn from the third article recommended above.

Hbox, VBox and spacer
These two box classes are "invisible" controls that constrain the layout of the components. If you have used wxWidgets that must be quite familiar with them, this Box based layout method plus constraint attributes, you can easily make changes with the size of the parent control to maintain the proportion of changes, alas, I think of that year with MFC to achieve this effect, I wrote how much code, How many nights have you been debugging?

In the box control, the distance between the two controls is set by the VerticalGap property, the default value is not 0, so if you want to put two controls together, you need to set it to 0 manually, and if you want to adjust the spacing between two controls individually, you can use the invisible visible control Spacer to separate it, spacer in the interface as a pure transparent component, so invisible, but can play a blank function, so it can be seen, its width and height properties of the relative to the Hbox and VBox control components more beautiful.

Applicationcontrolbar
If you are using the Win32 SDK or MFC interface programming experience, you must be "add a ComboBox or Edit on the toolbar" of the need to go crazy? Now do not be afraid, come to flex the world, like this problem, with Applicationcontrolbar is quite a small case. Take a look at how complex this diagram is, using it, is a small case of 1 + 1 = 2. &NBSP
  
Dividedbox, Hdividedbox, and Vdividedbox
Don't say MFC, even with WxWidgets, It is also difficult to make a split component that can be dragged and dropped at any time, but in Flex's time, everything became so easy, using Dividedbox and its subclasses to split the components as easily as using Box and its subclasses, here's a living example of dragging the middle divider, You can change the size ratio at any time. ,
 
In addition to these, there are the most commonly used containers Canvas, Applicationcontrolbar base class ControlBar, very Web-featured form, formheading, and form Item, Grid similar to Box, and Panel, Tile, and Titlewindow, these classes can be seen in the manual, or the sentence: when free, read the fucking manuals; At work, Google is Your friend.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.