Flex Examples » FormItem http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the FormItem label width in a Form container in Flex http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/#comments Mon, 02 Nov 2009 07:59:56 +0000 Peter deHaan http://blog.flexexamples.com/?p=2141 The following example shows how you can set the label width on a Form container in Flex by setting the labelWidth style.

Full code after the jump.

<?xml version="1.0"?> <!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ --> <mx:Application name="Form_labelWidth_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="labelWidth:"> <mx:HSlider id="sldr" minimum="50" maximum="150" value="100" liveDragging="true" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> [...]]]> The following example shows how you can set the label width on a Form container in Flex by setting the labelWidth style.

Full code after the jump.

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelWidth:">
                <mx:HSlider id="sldr"
                        minimum="50"
                        maximum="150"
                        value="100"
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Form id="frm"
            labelWidth="{sldr.value}"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

You can also set the labelWidth property in an external .CSS file or <Style/> block, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        Form {
            labelWidth: 75;
        }
    </mx:Style>
 
    <mx:Form id="frm"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>

Or, you can set the labelWidth style using ActionScript, as seen in the following example:

<?xml version="1.0"?>
<!-- http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/ -->
<mx:Application name="Form_labelWidth_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            protected function sldr_changeHandler(evt:SliderEvent):void {
                frm.setStyle("labelWidth", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelWidth:">
                <mx:HSlider id="sldr"
                        minimum="50"
                        maximum="150"
                        value="100"
                        liveDragging="true"
                        change="sldr_changeHandler(event);"/>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:Form id="frm"
            backgroundColor="yellow">
        <mx:FormHeading label="Form Heading" />
        <mx:FormItem label="Form Item:">
            <mx:Label text="The quick brown fox jumps over the lazy dog" />
        </mx:FormItem>
        <mx:FormItem label="SDK version:">
            <mx:Label id="sdkVer" initialize="sdkVer.text = mx_internal::VERSION;" />
        </mx:FormItem>
        <mx:FormItem label="Flash Player version:">
            <mx:Label text="{Capabilities.version}" />
        </mx:FormItem>
    </mx:Form>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2009/11/01/setting-the-formitem-label-width-in-a-form-container-in-flex/feed/ 1 Toggling form item visibility in a Form container in Flex http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/#comments Sat, 04 Oct 2008 06:32:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ The following example shows how you can toggle FormItem containers in a Flex Form container by setting the includeInLayout and visible properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ --> <mx:Application name="FormItem_includeInLayout_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Form { indicatorGap: 0; paddingLeft: 0; paddingRight: 0; paddingTop: 0; [...]]]> The following example shows how you can toggle FormItem containers in a Flex Form container by setting the includeInLayout and visible properties.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Form {
            indicatorGap: 0;
            paddingLeft: 0;
            paddingRight: 0;
            paddingTop: 0;
            paddingBottom: 0;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="bccButton"
                label="Show BCC"
                toggle="true"
                selected="false" />
        <mx:Button id="fromButton"
                label="Show From"
                toggle="true"
                selected="false" />
    </mx:ApplicationControlBar>

    <mx:HBox width="100%">
        <mx:Button id="sendButton"
                label="Send"
                height="100%" />
        <mx:Form width="100%">
            <mx:FormItem label="From:"
                    includeInLayout="{fromButton.selected}"
                    visible="{fromButton.selected}"
                    width="100%">
                <mx:ComboBox id="fromComboBox"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="To:" width="100%">
                <mx:TextInput id="toTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="CC:" width="100%">
                <mx:TextInput id="ccTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="BCC:"
                    includeInLayout="{bccButton.selected}"
                    visible="{bccButton.selected}"
                    width="100%">
                <mx:TextInput id="bccTextInput"
                        width="100%" />
            </mx:FormItem>
            <mx:FormItem label="Subject:"
                    width="100%">
                <mx:TextInput id="subjectTextInput"
                        width="100%" />
            </mx:FormItem>
        </mx:Form>
    </mx:HBox>

    <mx:TextArea id="bodyTextArea"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/ -->
<mx:Application name="FormItem_includeInLayout_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.containers.HBox;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.controls.TextArea;
            import mx.controls.TextInput;

            private var bccButton:Button;
            private var bccFormItem:FormItem;
            private var bccTextInput:TextInput;
            private var bodyTextArea:TextArea;
            private var ccFormItem:FormItem;
            private var ccTextInput:TextInput;
            private var fromButton:Button;
            private var fromComboBox:ComboBox;
            private var fromFormItem:FormItem;
            private var sendButton:Button;
            private var subjectFormItem:FormItem;
            private var subjectTextInput:TextInput;
            private var toFormItem:FormItem;
            private var toTextInput:TextInput;

            private function init():void {
                bccButton = new Button();
                bccButton.label = "Show BCC";
                bccButton.toggle = true;
                bccButton.selected = true;
                bccButton.addEventListener(Event.CHANGE,
                            bccButton_change);

                fromButton = new Button();
                fromButton.label = "Show From";
                fromButton.toggle = true;
                fromButton.selected = true;
                fromButton.addEventListener(Event.CHANGE,
                            fromButton_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(bccButton);
                appControlBar.addChild(fromButton);
                addChildAt(appControlBar, 0);

                sendButton = new Button();
                sendButton.label = "Send";
                sendButton.percentHeight = 100;

                fromComboBox = new ComboBox();
                fromComboBox.percentWidth = 100;

                fromFormItem = new FormItem();
                fromFormItem.label = "From:";
                fromFormItem.includeInLayout = fromButton.selected;
                fromFormItem.visible = fromButton.selected;
                fromFormItem.percentWidth = 100;
                fromFormItem.addChild(fromComboBox);

                toTextInput = new TextInput();
                toTextInput.percentWidth = 100;

                toFormItem = new FormItem();
                toFormItem.label = "To:";
                toFormItem.percentWidth = 100;
                toFormItem.addChild(toTextInput);

                ccTextInput = new TextInput();
                ccTextInput.percentWidth = 100;

                ccFormItem = new FormItem();
                ccFormItem.label = "CC:";
                ccFormItem.percentWidth = 100;
                ccFormItem.addChild(ccTextInput);

                bccTextInput = new TextInput();
                bccTextInput.percentWidth = 100;

                bccFormItem = new FormItem();
                bccFormItem.label = "BCC:";
                bccFormItem.percentWidth = 100;
                bccFormItem.addChild(bccTextInput);

                subjectTextInput = new TextInput();
                subjectTextInput.percentWidth = 100;

                subjectFormItem = new FormItem();
                subjectFormItem.label = "Subject:";
                subjectFormItem.percentWidth = 100;
                subjectFormItem.addChild(subjectTextInput);

                var form:Form = new Form();
                form.percentWidth = 100;
                form.addChild(fromFormItem);
                form.addChild(toFormItem);
                form.addChild(ccFormItem);
                form.addChild(bccFormItem);
                form.addChild(subjectFormItem);
                form.setStyle("indicatorGap", 0);
                form.setStyle("paddingLeft", 0);
                form.setStyle("paddingRight", 0);
                form.setStyle("paddingTop", 0);
                form.setStyle("paddingBottom", 0);

                var hBox:HBox = new HBox();
                hBox.percentWidth = 100;
                hBox.addChild(sendButton);
                hBox.addChild(form);
                addChild(hBox);

                bodyTextArea = new TextArea();
                bodyTextArea.percentWidth = 100;
                bodyTextArea.percentHeight = 100;
                addChild(bodyTextArea);
            }

            private function bccButton_change(evt:Event):void {
                bccFormItem.includeInLayout = bccButton.selected;
                bccFormItem.visible = bccButton.selected;
            }

            private function fromButton_change(evt:Event):void {
                fromFormItem.includeInLayout = fromButton.selected;
                fromFormItem.visible = fromButton.selected;
            }
        ]]>
    </mx:Script>

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/10/03/toggling-form-item-visibility-in-a-form-container-in-flex/feed/ 3 Changing the label text alignment in a FormItem container in Flex http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/#comments Fri, 06 Jun 2008 08:21:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Script> <![CDATA[ import mx.events.ListEvent; private function comboBox_change(evt:ListEvent):void { var cssObj:CSSStyleDeclaration [...]]]> The following example shows how you can set the text alignment on a Flex FormItem container’s label by setting the textAlign and labelStyleName styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ListEvent;

            private function comboBox_change(evt:ListEvent):void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customTextAlignLabel");
                cssObj.setStyle("textAlign", evt.currentTarget.selectedItem);
            }
        ]]>
    </mx:Script>

    <mx:Style>
        FormItem {
            labelStyleName: customTextAlignLabel;
        }

        .customTextAlignLabel {
            textAlign: left;
        }
    </mx:Style>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="comboBox"
                        dataProvider="[left,center,right]"
                        change="comboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="Button">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ButtonBar">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="CheckBox">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ColorPicker">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="ComboBox">
            <mx:TextInput />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/06/06/changing-the-label-text-alignment-in-a-formitem-container-in-flex/feed/ 10 Customizing a FormItem container’s label in Flex 3 http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/#comments Fri, 21 Mar 2008 14:36:27 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ The following example shows how you can access the Label subcomponent in a Flex FormItem container and do fancy stuff like have form labels with hyperlinks or selectable text by using the itemLabel property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> [...]]]> The following example shows how you can access the Label subcomponent in a Flex FormItem container and do fancy stuff like have form labels with hyperlinks or selectable text by using the itemLabel property.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            import mx.controls.Label;
            import mx.controls.Alert;
            import mx.containers.FormItem;

            private function init2(evt:FlexEvent):void {
                var lbl:Label = FormItem(evt.currentTarget).itemLabel as Label;
                lbl.selectable = true;
            }

            private function init3(evt:FlexEvent):void {
                var lbl:Label = FormItem(evt.currentTarget).itemLabel as Label;
                lbl.htmlText = txt;
                lbl.selectable = true;
                lbl.addEventListener(TextEvent.LINK, label_link);
            }

            private function label_link(evt:TextEvent):void {
                Alert.show("You clicked a link. Have some cake.");
            }
        ]]>
    </mx:Script>

    <mx:String id="txt">
        <![CDATA[<a href="event:att"><u>Hyperlink</u></a> label]]>
    </mx:String>

    <mx:Form maxWidth="500">
        <mx:FormItem id="formItem1"
                label="Default label">
            <mx:Label id="label1"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
        <mx:FormItem id="formItem2"
                label="Selectable label"
                creationComplete="init2(event);">
            <mx:Label id="label2"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
        <mx:FormItem id="formItem3"
                label="Hyperlink label"
                creationComplete="init3(event);">
            <mx:Label id="label3"
                    text="The quick brown fox jumped over the..." />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/21/customizing-a-formitem-containers-label-in-flex-3/feed/ 3 Horizontally aligning items in a FormItem container in Flex http://blog.flexexamples.com/2008/03/18/horizontally-aligning-items-in-a-formitem-container-in-flex/ http://blog.flexexamples.com/2008/03/18/horizontally-aligning-items-in-a-formitem-container-in-flex/#comments Wed, 19 Mar 2008 05:23:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/18/horizontally-aligning-items-in-a-formitem-container-in-flex/ The following example shows how you can align form items horizontally by setting the horizontalAlign style to “left”, “center”, or “right” on the Flex FormItem container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/18/horizontally-aligning-form-items-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> Form { backgroundColor: white; backgroundAlpha: 0.2; borderColor: [...]]]> The following example shows how you can align form items horizontally by setting the horizontalAlign style to “left”, “center”, or “right” on the Flex FormItem container.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/18/horizontally-aligning-form-items-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Form {
            backgroundColor: white;
            backgroundAlpha: 0.2;
            borderColor: black;
            borderStyle: solid;
            borderThickness: 1;
        }

        FormItem {
            labelStyleName: myFormItemLabelStyleName;
        }

        .myFormItemLabelStyleName {
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Form id="form" width="300">
        <mx:FormItem label="left:"
                horizontalAlign="left"
                width="100%">
            <mx:Image source="@Embed('assets/air_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="center:"
                horizontalAlign="center"
                width="100%">
            <mx:Image source="@Embed('assets/fl_appicon-tn.gif')" />
        </mx:FormItem>
        <mx:FormItem label="right:"
                horizontalAlign="right"
                width="100%">
            <mx:Image source="@Embed('assets/fx_appicon-tn.gif')" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/18/horizontally-aligning-items-in-a-formitem-container-in-flex/feed/ 6 Changing the layout direction of a form item in Flex http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/#comments Wed, 19 Mar 2008 05:09:47 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ The following example shows how you can change the direction of a FormItem container in Flex by setting the direction property to “horizontal” or “vertical”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> FormItem { labelStyleName: myFormItemLabelStyleName; } .myFormItemLabelStyleName { fontWeight: [...]]]> The following example shows how you can change the direction of a FormItem container in Flex by setting the direction property to “horizontal” or “vertical”.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            labelStyleName: myFormItemLabelStyleName;
        }

        .myFormItemLabelStyleName {
            fontWeight: bold;
        }
    </mx:Style>

    <mx:Form id="form">
        <mx:FormItem label="horizontal:"
                direction="horizontal">
            <mx:Image source="{Icons.AIR_ICON}"
                    toolTip="Adobe AIR" />
            <mx:Image source="{Icons.FLASH_ICON}"
                    toolTip="Adobe Flash" />
            <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
                    toolTip="Adobe Flash Player" />
            <mx:Image source="{Icons.FLEX_ICON}"
                    toolTip="Adobe Flex" />
        </mx:FormItem>
        <mx:FormItem label="vertical:"
                direction="vertical">
            <mx:Image source="{Icons.AIR_ICON}"
                    toolTip="Adobe AIR" />
            <mx:Image source="{Icons.FLASH_ICON}"
                    toolTip="Adobe Flash" />
            <mx:Image source="{Icons.FLASH_PLAYER_ICON}"
                    toolTip="Adobe Flash Player" />
            <mx:Image source="{Icons.FLEX_ICON}"
                    toolTip="Adobe Flex" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

