Flex Examples http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Setting the icon placement on a Spark Button control in Flex Hero http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/#comments Sat, 18 Dec 2010 17:47:39 +0000 Peter deHaan http://blog.flexexamples.com/?p=3471 In a previous example, “Setting an icon on a Spark Button in Flex Hero”, we saw how you can set the icon on a Spark Button in Flex Hero by setting the icon style.

The following example shows how you can set the icon placement on a Spark Button control in Flex Hero by [...]]]> In a previous example, “Setting an icon on a Spark Button in Flex Hero”, we saw how you can set the icon on a Spark Button in Flex Hero by setting the icon style.

The following example shows how you can set the icon placement on a Spark Button control in Flex Hero by setting the iconPlacement style.

[HeroHeader]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left"
            iconPlacement="left" />
    <s:Button id="btn2"
            label="iconPlacement=right"
            iconPlacement="right" />
    <s:Button id="btn3"
            label="iconPlacement=top"
            iconPlacement="top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom"
            iconPlacement="bottom" />
 
</s:Application>

You can also set the iconPlacement 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/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
        s|Button#btn1 {
            iconPlacement: left;
        }
        s|Button#btn2 {
            iconPlacement: right;
        }
        s|Button#btn3 {
            iconPlacement: top;
        }
        s|Button#btn4 {
            iconPlacement: bottom;
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left" />
    <s:Button id="btn2"
            label="iconPlacement=right" />
    <s:Button id="btn3"
            label="iconPlacement=top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom" />
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/ -->
<s:Application name="Spark_Button_iconPlacement_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"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import spark.components.IconPlacement;
 
            protected function init():void {
                btn1.setStyle("iconPlacement", IconPlacement.LEFT);
                btn2.setStyle("iconPlacement", IconPlacement.RIGHT);
                btn3.setStyle("iconPlacement", IconPlacement.TOP);
                btn4.setStyle("iconPlacement", IconPlacement.BOTTOM);
            }
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|Button {
            icon: Embed("assets/asterisk_orange.png");
        }
    </fx:Style>
 
    <s:Button id="btn1"
            label="iconPlacement=left" />
    <s:Button id="btn2"
            label="iconPlacement=right" />
    <s:Button id="btn3"
            label="iconPlacement=top" />
    <s:Button id="btn4"
            label="iconPlacement=bottom" />
 
</s:Application>

[HeroFooter]

 
]]> http://blog.flexexamples.com/2010/12/18/setting-the-icon-placement-on-a-spark-button-control-in-flex-hero/feed/ 20 Setting an icon on a Spark Button in Flex Hero http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/ http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/#comments Fri, 17 Dec 2010 21:43:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=3463 The following example shows how you can set the icon on a Spark Button in Flex Hero by setting the icon style.

[HeroHeader]

The following example requires Flex SDK 4.5.0.18623 or later.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/ --> <s:Application name="Spark_Button_icon_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" /> </s:layout>   <fx:Script> <![CDATA[ [Embed("assets/asterisk_orange.png")] [...]]]> The following example shows how you can set the icon on a Spark Button in Flex Hero by setting the icon style.

[HeroHeader]

The following example requires Flex SDK 4.5.0.18623 or later.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/ -->
<s:Application name="Spark_Button_icon_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            [Embed("assets/asterisk_orange.png")]
            protected const ICON:Class;
        ]]>
    </fx:Script>
 
    <s:Button label="Spark Button with dynamic icon" icon="assets/asterisk_orange.png" />
    <s:Button label="Spark Button with inline embedded icon" icon="@Embed('assets/asterisk_orange.png')" />
    <s:Button label="Spark Button with metadata [Embed] icon" icon="{ICON}" />
 
</s:Application>

