Flex 2 Developer's Guide > Building User Interfaces for
Flex Applications > Using Controls > HRule and VRule controls

HRule and VRule controls

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:

The HRule and VRule controls have the following default properties:

Property	Default value
Default size	Horizontal Rule The default width is 100 pixels, and the default height is 2 pixels. By default, the HRule control is not resizable; set `width` and `height` to percentage values to enable resizing. Vertical Rule The default height is 100 pixels, and the default width is 2 pixels. By default, the VRule control is not resizable; set `width` and `height` to percentage values to enable resizing.
`strokeWidth`	2 pixels
`strokeColor`	`0xC4CCCC`
`shadowColor`	`0xEEEEEE`

Subtopics

Creating HRule and VRule controls

Sizing HRule and VRule controls

Setting style properties

Creating HRule and VRule controls

You define HRule and VRule controls in MXML 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>

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="0xEEEEEE"/>
        <mx:Label text="Below"/>
    </mx:VBox>
    <mx:HBox>
        <mx:Label text="Left"/>
        <mx:VRule strokeWidth="10" strokeColor="0xC4CCCC"/>
        <mx:Label text="Right"/>
    </mx:HBox>
</mx:Application>

This code produces the following image:

HRule and VRule controls with line width

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:

Sizing HRule and VRule controls

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.

NOTE

If the height and width properties are specified as percentage values, the actual pixel values are calculated before the height and width properties are compared to the strokeWidth 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 using the <mx:Style> tag in MXML, or set them 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>

This example produces the following image:

HRule control using the <mx:Style> tag

Flex 2.01