/src/Icons.as

/** http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/ */
package {
    [Bindable]
    public class Icons {
        public function Icons() {
        }

        [Embed("assets/air_appicon-tn.gif")]
        public static var AIR_ICON:Class;

        [Embed("assets/fl_appicon-tn.gif")]
        public static var FLASH_ICON:Class;

        [Embed("assets/fl_player_appicon-tn.gif")]
        public static var FLASH_PLAYER_ICON:Class;

        [Embed("assets/fx_appicon-tn.gif")]
        public static var FLEX_ICON:Class;
    }
}

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/03/18/changing-the-layout-direction-of-a-form-item-in-flex/feed/ 1 Setting a custom required indicator skin on a FormItem container in Flex http://blog.flexexamples.com/2008/03/03/setting-a-custom-required-indicator-skin-on-a-formitem-container-in-flex/ http://blog.flexexamples.com/2008/03/03/setting-a-custom-required-indicator-skin-on-a-formitem-container-in-flex/#comments Tue, 04 Mar 2008 02:27:33 +0000 Peter deHaan http://blog.flexexamples.com/2008/03/03/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 [...]]]> 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.

 
]]> http://blog.flexexamples.com/2008/03/03/setting-a-custom-required-indicator-skin-on-a-formitem-container-in-flex/feed/ 4 Styling individual FormItem labels using the labelStyleName style http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/#comments Wed, 14 Nov 2007 05:41:15 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style, as seen in the following snippet:

