Flex Examples » buttonStyleName http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Styling the emphasized button on an MX Alert control in Flex 4 http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/ http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/#comments Fri, 25 Sep 2009 07:16:08 +0000 Peter deHaan http://blog.flexexamples.com/?p=1909 The following example shows how you can style the emphasized button on a Halo/MX Alert control in Flex 4 by setting the buttonStyleName and emphasizedSkin styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/ --> <s:Application name="Halo_Alert_buttonStyleName_emphasizedSkin_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:controlBarContent> <s:Button id="btn" label="Show Alert" click="btn_click(event);" /> </s:controlBarContent>   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo";   [...]]]> The following example shows how you can style the emphasized button on a Halo/MX Alert control in Flex 4 by setting the buttonStyleName and emphasizedSkin styles.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/ -->
<s:Application name="Halo_Alert_buttonStyleName_emphasizedSkin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:controlBarContent>
        <s:Button id="btn"
                label="Show Alert"
                click="btn_click(event);" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|Alert {
            buttonStyleName: alertBtnStyles;
        }
 
        .alertBtnStyles {
            emphasizedSkin: ClassReference("skins.CustomDefaultButtonSkin");
        }
    </fx:Style>
 
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            protected function btn_click(evt:MouseEvent):void {
                Alert.show("Alert text", "Alert title", Alert.YES|Alert.NO);
            }
        ]]>
    </fx:Script>
 
</s:Application>

And the custom skin, skins/CustomDefaultButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/ -->
<s:SparkSkin name="CustomDefaultButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="19"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <fx:Script>
        <![CDATA[
            [Bindable]
            public var cornerRadius:Number = 2;
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                var cr:Number = getStyle("cornerRadius");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
                }
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.01"
                        alpha.downStates="0" />
                <s:GradientEntry color="0x000000"
                        color.downStates="0xFFFFFF"
                        alpha="0.07"
                        alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#FF0000"
                        color.selectedUpStates="#FF0000"
                        color.overStates="#FF0000"
                        color.downStates="#FF0000"
                        alpha="0.85"
                        alpha.selectedOver="1" />
                <s:GradientEntry color="#990000"
                        color.selectedUpStates="#990000"
                        color.over="#990000"
                        color.selectedOver="#990000"
                        color.downStates="#990000"
                        alpha="0.85"
                        alpha.selectedOver="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9" radiusX="{cornerRadius}">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9" radiusX="{cornerRadius}">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                    alpha="0.33"
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22"
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" radiusX="{cornerRadius}" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="#FF0000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="#990000" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="{cornerRadius}">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0x000000"
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="0x000000"
                        alpha="0.75"
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

The default Spark skins for the MX/Halo controls/containers can be found in the Flex SDK at:
%Flex SDK%\frameworks\projects\sparkskins\src\mx\skins\spark\*.


View source is enabled in the following example.

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/09/25/styling-the-emphasized-button-on-a-halo-alert-control-in-flex-4/feed/ 3 Setting an image background on a Halo ButtonBar control in Flex 4 http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/#comments Fri, 10 Jul 2009 06:59:17 +0000 Peter deHaan http://blog.flexexamples.com/?p=1474 The following example shows how you can set an image background on a Halo ButtonBar control (with default Spark skin) in Flex 4 by setting the buttonStyleName, firstButtonStyleName, lastButtonStyleName, and skin styles.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ --> <s:Application name="Halo_ButtonBar_buttonStyleName_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace [...]]]> The following example shows how you can set an image background on a Halo ButtonBar control (with default Spark skin) in Flex 4 by setting the buttonStyleName, firstButtonStyleName, lastButtonStyleName, and skin styles.

Full code after the jump.

The following example(s) require Flash Player 10 and the Adobe Flex 4 SDK. To download the Adobe Flash Builder 4 trial, see http://www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            buttonStyleName="buttonBarButtonStyles"
            firstButtonStyleName="buttonBarButtonStyles"
            lastButtonStyleName="buttonBarButtonStyles"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The custom ButtonBar button skin class, skins/CustomButtonBarButtonSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:SparkSkin name="CustomButtonBarButtonSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- layer 1: shadow -->
    <s:Rect left="0" right="0" bottom="-1" height="1">
        <s:fill>
            <s:SolidColor color="black" 
                    color.downStates="white" 
                    alpha="0.07"
                    alpha.downStates="0.5" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 2: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('assets/pattern_149.gif')" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="black" alpha="0.0099" />
                <s:GradientEntry color="black" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="white" 
                    alpha="0.33" 
                    alpha.selectedUpStates="0.22"
                    alpha.overStates="0.22" 
                    alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="white" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1"
            includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="black" alpha="0.09" />
        </s:fill>
    </s:Rect>
 
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="black" 
                        alpha="0.5625"
                        alpha.down="0.6375"
                        alpha.selectedStates="0.6375" />
                <s:GradientEntry color="black" 
                        alpha="0.75" 
                        alpha.down="0.85"
                        alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
 
</s:SparkSkin>

You can also set the buttonStyleName 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/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
 
        mx|ButtonBar {
            buttonStyleName: buttonBarButtonStyles;
            firstButtonStyleName: buttonBarButtonStyles;
            lastButtonStyleName: buttonBarButtonStyles;
        }
 
        .buttonBarButtonStyles {
            skin: ClassReference("skins.CustomButtonBarButtonSkin");
        }
    </fx:Style>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

Or, you can set the buttonStyleName style using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                var buttonBarStyles:CSSStyleDeclaration = StyleManager.getStyleDeclaration("mx.controls.ButtonBar");
                buttonBarStyles.setStyle("buttonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                buttonBarStyles.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
            }
        ]]>
    </fx:Script>
 
    <mx:ButtonBar id="btnBar"
            dataProvider="[The,Quick,Brown,Fox,Jumps,Over,The,Lazy,Dog]"
            horizontalCenter="0" verticalCenter="0" />
 
