Setting a custom required indicator skin on a FormItem container in Flex

The following example shows how you can set a custom indicator skin on a Flex FormItem container by setting the indicatorSkin style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/03/setting-a-custom-required-indicator-skin-on-a-formitem-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            indicatorGap: 24;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormHeading label="Controls" />
        <mx:FormItem label="Button:"
                required="true"
                indicatorSkin="@Embed('assets/Button.png')">
            <mx:Label text="Lorem ipsum..." />
        </mx:FormItem>
        <mx:FormItem label="ButtonBar:"
                required="true"
                indicatorSkin="@Embed('assets/ButtonBar.png')">
            <mx:Label text="Lorem ipsum..." />
        </mx:FormItem>
        <mx:FormItem label="CheckBox:"
                required="true"
                indicatorSkin="@Embed('assets/CheckBox.png')">
            <mx:Label text="Lorem ipsum..." />
        </mx:FormItem>
        <mx:FormItem label="ColorPicker:"
                required="true"
                indicatorSkin="@Embed('assets/ColorPicker.png')">
            <mx:Label text="Lorem ipsum..." />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

4 thoughts on “Setting a custom required indicator skin on a FormItem container in Flex

  1. Can you change the indicator skin at runtime as well ?
    Or put more practically: How can I make the FormItem display different icons depending on the content of associated Text-Fields ? For instance to show the default red one when the field is empty but switch to green when filled ?

  2. Ok this took me couple of hours to figure out, so i want to share this with you.

    I needed a required indicator placed directly after the label like John McPeek.

    So I decided to extend FormItem, here´s the code:

    package custom
    {
    import mx.containers.FormItem;
    import mx.controls.Label;
    import mx.controls.Text;
    import mx.events.FlexEvent;

    public class FormItemReqLabel extends FormItem
    {

    private static var REQ_INDICATOR : String = “*”;
    private static var REQ_COLOR : String = “#ffec19”;

    // recognized values: left, right
    private static var REQ_ALIGN : String = “right”;

    public function FormItemReqLabel()
    {
    super();

    addEventListener(FlexEvent.CREATION_COMPLETE, init);
    }

    private function init(e : FlexEvent) : void {

    if ( REQ_ALIGN == “left” ) {
    Label (itemLabel).htmlText = ” +REQ_INDICATOR +”+ label;
    } else {
    Label (itemLabel).htmlText = label + ” +REQ_INDICATOR +”;
    }

    }

    }
    }

    You can use it just like FormItem. I gugled alot to find a solution for this, but i couldnt find anything. It would be nicer to use the original required option, but i couldnt figure out how. Any improvements are welcome.

Comments are closed.