<mx:Style> .requiredLabel { color: red; fontSize: 12; fontWeight: bold; } </mx:Style> <mx:Form> <mx:FormItem label="Field 1:" labelStyleName="requiredLabel" required="true"> <mx:Label id="lbl1" text="{str}" /> </mx:FormItem> </mx:Form>

The labelStyleName style [...]]]> The following example shows you how you can style individual labels in a FormItem container in Flex by setting the labelStyleName style, as seen in the following snippet:

<mx:Style>
    .requiredLabel {
        color: red;
        fontSize: 12;
        fontWeight: bold;
    }
</mx:Style>

<mx:Form>
    <mx:FormItem label="Field 1:"
            labelStyleName="requiredLabel"
            required="true">
        <mx:Label id="lbl1" text="{str}" />
    </mx:FormItem>
</mx:Form>

The labelStyleName style was added in Flex 3 build 186889 (Wed Nov 07 2007 or later). You may need to download a nightly build of the Flex 3 SDK from the Adobe Labs website.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style source="embeddedFonts.css" />
    <mx:Style>
        Form {
            fontFamily: ArialEmbedded;
        }

        FormHeading {
            color: haloSilver;
            fontSize: 24;
        }

        FormItem {
            labelStyleName: defaultLabel;
        }

        .defaultLabel {
            color: black;
            fontSize: 10;
            fontStyle: italic;
            fontWeight: normal;
        }

        .requiredLabel {
            color: red;
            fontSize: 12;
            fontWeight: bold;
        }
    </mx:Style>

    <mx:String id="str">
        <![CDATA[The quick brown fox jumped over the lazy dog.]]>
    </mx:String>

    <mx:Form>
        <mx:FormHeading label="Some form heading!" />
        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 1:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl1" text="{str}" />
        </mx:FormItem>

        <!-- override the default labelStyleName for the FormItem -->
        <mx:FormItem label="Field 2:"
                labelStyleName="requiredLabel"
                required="true">
            <mx:Label id="lbl2" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 3:">
            <mx:Label id="lbl3" text="{str}" />
        </mx:FormItem>

        <!-- default -->
        <mx:FormItem label="Field 4:">
            <mx:Label id="lbl4" text="{str}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/13/styling-individual-formitem-labels-using-the-labelstylename-style/feed/ 3 Setting the gap around the required indicator in a Flex form http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/ http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/#comments Wed, 07 Nov 2007 04:33:08 +0000 Peter deHaan http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/ The following example shows how you can set the gap around the required indicator in a Flex form by setting the indicatorGap style, as seen in the following snippet:

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

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can set the gap around the required indicator in a Flex form by setting the indicatorGap style, as seen in the following snippet:

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

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        FormItem {
            backgroundColor: haloSilver;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private var indicatorGapStyle:CSSStyleDeclaration;

            private function init():void {
                indicatorGapStyle = StyleManager.getStyleDeclaration("FormItem");
            }

            private function slider_change(evt:SliderEvent):void {
                indicatorGapStyle.setStyle("indicatorGap", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="indicatorGap:" />
        <mx:HSlider id="slider"
                minimum="14"
                maximum="100"
                value="14"
                snapInterval="1"
                liveDragging="true"
                dataTipPlacement="bottom"
                dataTipPrecision="0"
                change="slider_change(event);" />
    </mx:ApplicationControlBar>

    <mx:Form>
        <mx:FormItem label="Lorem ipsum:">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="The quick brown fox jumped:" required="true">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="over the lazy dog:" required="true">
            <mx:Text text="The quick brown fox jumped over the lazy dog." />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/11/06/setting-the-gap-around-the-required-indicator-in-a-flex-form/feed/ 2 Changing a Flex FormItem container’s indicator skin http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/ http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/#comments Sun, 07 Oct 2007 06:19:06 +0000 Peter deHaan http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/ The following example shows how you can change the FormItem container’s indicator skin which appears when the form item’s required property is set to true.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white"> <mx:Style> FormItem { indicatorSkin: Embed(source="assets/asterisk_yellow.png"); indicatorGap: 24; /* pixels [...]]]> The following example shows how you can change the FormItem container’s indicator skin which appears when the form item’s required property is set to true.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Style>
        FormItem {
            indicatorSkin: Embed(source="assets/asterisk_yellow.png");
            indicatorGap: 24; /* pixels */
        }

        FormItemLabel {
            textAlign: left;
        }
    </mx:Style>

    <mx:Form>
        <mx:FormHeading label="FORM HEADING" />
        <mx:FormItem label="Name:" required="true">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="Email:" required="true">
            <mx:TextInput />
        </mx:FormItem>
        <mx:FormItem label="Phone number:">
            <mx:TextInput />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/10/06/changing-a-flex-formitem-containers-indicator-skin/feed/ 5