Setting a Flex ProgressBar control’s text indent

The following example shows how you can control the amount of text indenting on a progress bar label.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/18/setting-a-flex-progressbar-controls-text-indent/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function progressBar_creationComplete():void {
                progressBar.setStyle("labelWidth", progressBar.width);
                progressBar.setProgress(35, 100);
            }

            private function comboBox_change():void {
                progressBar.labelPlacement = comboBox.selectedItem.toString();
            }

            private function slider_change():void {
                progressBar.setStyle("textIndent", slider.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Label text="textIndent:" />
        <mx:HSlider id="slider"
                minimum="0"
                maximum="60"
                liveDragging="true"
                showTrackHighlight="true"
                dataTipPrecision="0"
                snapInterval="1"
                tickInterval="10"
                labels="[0,20,40,60]"
                change="slider_change();" />

        <mx:Spacer width="50" />

        <mx:Label text="labelPlacement:" />
        <mx:ComboBox id="comboBox"
                selectedIndex="4"
                change="comboBox_change();">
            <mx:dataProvider>
                <mx:Array>
                    <mx:String>left</mx:String>
                    <mx:String>center</mx:String>
                    <mx:String>right</mx:String>
                    <mx:String>top</mx:String>
                    <mx:String>bottom</mx:String>
                </mx:Array>
            </mx:dataProvider>
        </mx:ComboBox>

    </mx:ApplicationControlBar>

    <mx:ProgressBar id="progressBar"
            mode="manual"
            label="%1 of %2 (%3%%)"
            creationComplete="progressBar_creationComplete();" />

</mx:Application>

View source is enabled in the following example.

0 thoughts on “Setting a Flex ProgressBar control’s text indent

  1. peterd , thanks for the sample.

    Is there a way to customize the flex preloader? such as change the text, color, etc.

    Cheers

  2. Nice,

    I’ve honestly never tried customizing the default preloader before, although that sounds like an excellent idea for a future entry.
    I did find this page in the Flex 2.0.1 documentation though which may give you some ideas:
    Showing the download progress of an application“.
    There are several good looking subtopics too, including the following:
    * Disabling the download progress bar
    * Creating a custom progress bar
    * Download progress bar events
    * Creating a simple subclass of the DownloadProgressBar class
    * Creating a subclass of the DownloadProgressBar class
    * Creating a subclass of Sprite

  3. thanks peterd, you always kindly and greatly answered.

    That’s way I have to read the site before going to bed :))

    Cheers

  4. thanks for da cool sample..
    do you have any example of progress bar during upload file using AIR application.
    i’m new in programming and i found that flex is more fun.
    can u help me?