You can also set the icon style in the <Style> block or an external CSS file, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/ -->
<s:Application name="Spark_Button_icon_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:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            [Embed("assets/asterisk_orange.png")]
            protected const ICON:Class;
        ]]>
    </fx:Script>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Button#btn1 {
            icon: "assets/asterisk_orange.png";
        }
 
        s|Button#btn2 {
            icon: Embed("assets/asterisk_orange.png");
        }
 
        s|Button#btn3 {
            icon: PropertyReference("ICON");
        }
    </fx:Style>
 
    <s:Button id="btn1" label="Spark Button with dynamic icon" />
    <s:Button id="btn2" label="Spark Button with inline embedded icon" />
    <s:Button id="btn3" label="Spark Button with metadata [Embed] icon" />
 
</s:Application>

Or, you can set the icon property using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/ -->
<s:Application name="Spark_Button_icon_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"
        initialize="init();">
    <s:layout>
        <s:VerticalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            [Embed("assets/asterisk_orange.png")]
            protected const ICON:Class;
 
            protected function init():void {
                btn1.setStyle("icon", "assets/asterisk_orange.png");
                btn2.setStyle("icon", ICON);
            }
        ]]>
    </fx:Script>
 
    <s:Button id="btn1" label="Spark Button with dynamic icon" />
    <s:Button id="btn2" label="Spark Button with an embedded icon" />
 
</s:Application>

[HeroFooter]

 
]]> http://blog.flexexamples.com/2010/12/17/setting-an-icon-on-a-spark-button-in-flex-hero/feed/ 7 Setting a fixed button width on a Spark ButtonBar control in Flex 4 http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/#comments Fri, 10 Dec 2010 23:48:05 +0000 Peter deHaan http://blog.flexexamples.com/?p=3460 The following example shows how you can set a fixed button width on a Spark ButtonBar control in Flex 4 by creating a custom HorizontalLayout and setting the columnWidth and variableColumnWidth properties.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ --> <s:Application name="Spark_ButtonBar_layout_columnWidth_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:ButtonBar id="bBar" horizontalCenter="0" verticalCenter="0"> <s:layout> <s:HorizontalLayout gap="-1" columnWidth="80" variableColumnWidth="false" /> [...]]]> The following example shows how you can set a fixed button width on a Spark ButtonBar control in Flex 4 by creating a custom HorizontalLayout and setting the columnWidth and variableColumnWidth properties.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/ -->
<s:Application name="Spark_ButtonBar_layout_columnWidth_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:ButtonBar id="bBar" horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:HorizontalLayout gap="-1" columnWidth="80" variableColumnWidth="false" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[Red,Halo Orange,Yellow,Halo Green,Halo Blue,A,The quick brown fox]" />
        </s:dataProvider>
    </s:ButtonBar>
 
</s:Application>
 
]]> http://blog.flexexamples.com/2010/12/10/setting-a-fixed-button-width-on-a-spark-buttonbar-control-in-flex-4/feed/ 7 Changing the label placement on an MX TabBar control in Flex http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/#comments Wed, 10 Nov 2010 02:41:44 +0000 Peter deHaan http://blog.flexexamples.com/?p=3436 In a previous example, “Changing the label placement on an MX ButtonBar control in Flex (redux)”, we saw how you could set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

The following example [...]]]> In a previous example, “Changing the label placement on an MX ButtonBar control in Flex (redux)”, we saw how you could set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

The following example shows how you can set the label/icon placement on an MX TabBar control in Flex by extending the MX TabBar class and setting the navItemFactory property in the mx_internal namespace to a custom Tab button class.

[mx_internal]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ -->
<mx:Application name="MX_TabBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:comps="comps.*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <comps:CustomTabBar id="tb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX TabBar control, comps/CustomTabBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.TabBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomTabBar extends TabBar {
        public function CustomTabBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomTab);
        }
    }
}

And the custom nav item factory, comps/CustomTab.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/ */
package comps {
    import mx.controls.tabBarClasses.Tab;
 
    public class CustomTab extends Tab {
        public function CustomTab() {
            super();
            labelPlacement = "top";
        }
    }
}
 
]]> http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-tabbar-control-in-flex/feed/ 4 Changing the label placement on an MX ButtonBar control in Flex (redux) http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/#comments Wed, 10 Nov 2010 02:23:51 +0000 Peter deHaan http://blog.flexexamples.com/?p=3433 In a previous example, “Changing the label placement for a Flex ButtonBar control”, we saw how you could change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

