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>
0 Responses to “Setting the label placement and text alignment on a ProgressBar control in Flex”
Leave a Reply