Setting the label placement and text alignment on a ProgressBar control in Flex

The following example shows how you can align the label placement and text alignment on a Flex ProgressBar control by setting the labelPlacement property, and the textAlign and labelWidth styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-label-placement-and-text-alignment-on-a-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import flash.text.TextFormatAlign;
            import mx.controls.ProgressBarLabelPlacement;
            import mx.events.ListEvent;

            private function adjustLabelWidth():void {
                var lWidth:Number;
                switch (labelPlacementComboBox.selectedItem.label) {
                    case ProgressBarLabelPlacement.LEFT:
                    case ProgressBarLabelPlacement.RIGHT:
                        lWidth = NaN;
                        break;
                    default:
                        lWidth = progressBar.width;
                        break;
                }
                progressBar.setStyle("labelWidth", lWidth);
            }
        ]]>
    </mx:Script>

    <mx:Array id="labelPlacementDP">
        <mx:Object label="{ProgressBarLabelPlacement.LEFT}" />
        <mx:Object label="{ProgressBarLabelPlacement.RIGHT}" />
        <mx:Object label="{ProgressBarLabelPlacement.TOP}" />
        <mx:Object label="{ProgressBarLabelPlacement.BOTTOM}" />
        <mx:Object label="{ProgressBarLabelPlacement.CENTER}" />
    </mx:Array>

    <mx:Array id="textAlignDP">
        <mx:Object label="{TextFormatAlign.LEFT}" />
        <mx:Object label="{TextFormatAlign.CENTER}" />
        <mx:Object label="{TextFormatAlign.RIGHT}" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="labelPlacementComboBox"
                        dataProvider="{labelPlacementDP}"
                        selectedIndex="3"
                        change="adjustLabelWidth();"/>
            </mx:FormItem>
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="textAlignComboBox"
                        dataProvider="{textAlignDP}"
                        change="adjustLabelWidth();" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="{labelPlacementComboBox.selectedItem.label}"
            textAlign="{textAlignComboBox.selectedItem.label}"
            width="200" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-label-placement-and-text-alignment-on-a-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ProgressBar {
            textAlign: "center";
            labelWidth: 200;
        }
    </mx:Style>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            labelPlacement="bottom"
            width="200" />

</mx:Application>

Or, you can set the textAlign and labelWidth styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/12/aligning-the-label-placement-and-text-alignment-on-a-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import flash.text.TextFormatAlign;
            import mx.controls.ProgressBarLabelPlacement;
            import mx.events.ListEvent;

            private function adjustLabelWidth():void {
                var lWidth:Number;
                switch (labelPlacementComboBox.selectedItem.label) {
                    case ProgressBarLabelPlacement.LEFT:
                    case ProgressBarLabelPlacement.RIGHT:
                        lWidth = NaN;
                        break;
                    default:
                        lWidth = progressBar.width;
                        break;
                }
                progressBar.setStyle("labelWidth", lWidth);
            }

            private function labelPlacementComboBox_change(evt:ListEvent):void {
                var value:String = labelPlacementComboBox.selectedItem.label;
                progressBar.labelPlacement = value;
                adjustLabelWidth();
            }

            private function textAlignComboBox_change(evt:ListEvent):void {
                var value:String = textAlignComboBox.selectedItem.label;
                progressBar.setStyle("textAlign", value);
                adjustLabelWidth();
            }
        ]]>
    </mx:Script>

    <mx:Array id="labelPlacementDP">
        <mx:Object label="{ProgressBarLabelPlacement.LEFT}" />
        <mx:Object label="{ProgressBarLabelPlacement.RIGHT}" />
        <mx:Object label="{ProgressBarLabelPlacement.TOP}" />
        <mx:Object label="{ProgressBarLabelPlacement.BOTTOM}" />
        <mx:Object label="{ProgressBarLabelPlacement.CENTER}" />
    </mx:Array>

    <mx:Array id="textAlignDP">
        <mx:Object label="{TextFormatAlign.LEFT}" />
        <mx:Object label="{TextFormatAlign.CENTER}" />
        <mx:Object label="{TextFormatAlign.RIGHT}" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="labelPlacementComboBox"
                        dataProvider="{labelPlacementDP}"
                        selectedIndex="3"
                        change="labelPlacementComboBox_change(event);"/>
            </mx:FormItem>
            <mx:FormItem label="textAlign:">
                <mx:ComboBox id="textAlignComboBox"
                        dataProvider="{textAlignDP}"
                        change="textAlignComboBox_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            indeterminate="true"
            width="200" />

</mx:Application>

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/12/aligning-the-label-placement-and-text-alignment-on-a-progressbar-control-in-flex/ -->
<mx:Application name="ProgressBar_textAlign_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import flash.text.TextFormatAlign;

            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ComboBox;
            import mx.controls.ProgressBar;
            import mx.controls.ProgressBarLabelPlacement;
            import mx.events.ListEvent;

            private var labelPlacementComboBox:ComboBox;
            private var labelPlacementDP:Array;
            private var progressBar:ProgressBar;
            private var textAlignComboBox:ComboBox;
            private var textAlignDP:Array;

            private function init():void {
                labelPlacementDP = [];
                labelPlacementDP.push({label:ProgressBarLabelPlacement.LEFT});
                labelPlacementDP.push({label:ProgressBarLabelPlacement.RIGHT});
                labelPlacementDP.push({label:ProgressBarLabelPlacement.TOP});
                labelPlacementDP.push({label:ProgressBarLabelPlacement.BOTTOM});
                labelPlacementDP.push({label:ProgressBarLabelPlacement.CENTER});

                textAlignDP = [];
                textAlignDP.push({label:TextFormatAlign.LEFT});
                textAlignDP.push({label:TextFormatAlign.CENTER});
                textAlignDP.push({label:TextFormatAlign.RIGHT});

                labelPlacementComboBox = new ComboBox();
                labelPlacementComboBox.dataProvider = labelPlacementDP;
                labelPlacementComboBox.selectedIndex = 3;
                labelPlacementComboBox.addEventListener(ListEvent.CHANGE,
                            labelPlacementComboBox_change);

                textAlignComboBox = new ComboBox();
                textAlignComboBox.dataProvider = textAlignDP;
                textAlignComboBox.addEventListener(ListEvent.CHANGE,
                            textAlignComboBox_change);

                var formItem1:FormItem = new FormItem();
                formItem1.label = "labelPlacement:";
                formItem1.addChild(labelPlacementComboBox);

                var formItem2:FormItem = new FormItem();
                formItem2.label = "textAlign:";
                formItem2.addChild(textAlignComboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem1);
                form.addChild(formItem2);

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

                progressBar = new ProgressBar();
                progressBar.indeterminate = true;
                progressBar.width = 200;
                addChild(progressBar);
            }

            private function adjustLabelWidth():void {
                var lWidth:Number;
                switch (labelPlacementComboBox.selectedItem.label) {
                    case ProgressBarLabelPlacement.LEFT:
                    case ProgressBarLabelPlacement.RIGHT:
                        lWidth = NaN;
                        break;
                    default:
                        lWidth = progressBar.width;
                        break;
                }
                progressBar.setStyle("labelWidth", lWidth);
            }

            private function labelPlacementComboBox_change(evt:ListEvent):void {
                var value:String = labelPlacementComboBox.selectedItem.label;
                progressBar.labelPlacement = value;
                adjustLabelWidth();
            }

            private function textAlignComboBox_change(evt:ListEvent):void {
                var value:String = textAlignComboBox.selectedItem.label;
                progressBar.setStyle("textAlign", value);
                adjustLabelWidth();
            }
        ]]>
    </mx:Script>

</mx:Application>