</s: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/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/ -->
<s:Application name="Halo_ButtonBar_buttonStyleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        initialize="init();">
 
    <fx:Script>
        <![CDATA[
            import skins.CustomButtonBarButtonSkin;
            import mx.controls.ButtonBar;
 
            private var btnBar:ButtonBar;
 
            private function init():void {
                var buttonBarButtonStyles:CSSStyleDeclaration = new CSSStyleDeclaration(".buttonBarButtonStyles");
                buttonBarButtonStyles.setStyle("skin", CustomButtonBarButtonSkin);
 
                btnBar = new ButtonBar();
                btnBar.dataProvider = ["The", "Quick", "Brown", "Fox", "Jumps", "Over", "The", "Lazy", "Dog"];
                btnBar.setStyle("buttonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("firstButtonStyleName", "buttonBarButtonStyles");
                btnBar.setStyle("lastButtonStyleName", "buttonBarButtonStyles");
                btnBar.horizontalCenter = 0;
                btnBar.verticalCenter = 0;
                addElement(btnBar);
            }
        ]]>
    </fx:Script>
 
</s:Application>

This entry is based on a beta version of the Flex 4 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 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/09/setting-an-image-background-on-a-halo-buttonbar-control-in-flex-4/feed/ 0 Setting a label’s font weight on a Flex LinkBar and ToggleButtonBar control http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/#comments Mon, 14 Jan 2008 15:28:48 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .myCustomLinkButtonStyleName { [...]]]> The following example shows how you can set the font weight of a label on LinkBar control and ToggleButton control in Flex by setting the linkButtonStyleName style and buttonStyleName style respectively.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .myCustomLinkButtonStyleName {
            fontWeight: normal;
        }

        .myCustomButtonStyleName {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}"
            linkButtonStyleName="myCustomLinkButtonStyleName" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}"
            buttonStyleName="myCustomButtonStyleName" />

</mx:Application>

View source is enabled in the following example.

