[Flex] flex SDK 4 (gumbo) improved layout and scroller (II)

See http://www.k-zone.cn/zblog/post/flex-gumbo-layout-scroller-2.html for details
In the previous article, we analyzed the layout function of flex SDK 4 (gumbo). This article helps you understand another feature of flex SDK 4 (gumbo): the visible area (scroller)

A visible area (scroller) or a rolling display component area.
This is a new component added to flex SDK 4 (gumbo) spark. It is used to display the scroll bar when the content boundary in scroler exceeds scroler.

Let's look at a piece of code.
<S: Application xmlns: FX = "http://ns.adobe.com/mxml/2009"
Xmlns: S = "Library: // ns.adobe.com/flex/spark"
Xmlns: MX = "Library: // ns.adobe.com/flex/halo"
Width = "100%" Height = "100%">
........................................ ........................................ ........................
<S: panel width = "400" Height = "100" Title = "panle">
<S: layout>
<S: verticallayout horizontalalign = "center" paddingtop = "30"/>
</S: layout>
<S: vgroup width = "100%" Height = "100%">
<S: button width = "200" label = "tesing1"/>
<S: button width = "200" label = "tesing2"/>
<S: button width = "200" label = "tesing3"/>
</S: vgroup>
</S: Panel>
</S: Application>

The above content is roughly translated:
1. The layout of S: application is of the S: verticallayout nature.
2. It contains a panel container.
3. A vgroup container is included in the panel container.
4. The vgroup container contains three button components.

See the actual running diagram:


As shown in, we found that the button is beyond the Panel boundary, which is a strange phenomenon.
If the above Code is in the halo component or in flex SDK 3, the Panel container will display a scroll bar so that the three button components can be "loaded.
However, this is not implemented in flex SDK 4 (gumbo. But the vgroup boundary exceeds the Panel boundary. (As shown in)

Cause:
Because flex SDK 4 (gumbo) treats the scroll bar as an independent container, that is, the scroroller mentioned above.

The inheritance relationship of scroller:
Scroroller → skinnablecomponent → uicomponent

The inheritance relationships are as follows:
Scroller is a dashboard visualization component, and its position is the same as that of other spark components (such as group and button)

Benefits:
1. encapsulate rolling attributes into a separate container.
2. This will simplify the functions of various spark components.
3. Because skinnablecomponent is inherited, we can modify the skin of containers (that is, using sparkskin and other methods)
4. You can customize the scroll bar style of any visualization component.

Let's take a look at the code snippet after scroller is added:

<S: panel width = "400" Height = "100" Title = "panle">
<S: layout>
<S: verticallayout horizontalalign = "center" paddingtop = "30"/>
</S: layout>
<S: scroller width = "100%" Height = "100%">
<S: vgroup width = "100%" Height = "100%">
<S: button width = "200" label = "tesing1"/>
<S: button width = "200" label = "tesing2"/>
<S: button width = "200" label = "tesing3"/>
</S: vgroup>
</S: scroller>
</S: Panel>

Okay, let's take a look at the effect of adding scroller.


With this setting, it looks like flex SDK 3.
Although it seems that some code is added (due to the need to add <s: scroller>), spark brings us a more single component function encapsulation and better scalability. :)