Flex Examples
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.
<?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:
<?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:
<?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:
<?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>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
