Flex Examples » styleName 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 Setting multiple style names on a Spark Button control in Flex 4 http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/#comments Wed, 27 Oct 2010 16:59:01 +0000 Peter deHaan http://blog.flexexamples.com/?p=3410 The following example shows how you can define multiple style names on a Spark Button control in Flex 4 by setting the styleName property to a space separated list of CSS style names.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_styleName_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"> <s:layout> <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout>   <fx:Style> .boldWeight { [...]]]> The following example shows how you can define multiple style names on a Spark Button control in Flex 4 by setting the styleName property to a space separated list of CSS style names.

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/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_styleName_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        .boldWeight {
            fontWeight: bold;
        }
        .redColor {
            color: red;
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="MXML"
            styleName="redColor boldWeight" />
 
    <s:Button id="btn2"
            label="ActionScript (click)"
            toolTip="Click to apply styles"
            click="btn2.styleName = 'redColor boldWeight';" />
 
</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/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/feed/ 5 Applying styles to specific Spark List controls in Flex 4 http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/#comments Thu, 05 Nov 2009 15:21:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=2172 The following example shows how you can selectively style Spark List controls in Flex 4 using Advanced CSS and the styleName property or the id property.

Full code after the jump.

1) The following example uses s|List selector and applies the baseColor style to ALL Spark List component instances in your Flex application:

<?xml [...]]]> The following example shows how you can selectively style Spark List controls in Flex 4 using Advanced CSS and the styleName property or the id property.

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.

1) The following example uses s|List selector and applies the baseColor style to ALL Spark List component instances in your Flex application:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_styles_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";
 
        s|List {
            baseColor: red;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:ArrayList id="arrList">
            <fx:Object label="The quick brown fox jumps over the lazy dog" />
            <fx:Object label="One" />
            <fx:Object label="Two" />
            <fx:Object label="Three" />
            <fx:Object label="Four" />
            <fx:Object label="Five" />
            <fx:Object label="Six" />
            <fx:Object label="Seven" />
            <fx:Object label="Eight" />
            <fx:Object label="Nine" />
        </s:ArrayList>
    </fx:Declarations>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:List id="list1"
                dataProvider="{arrList}"
                width="100" height="100" />
        <s:List id="list2"
                dataProvider="{arrList}"
                width="100" height="100" />
        <s:List id="list3"
                dataProvider="{arrList}"
                width="100" height="100" />
    </s:HGroup>
 
</s:Application>

2) The following example uses s|List selector and applies the baseColor style to any Spark List component instances which have a styleName property of “listHSBStyles”:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_styles_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";
 
        s|List.listHSBStyles {
            baseColor: red;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:ArrayList id="arrList">
            <fx:Object label="The quick brown fox jumps over the lazy dog" />
            <fx:Object label="One" />
            <fx:Object label="Two" />
            <fx:Object label="Three" />
            <fx:Object label="Four" />
            <fx:Object label="Five" />
            <fx:Object label="Six" />
            <fx:Object label="Seven" />
            <fx:Object label="Eight" />
            <fx:Object label="Nine" />
        </s:ArrayList>
    </fx:Declarations>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:List id="list1"
                dataProvider="{arrList}"
                width="100" height="100" />
        <s:List id="list2"
                dataProvider="{arrList}"
                styleName="listHSBStyles"
                width="100" height="100" />
        <s:List id="list3"
                dataProvider="{arrList}"
                styleName="listHSBStyles"
                width="100" height="100" />
    </s:HGroup>
 
</s:Application>

3) The following example uses s|List selector and applies the baseColor style to any Spark List component instances which have an id property of “list1″:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/ -->
<s:Application name="Spark_List_HScrollBar_styles_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";
 
        s|List#list1 {
            baseColor: red;
        }
    </fx:Style>
 
    <fx:Declarations>
        <s:ArrayList id="arrList">
            <fx:Object label="The quick brown fox jumps over the lazy dog" />
            <fx:Object label="One" />
            <fx:Object label="Two" />
            <fx:Object label="Three" />
            <fx:Object label="Four" />
            <fx:Object label="Five" />
            <fx:Object label="Six" />
            <fx:Object label="Seven" />
            <fx:Object label="Eight" />
            <fx:Object label="Nine" />
        </s:ArrayList>
    </fx:Declarations>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:List id="list1"
                dataProvider="{arrList}"
                width="100" height="100" />
        <s:List id="list2"
                dataProvider="{arrList}"
                width="100" height="100" />
        <s:List id="list3"
                dataProvider="{arrList}"
                width="100" height="100" />
    </s:HGroup>
 