Or, you can set the styles a bit more globally by using the following snippet:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        LinkBar {
            linkButtonStyleName: regularFontWeight;
        }

        ToggleButtonBar {
            buttonStyleName: regularFontWeight;
        }

        .regularFontWeight {
            fontWeight: normal;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="One" />
        <mx:Object label="Two" />
        <mx:Object label="Three" />
        <mx:Object label="Four" />
    </mx:Array>

    <mx:LinkBar id="linkBar"
            dataProvider="{arr}" />

    <mx:ToggleButtonBar id="toggleButtonBar"
            dataProvider="{arr}" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/14/setting-a-labels-font-weight-on-a-flex-linkbar-and-togglebuttonbar-control/feed/ 3 Setting skins on the the Flex ButtonBar control http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/#comments Thu, 10 Jan 2008 08:08:19 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ The following example shows how you can skin the ButtonBar control in Flex by setting the buttonStyleName style and setting one or more of the following skin styles: skin, upSkin, overSkin, downSkin, disabledSkin.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ --> <mx:Application name="ButtonBar_buttonStyleName_skin_test " xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Style> ButtonBar [...]]]> The following example shows how you can skin the ButtonBar control in Flex by setting the buttonStyleName style and setting one or more of the following skin styles: skin, upSkin, overSkin, downSkin, disabledSkin.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/ -->
<mx:Application name="ButtonBar_buttonStyleName_skin_test "
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        ButtonBar {
            buttonStyleName: myCustomButtonStyleName;
            color: #999999;
        }
 
        .myCustomButtonStyleName {
            skin: Embed(source="assets/ButtonBarSkins.swf",
                        symbol="ButtonBarButton_skin");
        }
    </mx:Style>
 
    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;
 
            private function slider_change(evt:SliderEvent):void {
                buttonBar.setStyle("buttonHeight", evt.value);
            }
        ]]>
    </mx:Script>
 
    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="ColorPicker" />
        <mx:Object label="ComboBox" />
    </mx:Array>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="buttonHeight:">
                <mx:HSlider id="slider"
                        minimum="24"
                        maximum="64"
                        snapInterval="1"
                        tickInterval="4"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}" />
 
</mx:Application>

View source is enabled in the following example.

For simplicity sake, I only set the generic “skin” style which applies to all states (up, over, down, and disabled). You will also notice that we embedded a skin from a SWF file and the skins various scale grid settings (scaleGridTop, scaleGridBottom, scaleGridLeft, and scaleGridRight) are set in the FLA/SWF file and not in the MXML file itself. This allows you to resize the ButtonBar control without distorting the 2 pixel border on the bottom of the skin.

 
]]> http://blog.flexexamples.com/2008/01/10/setting-skins-on-the-the-flex-buttonbar-control/feed/ 10 Setting the button label text alignment in a Flex ButtonBar control http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/ http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/#comments Tue, 08 Jan 2008 07:58:26 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/ The following example shows how you can change the text alignment of button labels in a ButtonBar control in Flex by setting the buttonStyleName and textAlign styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> ButtonBar { buttonStyleName: myCustomButtonStyleName; } .myCustomButtonStyleName [...]]]> The following example shows how you can change the text alignment of button labels in a ButtonBar control in Flex by setting the buttonStyleName and textAlign styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        ButtonBar {
            buttonStyleName: myCustomButtonStyleName;
        }

        .myCustomButtonStyleName {
            cornerRadius: 0;
            fontWeight: normal;
            textAlign: right;
        }
    </mx:Style>

    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            themeColor="haloSilver"
            buttonHeight="32"
            width="100%">
    </mx:ButtonBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/07/setting-the-button-label-text-alignment-in-a-flex-buttonbar-control/feed/ 0 Setting the button corner radius in a Flex ButtonBar control http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/ http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/#comments Tue, 08 Jan 2008 07:34:52 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/ The following example shows how you can set the corner radius on a ButtonBar control in Flex by setting the buttonStyleName and cornerRadius styles.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/ --> <mx:Application name="ButtonBar_buttonStyleName_cornerRadius_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Style> .myCustomButtonStyleName { cornerRadius: 16; } </mx:Style>   <mx:Array id="arr"> <mx:Object label="Button" /> <mx:Object label="ButtonBar" /> <mx:Object [...]]]> The following example shows how you can set the corner radius on a ButtonBar control in Flex by setting the buttonStyleName and cornerRadius styles.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/ -->
<mx:Application name="ButtonBar_buttonStyleName_cornerRadius_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .myCustomButtonStyleName {
            cornerRadius: 16;
        }
    </mx:Style>
 
    <mx:Array id="arr">
        <mx:Object label="Button" />
        <mx:Object label="ButtonBar" />
        <mx:Object label="CheckBox" />
        <mx:Object label="ColorPicker" />
    </mx:Array>
 
    <mx:ButtonBar id="buttonBar"
            buttonStyleName="myCustomButtonStyleName"
            dataProvider="{arr}"
            height="32" />
 
