The following example shows how you can style the last button in a Flex ButtonBar control
by setting the lastButtonStyleName style.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ButtonBar_lastButtonStyleName_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.lastButton {
color: red;
cornerRadius: 10;
fontWeight: normal;
themeColor: haloGreen;
}
</mx:Style>
<mx:ButtonBar id="buttonBar"
dataProvider="[Red,Orange,Yellow,Green,Blue]"
lastButtonStyleName="lastButton" />
</mx:Application>
You can also set the lastButtonStyleName style in an external .
CSS file or <Style> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ButtonBar_lastButtonStyleName_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
.lastButton {
color: red;
cornerRadius: 10;
fontWeight: normal;
themeColor: haloGreen;
}
ButtonBar {
lastButtonStyleName: lastButton;
}
</mx:Style>
<mx:ButtonBar id="buttonBar"
dataProvider="[Red,Orange,Yellow,Green,Blue]" />
</mx:Application>
Or, you can set the lastButtonStyleName style using ActionScript,
as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ButtonBar_lastButtonStyleName_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function init():void {
buttonBar.setStyle("lastButtonStyleName", "lastButton");
}
]]>
</mx:Script>
<mx:Style>
.lastButton {
color: red;
cornerRadius: 10;
fontWeight: normal;
themeColor: haloGreen;
}
</mx:Style>
<mx:ButtonBar id="buttonBar"
dataProvider="[Red,Orange,Yellow,Green,Blue]"
initialize="init();" />
</mx:Application>
Due to popular demand, here is the “same” example in a more ActionScript friendly format:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application name="ButtonBar_lastButtonStyleName_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white"
initialize="init();">
<mx:Script>
<![CDATA[
import mx.controls.ButtonBar;
private var arr:Array;
private var lastButtonStyle:CSSStyleDeclaration;
private var buttonBar:ButtonBar;
private function init():void {
arr = [];
arr.push("Red");
arr.push("Orange");
arr.push("Yellow");
arr.push("Green");
arr.push("Blue");
lastButtonStyle = new CSSStyleDeclaration(".lastButton");
lastButtonStyle.setStyle("color", "red");
lastButtonStyle.setStyle("cornerRadius", 10);
lastButtonStyle.setStyle("fontWeight", "normal");
lastButtonStyle.setStyle("themeColor", "haloGreen");
buttonBar = new ButtonBar();
buttonBar.dataProvider = arr;
buttonBar.setStyle("lastButtonStyleName", "lastButton");
addChild(buttonBar);
}
]]>
</mx:Script>
</mx:Application>
Care to share this story?