</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/11/05/applying-styles-to-specific-spark-list-controls-in-flex-4/feed/ 0 Displaying an icon on a toggle button in Flex 4 http://blog.flexexamples.com/2009/07/28/displaying-an-icon-on-a-toggle-button-in-flex-4/ http://blog.flexexamples.com/2009/07/28/displaying-an-icon-on-a-toggle-button-in-flex-4/#comments Wed, 29 Jul 2009 03:55:47 +0000 Peter deHaan http://blog.flexexamples.com/?p=1278 The following example shows how you can create a simple toggle button with an icon in Flex 4 by using the Spark ButtonBarButton control and specifying the icon in the data property, and then using a custom skin class.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/28/displaying-an-icon-on-a-toggle-button-in-flex-4/ --> <s:Application name="Spark_ButtonBarButton_data_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"> [...]]]> The following example shows how you can create a simple toggle button with an icon in Flex 4 by using the Spark ButtonBarButton control and specifying the icon in the data property, and then using a custom skin class.

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/28/displaying-an-icon-on-a-toggle-button-in-flex-4/ -->
<s:Application name="Spark_ButtonBarButton_data_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|ButtonBarButton.iconButton {
            skinClass: ClassReference("skins.CustomIconButtonSkin");
        }
    </fx:Style>
 
    <s:HGroup horizontalCenter="0" verticalCenter="0">
        <s:ButtonBarButton id="redBtn"
                label="Red"
                data="@Embed('assets/bullet_red.png')"
                styleName="iconButton" />
        <s:ButtonBarButton id="orangeBtn"
                label="Orange"
                data="@Embed('assets/bullet_orange.png')"
                styleName="iconButton" />
        <s:ButtonBarButton id="yelloyBtn"
                label="Yellow"
                data="@Embed('assets/bullet_yellow.png')"
                styleName="iconButton" />
        <s:ButtonBarButton id="greenBtn"
                label="Green"
                data="@Embed('assets/bullet_green.png')"
                styleName="iconButton" />
        <s:ButtonBarButton id="blueBtn"
                label="Blue"
                data="@Embed('assets/bullet_blue.png')"
                styleName="iconButton" />
    </s:HGroup>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/28/displaying-an-icon-on-a-toggle-button-in-flex-4/ -->
<s:SparkSkin name="CustomIconButtonSkin"
        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="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
        <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
        <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
            [HostComponent("spark.components.ButtonBarButton")]
        ]]>
    </fx:Metadata>
 
    <fx:Script>
        /* Define the skin elements that should not be colorized. 
        For toggle button, the graphics are colorized but the label is not. */
        static private const exclusions:Array = ["labelDisplay"];
 
        override public function get colorizeExclusions():Array {return exclusions;}
    </fx:Script>
 
    <!-- layer 1: shadow -->
    <s:Rect left="-1" right="-1" top="-1" bottom="-1"
            radiusX="2" radiusY="2">
        <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="2" radiusY="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0xFFFFFF" 
                        color.selectedUpStates="0xBBBDBD"
                        color.overStates="0xBBBDBD" 
                        color.downStates="0xAAAAAA" 
                        alpha="0.85" 
                        alpha.overAndSelected="1" />
                <s:GradientEntry color="0xD8D8D8" 
                        color.selectedUpStates="0x9FA0A1"
                        color.over="0x9FA0A1" 
                        color.overAndSelected="0x8E8F90"
                        color.downStates="0x929496" 
                        alpha="0.85"
                        alpha.overAndSelected="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9"
            radiusX="2" radiusY="2">
        <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="2" radiusY="2">
        <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="2" radiusY="2"
            excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"
                        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, overAndSelected">
        <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, overAndSelected">
        <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, overAndSelected">
        <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, overAndSelected">
        <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="2" radiusY="2">
        <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:HGroup horizontalCenter="0" verticalCenter="1"
            left="10" right="10" top="2" bottom="2"
            creationComplete="img.source = hostComponent.data;">
        <!-- layer 8: icon -->
        <s:BitmapImage id="img" />
 
        <!-- layer 9: text -->
        <s:SimpleText id="labelDisplay"
                textAlign="center"
                verticalAlign="middle"
                maxDisplayedLines="1"
                height="100%"/>
    </s:HGroup>
 
</s:SparkSkin>

View source is enabled in the following example.

