Flex Examples » Form 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