</mx:Application>

View source is enabled in the following example.

If you want to set the buttonStyleName style using an external .CSS file or <mx:Style /> block, you can use code similar to the following snippet:

<mx:Style>
    ButtonBar {
        buttonStyleName: myCustomButtonStyleName;
    }
 
    .myCustomButtonStyleName {
        cornerRadius: 16;
    }
</mx:Style>
 
]]> http://blog.flexexamples.com/2008/01/07/setting-the-button-corner-radius-in-a-flex-buttonbar-control/feed/ 3 Styling the Alert control’s nested buttons http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/ http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/#comments Thu, 03 Jan 2008 15:43:23 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/ The following example shows how you can customize the appearance of the buttons in an Alert control in Flex by setting the buttonStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" creationComplete="init();"> <mx:Style> @font-face { src: local("Comic Sans MS"); fontFamily: myComicSansMS; [...]]]> The following example shows how you can customize the appearance of the buttons in an Alert control in Flex by setting the buttonStyleName style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Style>
        @font-face {
            src: local("Comic Sans MS");
            fontFamily: myComicSansMS;
            fontWeight: normal;
        }

        Alert {
            buttonStyleName: myCustomButtonStyleName;
        }

        .myCustomButtonStyleName {
            color: red;
            cornerRadius: 12;
            fontFamily: myComicSansMS;
            fontSize: 10;
            fontWeight: normal;
            textDecoration: underline;
            themeColor: red;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var alert:Alert;

            private function init():void {
                var myMessage:String = "Lorem ipsum dolor sit amet, consectetuer adipiscing elit.\\nDonec tincidunt sollicitudin sem.";
                var myTitle:String = "The quick brown fox jumped over the lazy dog";
                alert = Alert.show(myMessage, myTitle);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Launch alert" click="init();" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2008/01/03/styling-the-alert-controls-nested-buttons/feed/ 0 Changing the fill colors of a ButtonBar control in Flex http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/#comments Thu, 03 Jan 2008 03:03:44 +0000 Peter deHaan http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ The following example shows how you can change the background fill colors of a ButtonBar control in Flex by setting the buttonStyleName, fillColors, and fillAlphas styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .allButtons2 { /* Creates a gradient from [...]]]> The following example shows how you can change the background fill colors of a ButtonBar control in Flex by setting the buttonStyleName, fillColors, and fillAlphas styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .allButtons2 {
            /* Creates a gradient from red/orange when button is in the
               "out" state. */
            fillColors: red, haloOrange;
        }

        .allButtons4 {
            /* Creates a gradient from red/orange when button is in the
               "out" state. Creates a gradient from green/blue when
               button is in the "over" state. */
            fillColors: red, haloOrange, haloGreen, haloBlue;
        }

        .allButtonsSolid {
            fillColors: red, red;
        }

        .allButtonsSolidOpaque {
            fillAlphas: 1.0, 1.0;
            fillColors: red, red;
        }
    </mx:Style>

    <mx:ViewStack id="viewStack"
            visible="false"
            includeInLayout="false">
        <mx:VBox label="One">
            <mx:Label text="One" />
        </mx:VBox>
        <mx:VBox label="Two">
            <mx:Label text="Two" />
        </mx:VBox>
        <mx:VBox label="Three">
            <mx:Label text="Three" />
        </mx:VBox>
    </mx:ViewStack>

    <mx:Form>
        <mx:FormItem label="2 fill colors defined:">
            <mx:ButtonBar id="buttonBar2"
                    buttonStyleName="allButtons2"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="4 fill colors defined:">
            <mx:ButtonBar id="buttonBar4"
                    buttonStyleName="allButtons4"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="solid fill:">
            <mx:ButtonBar id="buttonBarSolid"
                    buttonStyleName="allButtonsSolid"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
        <mx:FormItem label="solid opaque fill:">
            <mx:ButtonBar id="buttonBarSolidOpaque"
                    buttonStyleName="allButtonsSolidOpaque"
                    dataProvider="{viewStack}" />
        </mx:FormItem>
    </mx:Form>

</mx:Application>

View source is enabled in the following example.

As you can see in the previous example, there are four separate ButtonBar controls:
1) The first ButtonBar control, buttonBar2, uses a custom buttonStyleName style (.allButtons2) which has an array of two items defined for its fillColors array:

.allButtons2 {
    /* Creates a gradient from red/orange when button is in the
        "out" state. */
    fillColors: red, haloOrange;
}

These two colors specify the gradient that is used for each button in the ButtonBar control. As you can see, the top of the button has a red-ish hue and the bottom of the button has more of an orange-ish hue.

2) The second ButtonBar control, buttonBar4, uses a custom buttonStyleName style (.allButtons4) which has an array of four items defined for its fillColors array:

.allButtons4 {
    /* Creates a gradient from red/orange when button is in the
       "out" state. Creates a gradient from green/blue when
       button is in the "over" state. */
    fillColors: red, haloOrange, haloGreen, haloBlue;
}

The first two colors specify the gradient that is used for the “out” state (the state where the cursor is not over the button) of each button. The last two colors specify the gradient that is used for the “over” state (the state where the cursor is over the button) of each button. So again, when the cursor is not over the button, the top of the button has a red-ish hue and the bottom of the button has more of an orange-ish hue. When the user moves their cursor over a button in the ButtonBar control, the button switches to a green-to-blue gradient.

3) The third ButtonBar control, buttonBarSolid, uses a custom buttonStyleName style (.allButtonsSolid) which has an array of two items defined for its fillColors array:

.allButtonsSolid {
    fillColors: red, red;
}

Both of the colors are the same, giving each of the buttons a solid fill instead of a gradient fill. Similar to the first ButtonBar control, buttonBar2, moving the mouse cursor over each button in the ButtonBar control a slightly darker looking fill.

4) The fourth ButtonBar control, buttonBarSolidOpaque, uses a custom buttonStyleName style (.allButtonsSolidOpaque) which has an array of two items defined for its fillColors array, but it also defines a new style, fillAlphas, which is an array of alpha fill values:

.allButtonsSolidOpaque {
    fillAlphas: 1.0, 1.0;
    fillColors: red, red;
}

As you can see, the fill colors are again using the same color for each entry, giving the button fill a solid fill instead of a gradient fill. The fillAlphas style is an array of two values, [1.0, 1.0], which controls the alpha for each of the items in the fillColors style array. This causes the fill color to appear as a deeper red, rather than a slightly faded/muted appearance.

You can also set the fillColors and fillAlphas styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        .customButtonBarFillColors {
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function init():void {
                var cssObj:CSSStyleDeclaration = StyleManager.getStyleDeclaration(".customButtonBarFillColors");
                cssObj.setStyle("fillColors", [0xFF0000, "haloOrange", "haloOrange", "#FF0000"]);
                cssObj.setStyle("fillAlphas", [1.0, 1.0, 0.2, 0.4]);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button id="button"
                label="set button styles"
                click="init();" />
    </mx:ApplicationControlBar>

    <mx:ButtonBar id="buttonBar"
            buttonStyleName="customButtonBarFillColors"
            themeColor="haloOrange">
        <mx:dataProvider>
            <mx:Array>
                <mx:String>One</mx:String>
                <mx:String>Two</mx:String>
                <mx:String>Three</mx:String>
            </mx:Array>
        </mx:dataProvider>
    </mx:ButtonBar>

</mx:Application>

View source is enabled in the following example.

Note that you can also specify an additional two values for the fillAlphas style which represent the fill values when the current button in a ButtonBar control is in an “over” state, similar to the second ButtonBar control (buttonBar4) in the first example.

So in the previous example, when you roll over each button in the buttonBar ButtonBar control the fill alpha for the button goes from a solid 1.0/1.0 to a gradient fill alpha of 0.2/0.4 (20% alpha at the top of the button to 40% alpha at the bottom of the button).

 
]]> http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/feed/ 6 Styling the Flex Alert control http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/#comments Sun, 12 Aug 2007 05:15:27 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ --> [...]]]> This is a more complex version of my previous example. This time in addition to making the Alert control’s text non-selectable, we use an embedded font for the Alert title, message, buttons, as well as edit the drop shadow, remove the rounded corners, and remove the button skins.