The following example shows how you can set the label/icon placement on an [...]]]> In a previous example, “Changing the label placement for a Flex ButtonBar control”, we saw how you could change the button’s label placement relative to its icon in a ButtonBar control in Flex by using the getChildAt() method and labelPlacement property.

The following example shows how you can set the label/icon placement on an MX ButtonBar control in Flex by extending the MX ButtonBar class and setting the navItemFactory property in the mx_internal namespace to a custom class.

[mx_internal]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ -->
<mx:Application name="MX_ButtonBar_navItemFactory_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        xmlns:local="*"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">
 
    <local:CustomButtonBar id="bb"
            dataProvider="{viewstack}"
            labelField="label"
            iconField="icon"
            width="300" />
 
    <mx:ViewStack id="viewstack"
            backgroundColor="white"
            width="300" height="100">
        <mx:Canvas id="tab_1"
                label="Tab 1"
                icon="@Embed('Assets.swf#CloseButtonUp')">
            <mx:Button />
        </mx:Canvas>
        <mx:Canvas id="tab_2"
                label="Tab 2"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ColorPicker />
        </mx:Canvas>
        <mx:Canvas id="tab_3"
                label="Tab 3"
                icon="@Embed('Assets.swf#CloseButtonOver')">
            <mx:ComboBox dataProvider="[red,orange,yellow,green,blue]" />
        </mx:Canvas>
    </mx:ViewStack>
 
</mx:Application>

The custom MX ButtonBar control, CustomButtonBar.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.ButtonBar;
    import mx.core.ClassFactory;
    import mx.core.mx_internal;
 
    public class CustomButtonBar extends ButtonBar {
        public function CustomButtonBar() {
            super();
            mx_internal::navItemFactory = new ClassFactory(CustomButtonBarButton);
        }
    }
}

And the custom nav item factory, CustomButtonBarButton.as, is as follows:

/** http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/ */
package {
    import mx.controls.buttonBarClasses.ButtonBarButton;
 
    public class CustomButtonBarButton extends ButtonBarButton {
        public function CustomButtonBarButton() {
            super();
            labelPlacement = "top";
        }
    }
}
 
]]> http://blog.flexexamples.com/2010/11/09/changing-the-label-placement-on-an-mx-buttonbar-control-in-flex-redux/feed/ 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 Adding scroll bars to an Spark Application container in Flex 4 http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/#comments Wed, 03 Nov 2010 23:55:09 +0000 Peter deHaan http://blog.flexexamples.com/?p=3419 The following example shows how you can add scroll bars to a Spark Application container in Flex 4 by creating a custom skin, adding a Spark Scroller container around the contentGroup skin part, and setting the skinClass style on the Application tag.

[GumboHeader]

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ --> <s:Application name="Spark_Application_Scroller_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" [...]]]> The following example shows how you can add scroll bars to a Spark Application container in Flex 4 by creating a custom skin, adding a Spark Scroller container around the contentGroup skin part, and setting the skinClass style on the Application tag.

[GumboHeader]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
<s:Application name="Spark_Application_Scroller_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"
        skinClass="skins.CustomScrollingApplicationSkin">
    <s:controlBarContent>
        <s:Label text="Rect height (px):" />
        <s:HSlider id="sl" minimum="100" maximum="1000" value="300" />
    </s:controlBarContent>
 
    <s:Rect top="20" horizontalCenter="0" width="50%" height="{sl.value}">
        <s:fill>
            <s:LinearGradient rotation="45">
                <s:GradientEntry color="red" />
                <s:GradientEntry color="haloOrange" />
                <s:GradientEntry color="yellow" />
                <s:GradientEntry color="haloGreen" />
                <s:GradientEntry color="haloBlue" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/ -->