Icons copyright of famfamfam.com.

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/28/displaying-an-icon-on-a-toggle-button-in-flex-4/feed/ 4 Setting the label color on a CheckBox control in Flex http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/ http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/#comments Mon, 26 Jan 2009 07:05:13 +0000 Peter deHaan http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/ The following example shows how you can set the text and theme color on a Flex CheckBox control based on whether the control is selected or not.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/ --> <mx:Application name="CheckBox_color_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> CheckBox { fontWeight: bold; iconColor: [...]]]> The following example shows how you can set the text and theme color on a Flex CheckBox control based on whether the control is selected or not.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/ -->
<mx:Application name="CheckBox_color_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        CheckBox {
            fontWeight: bold;
            iconColor: green;
        }

        .selectedStyle {
            color: green;
            textRollOverColor: green;
            textSelectedColor: green;
            themeColor: green;
        }

        .unselectedStyle {
            color: red;
            textRollOverColor: red;
            textSelectedColor: red;
            themeColor: red;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var tgt:CheckBox = evt.currentTarget as CheckBox;
                if (tgt.selected) {
                    tgt.styleName = "selectedStyle";
                } else {
                    tgt.styleName = "unselectedStyle";
                }
            }
        ]]>
    </mx:Script>

    <mx:CheckBox id="checkBox"
            label="CheckBox"
            selected="false"
            styleName="unselectedStyle"
            change="checkBox_change(event);" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2009/01/25/setting-the-label-color-on-a-checkbox-control-in-flex/feed/ 1 Changing the RichTextEditor control’s style name in Flex http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/#comments Tue, 01 Jan 2008 02:31:35 +0000 Peter deHaan http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ The following example shows how you can change the style name for the Flex RichTextEditor control to the predefined “.opaquePanel” style, by setting the styleName property on the RichTextEditor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:ToggleButtonBar selectedIndex="1" itemClick="richTextEditor.styleName [...]]]> The following example shows how you can change the style name for the Flex RichTextEditor control to the predefined “.opaquePanel” style, by setting the styleName property on the RichTextEditor.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar selectedIndex="1"
                itemClick="richTextEditor.styleName = event.item.data;">
            <mx:dataProvider>
                <mx:Array>
                    <mx:Object label="default" data="" />
                    <mx:Object label="opaquePanel" data="opaquePanel" />
                </mx:Array>
            </mx:dataProvider>
        </mx:ToggleButtonBar>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor"
            title="RichTextEditor"
            status="version {richTextEditor.getStyle('version')}"
            styleName="opaquePanel"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

As of the December 4, 2007 build, the defaults.css file (in the installed SDK folder’s \frameworks\projects\framework\ folder) lists the “.opaquePanel” style as:

.opaquePanel
{
	backgroundColor: #FFFFFF;
	borderAlpha: 1;
	borderColor: #FFFFFF;
	footerColors: #E7E7E7, #C7C7C7;
	headerColors: #E7E7E7, #D9D9D9;
}
 
]]> http://blog.flexexamples.com/2007/12/31/changing-the-richtexteditor-controls-style-name-in-flex/feed/ 2 Setting a Flex application’s style name http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/ http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/#comments Wed, 19 Sep 2007 06:46:49 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/ The following example shows how you can use the styleName style in a Flex Application to remove the background image, set the background color to white and left aligns the content.

To quote the Flex 2.0.1 documentation, “Overriding the default Application container styles“:

The Flex default style sheet defines a plain style name [...]]]> The following example shows how you can use the styleName style in a Flex Application to remove the background image, set the background color to white and left aligns the content.

To quote the Flex 2.0.1 documentation, “Overriding the default Application container styles“:

The Flex default style sheet defines a plain style name that sets all padding to 0 pixels, removes the default background image, sets the background color to white, and left-aligns the children.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Script>
        <![CDATA[
            private function plainStyle():void {
                Application.application.setStyle("styleName", "plain");
            }

            private function defaultStyle():void {
                Application.application.setStyle("styleName", undefined);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="styleName = 'plain'"
                click="plainStyle();" />
        <mx:Button label="styleName = undefined"
                click="defaultStyle();" />
    </mx:ApplicationControlBar>

    <mx:Button label="Button 1" />
    <mx:Button label="Button 2" />
    <mx:Button label="Button 3" />

</mx:Application>

View source is enabled in the following example.

As you can see in the previous example, when setting the Application’s styleName style to “plain”, the content becomes left aligned. If you want to center the content horizontally within the application, set the <mx:Application /> tag’s horizontalAlign style to “center”, as seen in the following snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        horizontalAlign="center">
    ...
</mx:Application>

Note that you can also set the styleName style directly in the <mx:Application /> tag by using the following snippet:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        styleName="plain">
    ...
</mx:Application>

OK, looking a bit closer, it seems you can also set the styleName as a property, which I think I prefer, and what the documentation says (Application class documentation in the Flex 2.0.1 LiveDocs). To use the styleName property instead of styleName style, change the <mx:Script /> code block in the previous (big) example to the following:

<mx:Script>
    <![CDATA[
        private function plainStyle():void {
            Application.application.styleName = "plain";
        }

        private function defaultStyle():void {
            Application.application.styleName = undefined;
        }
    ]]>
</mx:Script>

Also, looking at the default.css style sheet in the Flex 3 beta SDK (see: [FlexSDK]\frameworks\projects\framework\defaults.css):

.plain
{
    backgroundColor: #FFFFFF;
    backgroundImage: "";
    horizontalAlign: "left";
    paddingBottom: 0;
    paddingLeft: 0;
    paddingRight: 0;
    paddingTop: 0;
}
 
]]> http://blog.flexexamples.com/2007/09/18/setting-a-flex-applications-style-name/feed/ 10 Styling the HSlider control using CSS http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/#comments Wed, 12 Sep 2007 07:22:22 +0000 Peter deHaan http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:Style> @font-face{ src: url("./fonts/arial.ttf"); fontFamily: "ArialEmbedded"; } .MyLabel { fontFamily: ArialEmbedded; fontSize: 15; fontWeight: [...]]]> The following example shows how you can style a HSlider (or VSlider) control in Flex using Cascading Style Sheets (CSS).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        @font-face{
            src: url("./fonts/arial.ttf");
            fontFamily: "ArialEmbedded";
        }

        .MyLabel {
            fontFamily: ArialEmbedded;
            fontSize: 15;
            fontWeight: normal;
        }

        .MyDataTip {
            backgroundAlpha: 1.0;
            backgroundColor: haloBlue;
            color: white;
            cornerRadius: 10;
            fontWeight: bold;
            letterSpacing: 1;
        }

        .MySlider {
            dataTipOffset: 0;
            dataTipPrecision: 0;
            dataTipPlacement: left;
            dataTipStyleName: MyDataTip;
            showTrackHighlight: true;
            labelStyleName: MyLabel;
        }
    </mx:Style>

    <mx:Array id="labelArr">
        <mx:Number>-10</mx:Number>
        <mx:Number>0</mx:Number>
        <mx:Number>10</mx:Number>
        <mx:Number>20</mx:Number>
    </mx:Array>

    <mx:HSlider id="slider"
            minimum="-10"
            maximum="20"
            labels="{labelArr}"
            snapInterval="1"
            tickInterval="10"
            styleName="MySlider" />

</mx:Application>

View source is enabled in the following example.

 
]]> http://blog.flexexamples.com/2007/09/12/styling-the-hslider-control-using-css/feed/ 0 Embedding images using style sheets and the <mx:Style> tag http://blog.flexexamples.com/2007/07/25/embedding-images-using-style-sheets-and-the-tag/ http://blog.flexexamples.com/2007/07/25/embedding-images-using-style-sheets-and-the-tag/#comments Thu, 26 Jul 2007 03:07:12 +0000 Peter deHaan http://blog.flexexamples.com/2007/07/25/embedding-images-using-style-sheets-and-the-tag/ Just when you thought I may have run out of Embed examples… Here’s a quick example of embedding an PNG icon using an <mx:Style> block.

Full code after the jump.

The following example creates a simple app with three Button control instances. As you can see the first two buttons both display a checkmark [...]]]> Just when you thought I may have run out of Embed examples… Here’s a quick example of embedding an PNG icon using an <mx:Style> block.

Full code after the jump.

The following example creates a simple app with three Button control instances. As you can see the first two buttons both display a checkmark icon even though no explicit icon or style was set on the button. This is because we created a style for the entire Button class, which sets the icon to an embedded asset, “bulletCheck.png”. The third button uses a different icon because we set the styleName property which overrides the icon style with the “bulletWarning.png” asset. Finally, if you click the last button instance, an Alert pop-up displays showing that the default Button styles cascade right down to the nested buttons within the Alert control.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white">

    <mx:Style>
        /* This style applies to all Buttons, including those in Alert controls. */
        Button {
            icon: Embed(source="assets/bulletCheck.png");
        }

        /* Create a custom style class. */
        .bulletWarning {
            icon: Embed(source="assets/bulletWarning.png");
        }
    </mx:Style>

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

            private var a:Alert;

            private function showAlert():void {
                a = Alert.show("message");
            }
        ]]>
    </mx:Script>

    <mx:Button label="bug" />
    <mx:Button label="also a bug"/>
    <mx:Button label="Alert.show()" click="showAlert()" styleName="bulletWarning" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2007/07/25/embedding-images-using-style-sheets-and-the-tag/feed/ 0