The HRule (Horizontal Rule) control creates a single horizontal line and the VRule (Vertical Rule) control creates a single vertical line. You typically use these controls to create dividing lines within a container.

The following image shows an HRule and a VRule control:

Creating HRule and VRule controls

You define HRule and VRule controls in MXML by using the <mx:HRule> and <mx:VRule> tags, as the following example shows. Specify an id value if you intend to refer to a component elsewhere in your MXML, either in another tag or an ActionScript block.

<?xml version="1.0"?>
<!-- controls\rule\RuleSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example creates the output shown in the preceding image.

You can also use properties of the HRule and VRule controls to specify line width, stroke color, and shadow color, as the following example shows:

<?xml version="1.0"?>
<!-- controls\rule\RuleProps.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:VBox>
        <mx:Label text="Above"/>
        <mx:HRule shadowColor="0xff0000"/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule strokeWidth="10" strokeColor="0x00ff00"/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>
The executing SWF file for the previous example is shown below:

This code produces the following image:

Sizing HRule and VRule controls

For the HRule and VRule controls, the strokeWidth property determines how Flex draws the line, as follows:

• If you set the strokeWidth property to 1, Flex draws a 1-pixel-wide line.
• If you set the strokeWidth property to 2, Flex draws the rule as two adjacent 1-pixel-wide lines, horizontal for an HRule control or vertical for a VRule control. This is the default value.
• If you set the strokeWidth property to a value greater than 2, Flex draws the rule as a hollow rectangle with 1-pixel-wide edges.

The following example shows all three options:

If you set the height property of an HRule control to a value greater than the strokeWidth property, Flex draws the rule within a rectangle of the specified height, and centers the rule vertically within the rectangle. The height of the rule is the height specified by the strokeWidth property.

If you set the width property of a VRule control to a value greater than the strokeWidth property, Flex draws the rule within a rectangle of the specified width, and centers the rule horizontally within the rectangle. The width of the rule is the width specified by the strokeWidth property.

If you set the height property of an HRule control or the width property of a VRule control to a value smaller than the strokeWidth property, the rule is drawn as if it had a strokeWidth property equal to the height or width property.

The strokeColor and shadowColor properties determine the colors of the HRule and VRule controls. The strokeColor property specifies the color of the line as follows:

• If you set the strokeWidth property to 1, specifies the color of the entire line.
• If you set the strokeWidth property to 2, specifies the color of the top line for an HRule control, or the left line for a VRule control.
• If you set the strokeWidth property to a value greater than 2, specifies the color of the top and left edges of the rectangle.

The shadowColor property specifies the shadow color of the line as follows:

• If you set the strokeWidth property to 1, does nothing.
• If you set the strokeWidth property to 2, specifies the color of the bottom line for an HRule control, or the right line for a VRule control.
• If you set the strokeWidth property to a value greater than 2, specifies the color of the bottom and right edges of the rectangle.

Setting style properties

The strokeWidth, strokeColor, and shadowColor properties are style properties. Therefore, you can set them in MXML as part of the tag definition, set them by using the <mx:Style> tag in MXML, or set them by using the setStyle() method in ActionScript.

The following example uses the <mx:Style> tag to set the default value of the strokeColor property of all HRule controls to #00FF00 (lime green), and the default value of the shadowColor property to #0000FF (blue). This example also defines a class selector, called thickRule, with a strokeWidth of 5 that you can use with any instance of an HRule control or VRule control:

<?xml version="1.0"?>
<!-- controls\rule\RuleStyles.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>
        .thickRule {strokeWidth:5}
        HRule {strokeColor:#00FF00; shadowColor:#0000FF}
    </mx:Style>

    <mx:HRule styleName="thickRule"/>
</mx:Application>
The executing SWF file for the previous example is shown below:

This example produces the following image: