Flex Examples » overSkin http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting a custom icon on the MX Button control in Flex http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/ http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/#comments Mon, 08 Nov 2010 20:27:35 +0000 Peter deHaan http://blog.flexexamples.com/?p=3427 The following example shows how you can use the MX TitleWindow container’s close button for an MX Button control icon and skin by setting the skinClass style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/ --> <mx:Application name="MX_Button_upIcon_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">   <mx:Style> .titleWindowIconAsIcon { upIcon: Embed("Assets.swf#CloseButtonUp"); overIcon: Embed("Assets.swf#CloseButtonOver"); downIcon: Embed("Assets.swf#CloseButtonDown"); disabledIcon: Embed("Assets.swf#CloseButtonDisabled"); }   .titleWindowIconAsSkin [...]]]> The following example shows how you can use the MX TitleWindow container’s close button for an MX Button control icon and skin by setting the skinClass style.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/ -->
<mx:Application name="MX_Button_upIcon_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <mx:Style>
        .titleWindowIconAsIcon {
            upIcon: Embed("Assets.swf#CloseButtonUp");
            overIcon: Embed("Assets.swf#CloseButtonOver");
            downIcon: Embed("Assets.swf#CloseButtonDown");
            disabledIcon: Embed("Assets.swf#CloseButtonDisabled");
        }
 
        .titleWindowIconAsSkin {
            upSkin: Embed("Assets.swf#CloseButtonUp");
            overSkin: Embed("Assets.swf#CloseButtonOver");
            downSkin: Embed("Assets.swf#CloseButtonDown");
            disabledSkin: Embed("Assets.swf#CloseButtonDisabled");
        }
    </mx:Style>
 
    <mx:Button styleName="titleWindowIconAsIcon" label="Button" />
    <mx:Button styleName="titleWindowIconAsSkin" />
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/11/08/setting-a-custom-icon-on-the-mx-button-control-in-flex/feed/ 1 Changing the default skins on a Button control in Flex http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/#comments Wed, 20 Aug 2008 14:44:49 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ The following example shows how you can modify the default skins for the Flex Button control by setting the skin, upSkin, overSkin, downSkin, and disabledSkin styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ --> <mx:Application name="Button_upSkin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Button id="btn" label="Button" skin="{null}" upSkin="{null}" overSkin="mx.skins.halo.ButtonSkin" downSkin="mx.skins.halo.ButtonSkin" [...]]]> The following example shows how you can modify the default skins for the Flex Button control by setting the skin, upSkin, overSkin, downSkin, and disabledSkin styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Button id="btn"
            label="Button"
            skin="{null}"
            upSkin="{null}"
            overSkin="mx.skins.halo.ButtonSkin"
            downSkin="mx.skins.halo.ButtonSkin"
            disabledSkin="mx.skins.halo.ButtonSkin"
            icon="@Embed('assets/Button.png')" />

</mx:Application>

View source is enabled in the following example.

You can also set the various button skin styles in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        Button {
            skin: ClassReference(null);
            upSkin: ClassReference(null);
            overSkin: ClassReference("mx.skins.halo.ButtonSkin");
            downSkin: ClassReference("mx.skins.halo.ButtonSkin");
            disabledSkin: ClassReference("mx.skins.halo.ButtonSkin");
            icon: Embed("assets/Button.png");
        }
    </mx:Style>

    <mx:Button id="btn"
            label="Button" />

</mx:Application>

Or, you can set the button skin styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/ -->
<mx:Application name="Button_upSkin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.skins.halo.ButtonSkin;

            [Embed("assets/Button.png")]
            private const buttonIcon:Class;

            private function init():void {
                btn.setStyle("skin", null);
                btn.setStyle("upSkin", null);
                btn.setStyle("overSkin", ButtonSkin);
                btn.setStyle("downSkin", ButtonSkin);
                btn.setStyle("disabledSkin", ButtonSkin);
                btn.setStyle("icon", buttonIcon);
            }
        ]]>
    </mx:Script>

    <mx:Button id="btn"
            label="Button"
            initialize="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/20/changing-the-default-skins-on-a-button-control-in-flex/feed/ 2 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 Changing the default calendar icon in a Flex DateField control http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/#comments Sat, 29 Dec 2007 02:09:36 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ The following example shows how you can change the default calendar icon that appears in a DateField control in Flex by setting the skin style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ --> <mx:Application name="DateField_skin_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="top" backgroundColor="white">   <mx:Style> DateField { skin: Embed("clock_add.png"); /* null the skins defined in default.css */ upSkin: ClassReference(null); overSkin: [...]]]> The following example shows how you can change the default calendar icon that appears in a DateField control in Flex by setting the skin style.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/ -->
<mx:Application name="DateField_skin_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">
 
    <mx:Style>
        DateField {
            skin: Embed("clock_add.png");
            /* null the skins defined in default.css */
            upSkin: ClassReference(null);
            overSkin: ClassReference(null);
            downSkin: ClassReference(null);
            disabledSkin: ClassReference(null);
        }
    </mx:Style>
 
    <mx:DateField id="dateField" />
 
</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/12/28/changing-the-default-calendar-icon-in-a-flex-datefield-control/feed/ 14