Setting a Flex ProgressBar control’s text indent

by Peter deHaan on September 18, 2007

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

Full code after the jump.

<?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.

Tagged as: labelPlacement, labelWidth, textIndent

{ 5 comments… read them below or add one }

1 Nice September 20, 2007 at 6:46 pm: peterd , thanks for the sample.

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

Cheers

Reply
2 peterd September 20, 2007 at 8:58 pm: 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

Reply
3 Nice September 21, 2007 at 4:32 pm: thanks peterd, you always kindly and greatly answered.

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

Cheers

Reply
4 flexgreat February 4, 2009 at 8:34 pm: 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?

Reply
5 Flex Blog March 24, 2009 at 3:45 am: Thanks for this example. Check this out for another example about a progressbar:

http://www.flex-blog.com/using-the-progressbar-with-a-file-download-in-flex/

Cheers

Reply