Styling the sequence label on a Spark FormItem container in Flex Hero

In a previous example, “Setting the sequence label on a Spark FormItem container in Flex Hero”, we saw how you could set a sequence label on a Spark FormItem container in Flex Hero by setting the sequenceLabel property.

The following example shows how you can style the Spark FormItem container in Flex Hero by styling the FormItem container’s sequenceLabelDisplay skin part.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero SDK. To download the Adobe Flash Builder 4 trial, see www.adobe.com/products/flex/. To download the latest nightly build of the Flex Hero SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/08/29/styling-the-sequence-label-on-a-spark-formitem-container-in-flex-hero/ -->
<s:Application name="Spark_FormItem_sequenceLabelDisplay_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|FormItem s|Label#sequenceLabelDisplay {
            fontSize: 19;
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}">
        <s:layout>
            <s:FormLayout id="frmLay" gap="7" />
        </s:layout>
        <s:FormHeading label="Spark Form Heading" />
        <s:FormItem sequenceLabel="1." label="Username:">
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:">
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

Because the color and fontWeight properties are explicitly set in the default FormItemSkin file, if you want to change these styles you’ll need to create a custom skin using MXML or ActionScript and override those styles using the setStyle() method or clear the styles using the clearStyle() method so you can style the sequenceLabelDisplay skin part globally using CSS, as seen in the following snippets.

You can extend the default FormItemSkin and explicitly style the sequenceLabelDisplay skin part using the setStyle() method:

package {
    import flash.text.engine.FontPosture;
    import flash.text.engine.FontWeight;
    import spark.skins.spark.FormItemSkin;
 
    public class CustomSparkFormItemSkin extends FormItemSkin {
        override public function CustomSparkFormItemSkin() {
            super();
            sequenceLabelDisplay.setStyle("color", "red");
            sequenceLabelDisplay.setStyle("fontStyle", FontPosture.ITALIC);
            sequenceLabelDisplay.setStyle("fontWeight", FontWeight.BOLD);
        }
    }
}

Or you can extend the default FormItemSkin and unset the default values using the clearStyle() method, which allows you to set the styles using CSS:

package {
    import flash.text.engine.FontPosture;
    import flash.text.engine.FontWeight;
    import spark.skins.spark.FormItemSkin;
 
    public class CustomSparkFormItemSkin extends FormItemSkin {
        override public function CustomSparkFormItemSkin() {
            super();
            sequenceLabelDisplay.clearStyle("color");
            sequenceLabelDisplay.clearStyle("fontWeight");
        }
    }
}
<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
 
    s|FormItem {
        skinClass: ClassReference("CustomSparkFormItemSkin");
    }
 
    s|FormItem s|Label#sequenceLabelDisplay {
        color: red;
        fontSize: 19;
        fontStyle: italic;
        fontWeight: bold;
    }
</fx:Style>

This entry is based on a beta version of the Flex Hero SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Hero SDK.