The following example shows how you can remove the default corner radius on the Flex Gumbo FxButtonBar control by creating a custom skin and setting the skinClass style.
Full code after the jump.
To use the following code, you must have Flash Player 10 and a Flex Gumbo SDK installed in your Flex Builder 3. For more information on downloading and installing the Gumbo SDK into Flex Builder 3, see “Using the beta Gumbo SDK in Flex Builder 3″.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/11/removing-the-default-corner-radius-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<FxApplication name="FxButtonBar_skinClass_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white">
<layout>
<BasicLayout />
</layout>
<Declarations>
<ArrayCollection id="arrColl"
source="[The,Quick,Brown,Fox]" />
</Declarations>
<Form horizontalCenter="0" verticalCenter="0">
<FormItem label="default:">
<FxButtonBar id="btnBar1"
dataProvider="{arrColl}" />
</FormItem>
<FormItem label="custom:">
<FxButtonBar id="btnBar2"
dataProvider="{arrColl}"
skinClass="CustomFxButtonBarSkin"/>
</FormItem>
</Form>
</FxApplication>
Next, in the custom FxButtonBar skin file, simply remove the firstButton and lastButton declarations, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/11/removing-the-default-corner-radius-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<Skin name="CustomFxButtonBarSkin"
mlns="http://ns.adobe.com/mxml/2009"
alpha.disabled="0.5">
<Metadata>
[HostComponent("mx.components.FxButtonBar")]
</Metadata>
<states>
<State name="normal" />
<State name="disabled" />
</states>
<Declarations>
<Component id="middleButton" >
<ButtonBarButton skinClass="mx.skins.spark.FxButtonBarMiddleButtonSkin"
width="100%" height="100%" />
</Component>
</Declarations>
<DataGroup id="dataGroup" width="100%" height="100%">
<layout>
<HorizontalLayout gap="-1" />
</layout>
</DataGroup>
</Skin>
You can also set the skinClass style in an external .CSS file or <Style/> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/11/removing-the-default-corner-radius-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<FxApplication name="FxButtonBar_skinClass_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white">
<layout>
<BasicLayout />
</layout>
<Style>
FxButtonBar {
skinClass: ClassReference("CustomFxButtonBarSkin");
}
</Style>
<FxButtonBar id="btnBar"
horizontalCenter="0"
verticalCenter="0">
<dataProvider>
<ArrayCollection source="[The,Quick,Brown,Fox]" />
</dataProvider>
</FxButtonBar>
</FxApplication>
Or, you can set the skinClass style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/03/11/removing-the-default-corner-radius-on-the-fxbuttonbar-control-in-flex-gumbo/ -->
<FxApplication name="FxButtonBar_skinClass_test"
xmlns="http://ns.adobe.com/mxml/2009"
backgroundColor="white">
<layout>
<BasicLayout />
</layout>
<Script>
<![CDATA[
private function btn_click(evt:MouseEvent):void {
btnBar.setStyle("skinClass", CustomFxButtonBarSkin);
}
]]>
</Script>
<FxButton id="btn"
label="Set skin class"
left="10"
top="10"
click="btn_click(event);"/>
<FxButtonBar id="btnBar"
horizontalCenter="0"
verticalCenter="0">
<dataProvider>
<ArrayCollection source="[The,Quick,Brown,Fox]" />
</dataProvider>
</FxButtonBar>
</FxApplication>
This entry is based on a beta version of the Flex Gumbo SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex Gumbo SDK.
