Flex Examples
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.
<?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.
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.
Share
Can you put the indicator on the left side of the label like ‘*blah’?
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 ?
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
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.