Since this example uses the mx_internal namespace, you can't always depend on this behavior to work in future versions of the Flex SDK. Use at your own risk.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/ -->
<mx:Application name="Alert_style_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="showAlert()"
        applicationComplete="init()">
 
    <!-- Used by the ApplicationControlBar control. -->
    <mx:String id="fileName" />
    <mx:String id="fileSize" />
 
    <!-- Used by the Alert control. -->
    <mx:String id="message">The quick brown fox jumped over the lazy dog.
 
The quick brown fox jumped over the lazy dog.</mx:String>
    <mx:String id="title">The quick brown fox jumped over the lazy dog?</mx:String>
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
 
            private var a:Alert;
 
            private function init():void {
                var appInfo:LoaderInfo = Application.application.loaderInfo;
                /* Just grab the filename from the SWF URL. */
                fileName = (appInfo.url).split("/").pop();
                /* Convert bytes to kilobytes. */
                fileSize = (appInfo.bytesTotal / 1024).toFixed(2);
            }
 
            private function showAlert():void {
                Alert.yesLabel = "Accept";
                Alert.noLabel = "Reject";
                Alert.buttonWidth = 120;
 
                a = Alert.show(
                        message,
                        title,
                        Alert.NO | Alert.YES
                    );
                /* Make the Alert form's text non-selectable. */
                a.mx_internal::alertForm.mx_internal::textField.selectable = false;
            }
        ]]>
    </mx:Script>
 
    <mx:Style>
        @font-face{
            src: url("./fonts/base02.ttf");
            fontFamily: "Base02";
        }
 
        Alert {
            titleStyleName: "alertTitle";
            messageStyleName: "alertMessage";
            buttonStyleName: "alertButton";
            dropShadowEnabled: true;
            shadowDistance: 5;
            shadowDirection: right;
            cornerRadius: 0;
            embedFonts: true;
            fontFamily: Base02;
        }
 
        .alertTitle {
            letterSpacing: 0;
            fontSize: 14;
            color: red;
        }
 
        .alertMessage {
            letterSpacing: 0;
            fontSize: 10;
            fontWeight: normal;
            color: black;
        }
 
        .alertButton {
            letterSpacing: 0;
            fontSize: 11;
            cornerRadius: 10;
            fontWeight: normal;
            textRollOverColor: white;
            color: red;
            skin: ClassReference(null);
        }
    </mx:Style>
 
    <!-- Display SWF name and file size. -->
    <mx:ApplicationControlBar id="applicationControlBar" dock="true">
        <mx:Label id="info" text="{fileName} ({fileSize}kb)" />
    </mx:ApplicationControlBar>
 
    <!-- Click to launch Alert control. -->
    <mx:Button label="Launch Alert" click="showAlert();" />
 
</mx:Application>

View source is enabled in the following application.

Base 02 font by www.stereo-type.net.

 
]]> http://blog.flexexamples.com/2007/08/11/styling-the-flex-alert-control/feed/ 17 Styling buttons in an Alert control http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/ http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/#comments Fri, 10 Aug 2007 05:05:52 +0000 Peter deHaan http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/ Here’s a basic example of applying a custom style to an Alert control’s buttons and giving them a nice, rounded effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> .roundedAlertButtons { cornerRadius: 10; font-weight: bold; color: black; } </mx:Style> <mx:Script> <![CDATA[ [...]]]> Here’s a basic example of applying a custom style to an Alert control’s buttons and giving them a nice, rounded effect.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Style>
        .roundedAlertButtons {
            cornerRadius: 10;
            font-weight: bold;
            color: black;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private var alert:Alert;

            private function showAlert():void {
                alert = Alert.show("The quick brown fox jumped over the lazy dog. The quick brown fox jumped over the lazy dog.", "I'm an Alert control.", Alert.YES | Alert.NO);
                alert.setStyle("buttonStyleName", "roundedAlertButtons");
            }
        ]]>
    </mx:Script>

    <mx:Button label="Show alert" click="showAlert();" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/08/09/styling-buttons-in-an-alert-control/feed/ 0