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

by Peter deHaan on March 3, 2008

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 as: indicatorGap, indicatorSkin

{ 4 comments… read them below or add one }

1 John McPeek March 7, 2008 at 10:59 am: Can you put the indicator on the left side of the label like ‘*blah’?

Reply
2 René March 11, 2008 at 1:08 am: 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 ?

Reply
3 peterd March 11, 2008 at 2:00 pm: 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

Reply
4 Jens February 24, 2009 at 1:46 am: 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.

Reply