<s:Skin name="CustomScrollingApplicationSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabledStates="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" stateGroups="normalStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="normalWithControlBar" stateGroups="normalStates" />
        <s:State name="disabledWithControlBar" stateGroups="disabledStates" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Application")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                bgRectFill.color = getStyle('backgroundColor');
                bgRectFill.alpha = getStyle('backgroundAlpha');
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- fill -->
    <!--- 
    A rectangle with a solid color fill that forms the background of the application.
    The color of the fill is set to the Application's backgroundColor property.
    -->
    <s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
        <s:fill>
            <s:SolidColor id="bgRectFill" color="#FFFFFF"/>
        </s:fill>
    </s:Rect>
 
    <s:Group left="0" right="0" top="0" bottom="0">
        <s:layout>
            <s:VerticalLayout gap="0" horizontalAlign="justify" />
        </s:layout>
 
        <!--- Application Control Bar -->
        <s:Group id="topGroup" minWidth="0" minHeight="0"
                 includeIn="normalWithControlBar, disabledWithControlBar" >
 
            <!-- layer 0: control bar highlight -->
            <s:Rect left="0" right="0" top="0" bottom="1" >
                <s:stroke>
                    <s:LinearGradientStroke rotation="90" weight="1">
                        <s:GradientEntry color="0xFFFFFF" />
                        <s:GradientEntry color="0xD8D8D8" />
                    </s:LinearGradientStroke>
                </s:stroke>
            </s:Rect>
 
            <!-- layer 1: control bar fill -->
            <s:Rect left="1" right="1" top="1" bottom="2" >
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xEDEDED" />
                        <s:GradientEntry color="0xCDCDCD" />
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- layer 2: control bar divider line -->
            <s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <!-- layer 3: control bar -->
            <s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
                <s:layout>
                    <s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
                </s:layout>
            </s:Group>
        </s:Group>
 
        <s:Scroller id="contentScroller" width="100%" height="100%" minWidth="0" minHeight="0">
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
        </s:Scroller>
 
    </s:Group>
 
</s:Skin>

[GumboFooter]

 
]]> http://blog.flexexamples.com/2010/11/03/adding-scroll-bars-to-an-spark-application-container-in-flex-4/feed/ 11 Clearing a style on the Spark Button control in Flex 4 http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/ http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/#comments Wed, 27 Oct 2010 17:22:51 +0000 Peter deHaan http://blog.flexexamples.com/?p=3414 The following example shows how you can clear a style on the Spark Button control in Flex 4 by using the clearStyle() method.

[GumboHeader]

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/ --> <s:Application name="Spark_Button_clearStyle_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:controlBarContent> <s:Button label="bold" fontWeight="bold" click="btn.setStyle('fontWeight', FontWeight.BOLD);" /> <s:Button label="no bold" click="btn.clearStyle('fontWeight');" /> </s:controlBarContent>   <fx:Script> <![CDATA[ import flash.text.engine.FontWeight; ]]> [...]]]> The following example shows how you can clear a style on the Spark Button control in Flex 4 by using the clearStyle() method.

[GumboHeader]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/ -->
<s:Application name="Spark_Button_clearStyle_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:controlBarContent>
        <s:Button label="bold" fontWeight="bold" click="btn.setStyle('fontWeight', FontWeight.BOLD);" />
        <s:Button label="no bold" click="btn.clearStyle('fontWeight');" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            import flash.text.engine.FontWeight;
        ]]>
    </fx:Script>
 
    <s:Button id="btn"
            label="Button"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

[GumboFooter]

 
]]> http://blog.flexexamples.com/2010/10/27/clearing-a-style-on-the-spark-button-control-in-flex-4/feed/ 3 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.

[GumboHeader]

<?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.

[GumboHeader]

<?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>

