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.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

4 Responses to Setting a custom required indicator skin on a FormItem container in Flex

  1. John McPeek says:

    Can you put the indicator on the left side of the label like ‘*blah’?

  2. René says:

    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 ?

  3. peterd says:

    René,

    I tried a quick test but wasn’t able to get the indicator skin to change at runtime.
    I’ve filed a bug at http://bugs.adobe.com/jira/browse/SDK-14925. Feel free to sign up for the bug base if you haven’t already and subscribe to the bug.

    Thanks,
    Peter

  4. Jens says:

    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.

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree