Understanding the FormSeparatorFX

The FormSeparatorFX is a control for separating content using a border, label and icon. There are may different layouts you can achive from this simple component.

The screen shot above shows the different combinations using verticalAlign and labelPlacement.

The image is also using the GradientBorder as the borderSkin for the component.

Introduction

This class adds layout functionality to the label and icon. Using the labelPlacement property and horizontalAlign style, you can achieve various layout types.

You also have all padding styles;

• paddingTop
• paddingBottom
• paddingLeft
• paddingRight

to adjust to look as well.

The component also uses a labelStyleName style that applies to the label. For this implementation of the IconLabelControl class, you can just as easily apply styles or a styleName straight to the component itself.

Below is the typical mxml you will use with the FormSeparatorFX component.

The label and icon control the view of the component.

The labelPlacement property and the verticalAlign style control to the look and feel of the component.

The component is as simple as a HRule but, allows for a border, label and icon which the HRule does not.