[GumboFooter]

 
]]> http://blog.flexexamples.com/2010/10/27/setting-multiple-style-names-on-a-spark-button-control-in-flex-4/feed/ 5 Setting a background fill on an invalid Spark Image control in Flex Hero http://blog.flexexamples.com/2010/10/25/setting-a-background-fill-on-an-invalid-spark-image-control-in-flex-hero/ http://blog.flexexamples.com/2010/10/25/setting-a-background-fill-on-an-invalid-spark-image-control-in-flex-hero/#comments Tue, 26 Oct 2010 01:15:31 +0000 Peter deHaan http://blog.flexexamples.com/?p=3407 In a previous example, “Setting the background color on an invalid Spark Image control in Flex Hero”, we saw how you could set the background color on an invalid Spark Image control in Flex Hero by setting the backgroundColor style on the invalid skin state.

The following example shows how you can create a [...]]]> In a previous example, “Setting the background color on an invalid Spark Image control in Flex Hero”, we saw how you could set the background color on an invalid Spark Image control in Flex Hero by setting the backgroundColor style on the invalid skin state.

The following example shows how you can create a custom bitmap fill on a Spark Image control in Flex Hero by creating a custom skin class and creating a BitmapFill object in the invalid skin state for the background skin part.

[HeroHeader]

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-a-background-fill-on-an-invalid-spark-image-control-in-flex-hero/ -->
<s:Application name="Spark_Image_skinClass_invalid_BitmapFill_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:controlBarContent>
        <s:Form>
            <s:FormItem label="source:">
                <s:layout>
                    <s:HorizontalLayout />
                </s:layout>
                <s:Button label="image1.jpg"
                        click="img.source = 'http://helpexamples.com/flash/images/image1.jpg';"
                        chromeColor="haloGreen" />
                <s:Button label="logo"
                        click="img.source = 'http://helpexamples.com/flash/images/logo.png';"
                        chromeColor="haloGreen" />
                <s:Button label="(404)"
                        click="img.source = 'http://helpexamples.com/flash/images/404.gif';"
                        chromeColor="red" />
                <s:Button label="(null)"
                        click="img.source = null;" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|Image {
            backgroundColor: white;
        }
    </fx:Style>
 
    <s:Image id="img"
             width="200" height="200"
             horizontalCenter="0" verticalCenter="0"
             skinClass="skins.CustomImageSkin"/>
 
</s:Application>

And the custom Spark Image skin class, skins/CustomImageSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/10/25/setting-a-background-fill-on-an-invalid-spark-image-control-in-flex-hero/ -->
<s:Skin name="CustomImageSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="uninitialized" />
        <s:State name="loading"/>
        <s:State name="ready" />
        <s:State name="invalid" />
        <s:State name="disabled" />
    </s:states>
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.Image")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                // Push backgroundColor and backgroundAlpha directly.
                // Handle undefined backgroundColor by hiding the background object.
                if (isNaN(getStyle("backgroundColor"))) {
                    background.visible = false;
                    background.includeInLayout = false;
                } else {
                    background.visible = true;
                    background.includeInLayout = true;
                    bgFill.color = getStyle("backgroundColor");
                    bgFill.alpha = getStyle("backgroundAlpha");
                }
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
    </fx:Script>
 
    <!-- Defines the appearance of the image background. -->
    <s:Rect id="background" left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor id="bgFill"/>
        </s:fill>
        <s:fill.invalid>
            <s:BitmapFill source="@Embed('skins/stripe.png')" fillMode="repeat" />
        </s:fill.invalid>
    </s:Rect>
 
    <!-- Primary image display part -->
    <s:BitmapImage id="imageDisplay"
            left="0" top="0" right="0" bottom="0"/>
 
    <!-- Progress indicator part -->
    <s:Range id="progressIndicator"
            skinClass="spark.skins.spark.ImageLoadingSkin"
            includeIn="loading"
            layoutDirection="ltr"
            verticalCenter="0" horizontalCenter="0" />
 
    <!-- Invalid image icon -->
    <s:BitmapImage source="@Embed('Assets.swf#__brokenImage')"
            includeIn="invalid"
            verticalCenter="0" horizontalCenter="0"/>
 
</s:Skin>

[HeroFooter]

 
]]> http://blog.flexexamples.com/2010/10/25/setting-a-background-fill-on-an-invalid-spark-image-control-in-flex-hero/feed/ 0