Flex Examples » Gumbo http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Removing the selected highlight from the Spark ButtonBar control in Flex 4 (redux) http://blog.flexexamples.com/2010/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/ http://blog.flexexamples.com/2010/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/#comments Tue, 28 Sep 2010 06:26:52 +0000 Peter deHaan http://blog.flexexamples.com/?p=3351 In a previous example, “Removing the selected highlight from the Spark ButtonBar control in Flex 4″, we saw how you can remove the selected highlight from the Spark ButtonBar control in Flex 4 by creating a custom ButtonBar and ButtonBarButton skin class.

The following example shows how you can remove the selected highlight from [...]]]> In a previous example, “Removing the selected highlight from the Spark ButtonBar control in Flex 4″, we saw how you can remove the selected highlight from the Spark ButtonBar control in Flex 4 by creating a custom ButtonBar and ButtonBarButton skin class.

The following example shows how you can remove the selected highlight from the Spark ButtonBar control in Flex 4 by extending the Spark ButtonBarButton class and creating a custom Spark ButtonBar skin.

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/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/ -->
<s:Application name="Spark_ButtonBarButton_selected_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="tbb"
            skinClass="skins.CustomSparkButtonBarSkin"
            horizontalCenter="0" verticalCenter="0">
        <s:dataProvider>
            <s:ArrayList source="[red,orange,yellow,green,blue]" />
        </s:dataProvider>
    </s:ButtonBar>
 
</s:Application>

The custom Spark ButtonBarButton class, comps/CustomSparkButtonBarButton.as, is as follows:

/** http://blog.flexexamples.com/2010/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/ */
package comps {
    import spark.components.ButtonBarButton;
 
    public class CustomSparkButtonBarButton extends ButtonBarButton {
        public function CustomSparkButtonBarButton() {
            super();
        }
 
        override public function set selected(value:Boolean):void {
            // ignore
        }
    }
}

And the custom Spark ButtonBar skin, skins/CustomSparkButtonBarSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/ -->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:comps="comps.*"
        alpha.disabled="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.ButtonBar")]
    </fx:Metadata> 
 
    <fx:Declarations>
        <fx:Component id="firstButton">
            <comps:CustomSparkButtonBarButton skinClass="spark.skins.spark.ButtonBarFirstButtonSkin" />
        </fx:Component>
 
        <fx:Component id="middleButton" >
            <comps:CustomSparkButtonBarButton skinClass="spark.skins.spark.ButtonBarMiddleButtonSkin" />
        </fx:Component>
 
        <fx:Component id="lastButton" >
            <comps:CustomSparkButtonBarButton skinClass="spark.skins.spark.ButtonBarLastButtonSkin" />
        </fx:Component>
    </fx:Declarations>
 
    <s:DataGroup id="dataGroup" width="100%" height="100%">
        <s:layout>
            <s:ButtonBarHorizontalLayout gap="-1"/>
        </s:layout>
    </s:DataGroup>
 
</s:Skin>

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/2010/09/27/removing-the-selected-highlight-from-the-spark-buttonbar-control-in-flex-4-redux/feed/ 0 Styling the text selection format on a Spark TextArea control in Flex 4 http://blog.flexexamples.com/2010/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2010/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/#comments Mon, 06 Sep 2010 04:38:58 +0000 Peter deHaan http://blog.flexexamples.com/?p=3348 The following example shows how you can style the text selection format on a Spark TextArea control in Flex 4 by setting the focusedSelectionFormat property on the TextFlow’s interactionManager to a new SelectionFormat object.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_ISelectionManager_focusedSelectionFormat_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">   <fx:Script> <![CDATA[ import flashx.textLayout.edit.ISelectionManager; import flashx.textLayout.edit.SelectionFormat;   protected [...]]]> The following example shows how you can style the text selection format on a Spark TextArea control in Flex 4 by setting the focusedSelectionFormat property on the TextFlow’s interactionManager to a new SelectionFormat object.

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/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_ISelectionManager_focusedSelectionFormat_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">
 
    <fx:Script>
        <![CDATA[
            import flashx.textLayout.edit.ISelectionManager;
            import flashx.textLayout.edit.SelectionFormat;
 
            protected function txtFocusInHandler(evt:FocusEvent):void {
                var fSelFmt:ISelectionManager = evt.currentTarget.textFlow.interactionManager;
                fSelFmt.focusedSelectionFormat = new SelectionFormat(0x000000, 1.0, BlendMode.INVERT);
                evt.currentTarget.textFlow.interactionManager = fSelFmt;
            }
        ]]>
    </fx:Script>
 
    <s:TextArea id="ta"
            lineBreak="explicit"
            widthInChars="40" heightInLines="20"
            initialize="ta.text = describeType(ta).toXMLString();"
            focusIn="txtFocusInHandler(event);"
            horizontalCenter="0" verticalCenter="0" />
 
</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/09/05/styling-the-text-selection-format-on-a-spark-textarea-control-in-flex-4/feed/ 2 Creating blinking text on a Spark RichText control in Flex 4 http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ http://blog.flexexamples.com/2010/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/#comments Fri, 13 Aug 2010 21:09:54 +0000 Peter deHaan http://blog.flexexamples.com/?p=3239 The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog [...]]]> The following example shows how you can create a blinking text effect on a Spark RichText control in Flex 4 using a simple property animation with the Animate and SimpleMotionPath classes to tween the alpha property.

I’d like to dedicate this post to the two people that searched for this on my blog (who may be the only people to want to bring back the old HTML blinking text effect).

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/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/ -->
<s:Application name="Spark_RichText_blink_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:Declarations>
        <s:Animate id="fader"
                duration="500"
                repeatBehavior="reverse"
                repeatCount="0"
                target="{lbl}">
            <s:SimpleMotionPath property="alpha"
                    valueFrom="1.0" valueTo="0.0" />
        </s:Animate>
    </fx:Declarations>
 
    <s:Label id="lbl"
            text="BLINKING TEXT, I HATE YOU!"
            color="red"
            fontSize="32"
            creationComplete="fader.play();" />
 
</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/08/13/creating-blinking-text-on-a-spark-richtext-control-in-flex-4/feed/ 7 Setting the header height on a Spark Panel container in Flex 4 http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/#comments Sun, 25 Jul 2010 21:53:00 +0000 Peter deHaan http://blog.flexexamples.com/?p=3216 The following example shows how you can set the header height on a Spark Panel container in Flex 4 by setting the height property on the Panel container’s titleDisplay skin part.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_titleDisplay_height_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> <mx:Form styleName="plain"> <mx:FormItem label="titleDisplay height:"> <s:HSlider id="sl" minimum="20" maximum="100" change="pnl.titleDisplay.height = [...]]]> The following example shows how you can set the header height on a Spark Panel container in Flex 4 by setting the height property on the Panel container’s titleDisplay skin part.

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/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
<s:Application name="Spark_Panel_titleDisplay_height_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>
        <mx:Form styleName="plain">
            <mx:FormItem label="titleDisplay height:">
                <s:HSlider id="sl"
                        minimum="20" maximum="100"
                        change="pnl.titleDisplay.height = sl.value;" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <s:Panel id="pnl"
            title="Spark Panel title"
            width="300" height="200"
            horizontalCenter="0" verticalCenter="0">
        <s:Label text="Spark Label text"
                x="20" y="20" />
    </s:Panel>
 
</s:Application>

View source is enabled in the following example.

If you want to set the titleDisplay skin part’s height to less than 30 pixels, you’ll need to create a custom skin and remove the minHeight property from the titleDisplay skin part:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ -->
<s:SparkSkin name="CustomSparkPanelSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
        blendMode="normal"
        mouseEnabled="false" 
        minWidth="131" minHeight="127"
        alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="normalWithControlBar" stateGroups="withControls" />
        <s:State name="disabledWithControlBar" stateGroups="withControls" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.Panel")]
    </fx:Metadata> 
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. 
            For panel, border and title background are skinned, but the content area and title text are not. */
            static private const exclusions:Array = ["background", "titleDisplay", "contentGroup", "controlBarGroup"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                if (getStyle("borderVisible") == true) {
                    border.visible = true;
                    background.left = background.top = background.right = background.bottom = 1;
                    contents.left = contents.top = contents.right = contents.bottom = 1;
                } else {
                    border.visible = false;
                    background.left = background.top = background.right = background.bottom = 0;
                    contents.left = contents.top = contents.right = contents.bottom = 0;
                }
 
                dropShadow.visible = getStyle("dropShadowVisible");
 
                var cr:Number = getStyle("cornerRadius");
                var withControls:Boolean = (currentState == "disabledWithControlBar" || currentState == "normalWithControlBar");
 
                if (cornerRadius != cr) {
                    cornerRadius = cr;
 
                    dropShadow.tlRadius = cornerRadius;
                    dropShadow.trRadius = cornerRadius;
                    dropShadow.blRadius = withControls ? cornerRadius : 0;
                    dropShadow.brRadius = withControls ? cornerRadius : 0;
 
                    setPartCornerRadii(topMaskRect, withControls); 
                    setPartCornerRadii(border, withControls); 
                    setPartCornerRadii(background, withControls);                
                }
 
                if (bottomMaskRect) {
                    setPartCornerRadii(bottomMaskRect, withControls);
                } 
 
                borderStroke.color = getStyle("borderColor");
                borderStroke.alpha = getStyle("borderAlpha");
                backgroundFill.color = getStyle("backgroundColor");
                backgroundFill.alpha = getStyle("backgroundAlpha");
 
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
 
            private function setPartCornerRadii(target:Rect, includeBottom:Boolean):void {            
                target.topLeftRadiusX = cornerRadius;
                target.topRightRadiusX = cornerRadius;
                target.bottomLeftRadiusX = includeBottom ? cornerRadius : 0;
                target.bottomRightRadiusX = includeBottom ? cornerRadius : 0;
            }
 
            private var cornerRadius:Number;
        ]]>
    </fx:Script>
 
    <!-- drop shadow can't be hittable so it stays sibling of other graphics -->
    <s:RectangularDropShadow id="dropShadow"
            blurX="20" blurY="20"
            alpha="0.32" distance="11" 
            angle="90" color="#000000"
            left="0" top="0" right="0" bottom="0"/>
 
    <!-- drop shadow can't be hittable so all other graphics go in this group -->
    <s:Group left="0" right="0" top="0" bottom="0">
 
        <!-- top group mask -->
        <s:Group id="topGroupMask" left="1" top="1" right="1" bottom="1">
            <s:Rect id="topMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- bottom group mask -->
        <s:Group id="bottomGroupMask"
                 left="1" top="1" right="1" bottom="1"
                 includeIn="normalWithControlBar, disabledWithControlBar">
            <s:Rect id="bottomMaskRect" left="0" top="0" right="0" bottom="0">
                <s:fill>
                    <s:SolidColor alpha="0"/>
                </s:fill>
            </s:Rect>
        </s:Group>
 
        <!-- layer 1: border -->
        <s:Rect id="border" left="0" right="0" top="0" bottom="0" >
            <s:stroke>
                <s:SolidColorStroke id="borderStroke" weight="1" />
            </s:stroke>
        </s:Rect>
 
        <!-- layer 2: background fill -->
        <!--- Defines the appearance of the PanelSkin class's background. -->
        <s:Rect id="background" left="1" top="1" right="1" bottom="1">
            <s:fill>
                <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
 
        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group left="1" right="1" top="1" bottom="1" id="contents">
            <s:layout>
                <s:VerticalLayout gap="0" horizontalAlign="justify" />
            </s:layout>
 
            <s:Group id="topGroup" mask="{topGroupMask}">
                <!-- layer 0: title bar fill -->
                <s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
                    <s:fill>
                        <s:LinearGradient rotation="90">
                            <s:GradientEntry color="0xE2E2E2" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradient>
                    </s:fill>
                </s:Rect>
 
                <!-- layer 1: title bar highlight -->
                <s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0">
                    <s:stroke>
                        <s:LinearGradientStroke rotation="90" weight="1">
                            <s:GradientEntry color="0xEAEAEA" />
                            <s:GradientEntry color="0xD9D9D9" />
                        </s:LinearGradientStroke>
                    </s:stroke>
                </s:Rect>
 
                <!-- layer 2: title bar divider -->
                <s:Rect id="tbDiv" left="0" right="0" height="1" bottom="0">
                    <s:fill>
                        <s:SolidColor color="0xC0C0C0" />
                    </s:fill>
                </s:Rect>
 
                <!-- layer 3: text -->
                <s:Label id="titleDisplay" maxDisplayedLines="1"
                         left="9" right="3" top="1" bottom="0"
                         verticalAlign="middle" textAlign="start" fontWeight="bold" />
            </s:Group>
 
            <!--
                Note: setting the minimum size to 0 here so that changes to the host component's
                size will not be thwarted by this skin part's minimum size.   This is a compromise,
                more about it here: http://bugs.adobe.com/jira/browse/SDK-21143
            -->
            <s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
 
            <s:Group id="bottomGroup" minWidth="0" minHeight="0"
                     includeIn="normalWithControlBar, disabledWithControlBar" >
 
                <s:Group left="0" right="0" top="0" bottom="0" mask="{bottomGroupMask}">
 
                    <!-- layer 0: control bar divider line -->
                    <s:Rect left="0" right="0" top="0" height="1" alpha="0.22">
                        <s:fill>
                            <s:SolidColor color="0x000000" />
                        </s:fill>
                    </s:Rect>
 
                    <!-- layer 1: control bar highlight -->
                    <s:Rect left="0" right="0" top="1" bottom="0">
                        <s:stroke>
                            <s:LinearGradientStroke rotation="90" weight="1">
                                <s:GradientEntry color="0xE5E5E5" />
                                <s:GradientEntry color="0xD8D8D8" />
                            </s:LinearGradientStroke>
                        </s:stroke>
                    </s:Rect>
 
                    <!-- layer 2: control bar fill -->
                    <s:Rect left="1" right="1" top="2" bottom="1">
                        <s:fill>
                            <s:LinearGradient rotation="90">
                                <s:GradientEntry color="0xDADADA" />
                                <s:GradientEntry color="0xC5C5C5" />
                            </s:LinearGradient>
                        </s:fill>
                    </s:Rect>
                </s:Group>
                <!-- 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:Group>
    </s:Group>
</s:SparkSkin>

Or, you could extend the Spark Panel container skin and set the titleDisplay skin part’s height property to NaN (not a number), using ActionScript, as seen in the following example:

/** http://blog.flexexamples.com/2010/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/ */
package skins {
    import spark.skins.spark.PanelSkin;
 
    public class CustomSparkPanelSkinAS extends PanelSkin {
        override public function CustomSparkPanelSkinAS() {
            super();
            titleDisplay.minHeight = NaN;
        }
    }
}

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/07/25/setting-the-header-height-on-a-spark-panel-container-in-flex-4/feed/ 7 Adding a hover glow filter to an MX Image control in Flex 4 http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/#comments Fri, 25 Jun 2010 23:32:00 +0000 Peter deHaan http://blog.flexexamples.com/?p=3199 The following example shows how you can apply a hover glow filter to an MX Image control in Flex 4 by using the rollOver and rollOut events to set the filters property on the Image control to an array with a GlowFilter instance.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ --> <s:Application name="MX_Image_filters_GlowFilter_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 apply a hover glow filter to an MX Image control in Flex 4 by using the rollOver and rollOut events to set the filters property on the Image control to an array with a GlowFilter instance.

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/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
<s:Application name="MX_Image_filters_GlowFilter_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"
        xmlns:comps="comps.*">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <fx:Script>
        <![CDATA[
            import flash.filters.GlowFilter;
 
            protected function img_rollOverHandler(evt:MouseEvent):void {
                Image(evt.currentTarget).filters = [new GlowFilter(0xFF0000)];
            }
 
            protected function img1_rollOutHandler(evt:MouseEvent):void {
                Image(evt.currentTarget).filters = [];
            }
        ]]>
    </fx:Script>
 
    <mx:Image id="img1"
            source="http://helpexamples.com/flash/images/image1.jpg"
            rollOver="img_rollOverHandler(event);"
            rollOut="img1_rollOutHandler(event);" />
 
</s:Application>

View source is enabled in the following example.


Or, instead of specifying the rollOver and rollOut event handlers for each Image component instance, you could create a custom component that extends the MX Image control and adds the rollOver/rollOut logic, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
<s:Application name="MX_Image_filters_GlowFilter_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"
        xmlns:comps="comps.*">
    <s:layout>
        <s:HorizontalLayout horizontalAlign="center" verticalAlign="middle" />
    </s:layout>
 
    <comps:GlowImage id="img2"
            source="http://helpexamples.com/flash/images/image2.jpg"
            scaleX="0.5" scaleY="0.5" />
 
    <comps:GlowImage id="img3"
            source="http://helpexamples.com/flash/images/image3.jpg"
            scaleX="0.5" scaleY="0.5" />
 
</s:Application>

And the custom MX Image control, comps/GlowImage.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/ -->
<mx:Image name="GlowImage"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        rollOver="rollOverHandler(event);"
        rollOut="rollOutHandler(event);">
 
    <fx:Script>
        <![CDATA[
            import flash.filters.GlowFilter;
 
            protected function rollOverHandler(evt:MouseEvent):void {
                filters = [new GlowFilter(0xFF0000)];
            }
 
            protected function rollOutHandler(evt:MouseEvent):void {
                filters = [];
            }
        ]]>
    </fx:Script>
 
</mx:Image>

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/06/25/adding-a-hover-glow-filter-to-an-mx-image-control-in-flex-4/feed/ 7 Fading an item renderer background fill on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/#comments Fri, 25 Jun 2010 22:12:20 +0000 Peter deHaan http://blog.flexexamples.com/?p=3196 The following example shows how you can fade an item renderer background fill on a Spark List control in Flex 4 by creating a custom item renderer, setting the Boolean autoDrawBackground property to false, drawing your own background fill, and then setting a fade transition from the normal and hovered states.

<?xml version="1.0" encoding="utf-8"?> [...]]]> The following example shows how you can fade an item renderer background fill on a Spark List control in Flex 4 by creating a custom item renderer, setting the Boolean autoDrawBackground property to false, drawing your own background fill, and then setting a fade transition from the normal and hovered states.

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/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_fade_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:List id="lst"
            itemRenderer="skins.FadingItemRenderer"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="7" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/FadingItemRenderer.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="FadingItemRenderer"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        autoDrawBackground="false">
    <s:states>
        <s:State name="normal" />
        <s:State name="hovered" />
        <s:State name="selected" />
    </s:states>
    <s:transitions>
        <s:Transition fromState="normal" toState="hovered" autoReverse="true">
            <s:Fade target="{bgRect}" duration="600" />
        </s:Transition>
    </s:transitions>
 
    <s:Rect id="bgRect"
            includeIn="hovered,selected"
            left="0" right="0" top="0" bottom="0">
        <s:fill>
            <s:SolidColor color="{getStyle('rollOverColor')}"
                          color.selected="{getStyle('selectionColor')}" />
        </s:fill>
    </s:Rect>
 
    <s:Label id="labelDisplay"
            left="5" right="5" top="5" bottom="4" />
 
</s:ItemRenderer>

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/2010/06/25/fading-an-item-renderer-background-fill-on-a-spark-list-control-in-flex-4/feed/ 0 Toggling the drop shadow on the Spark DropDownList control in Flex 4 http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/#comments Tue, 22 Jun 2010 00:07:18 +0000 Peter deHaan http://blog.flexexamples.com/?p=3180 The following example shows how you can toggle the drop shadow on the Spark DropDownList control in Flex 4 by setting the Boolean dropShadowVisible style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ --> <s:Application name="Spark_DropDownList_dropShadowVisible_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:CheckBox id="cb" label="dropShadowVisible" selected="true" change="cb_changeHandler(event);" /> </s:controlBarContent>   <fx:Script> <![CDATA[ protected function cb_changeHandler(evt:Event):void { ddl.openDropDown(); } ]]> [...]]]> The following example shows how you can toggle the drop shadow on the Spark DropDownList control in Flex 4 by setting the Boolean dropShadowVisible style.

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/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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:CheckBox id="cb"
                label="dropShadowVisible"
                selected="true"
                change="cb_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function cb_changeHandler(evt:Event):void {
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            dropShadowVisible="{cb.selected}"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

View source is enabled in the following example.


You can also set the dropShadowVisible 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/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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">
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|DropDownList {
            dropShadowVisible: false;
        }
    </fx:Style>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/ -->
<s:Application name="Spark_DropDownList_dropShadowVisible_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:CheckBox id="cb"
                label="dropShadowVisible"
                selected="true"
                change="cb_changeHandler(event);" />
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function cb_changeHandler(evt:Event):void {
                ddl.setStyle("dropShadowVisible", cb.selected);
                ddl.openDropDown();
            }
        ]]>
    </fx:Script>
 
    <s:DropDownList id="ddl"
            requireSelection="true"
            horizontalCenter="0" top="20">
        <s:dataProvider>
            <s:ArrayList source="[One,Two,Three,Four,Five,Six,Seven,Eight,Nine,Ten]" />
        </s:dataProvider>
    </s:DropDownList>
 
</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/06/21/toggling-the-drop-shadow-on-the-spark-dropdownlist-control-in-flex-4/feed/ 0 Styling the scrub bar data tip on a Spark VideoPlayer control in Flex 4 http://blog.flexexamples.com/2010/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/ http://blog.flexexamples.com/2010/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/#comments Thu, 17 Jun 2010 16:06:39 +0000 Peter deHaan http://blog.flexexamples.com/?p=3161 The following example shows how you can customize the appearance of the data tip on the Spark VideoPlayer control’s scrub bar when scrubbing the playhead by creating a custom VideoPlayer skin and specifying a custom ScrubBar skin.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/ --> <s:Application name="VideoPlayer_ScrubBar_dataTip_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:VideoPlayer id="vidPl" source="http://helpexamples.com/flash/video/caption_video.flv" skinClass="skins.CustomVideoPlayerSkin" autoPlay="false" [...]]]> The following example shows how you can customize the appearance of the data tip on the Spark VideoPlayer control’s scrub bar when scrubbing the playhead by creating a custom VideoPlayer skin and specifying a custom ScrubBar skin.

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/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/ -->
<s:Application name="VideoPlayer_ScrubBar_dataTip_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:VideoPlayer id="vidPl"
            source="http://helpexamples.com/flash/video/caption_video.flv"
            skinClass="skins.CustomVideoPlayerSkin"
            autoPlay="false"
            muted="true"
            horizontalCenter="0" verticalCenter="0" />
 
</s:Application>

The custom Spark VideoPlayer skin, skins/CustomVideoPlayerSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/ -->
<s:SparkSkin name="CustomVideoPlayerSkin"
        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"
        chromeColor.fullScreenStates="0xCCCCCC">
    <!-- states -->
    <s:states>
        <s:State name="uninitialized" stateGroups="uninitializedStates, normalStates" />
        <s:State name="loading" stateGroups="loadingStates, normalStates" />
        <s:State name="ready" stateGroups="readyStates, normalStates" />
        <s:State name="playing" stateGroups="playingStates, normalStates" />
        <s:State name="paused" stateGroups="pausedStates, normalStates" />
        <s:State name="buffering" stateGroups="bufferingStates, normalStates" />
        <s:State name="playbackError" stateGroups="playbackErrorStates, normalStates" />
        <s:State name="disabled" stateGroups="disabledStates, normalStates"/>
        <s:State name="uninitializedAndFullScreen" stateGroups="uninitializedStates, fullScreenStates" />
        <s:State name="loadingAndFullScreen" stateGroups="loadingStates, fullScreenStates" />
        <s:State name="readyAndFullScreen" stateGroups="readyStates, fullScreenStates" />
        <s:State name="playingAndFullScreen" stateGroups="playingStates, fullScreenStates" />
        <s:State name="pausedAndFullScreen" stateGroups="pausedStates, fullScreenStates" />
        <s:State name="bufferingAndFullScreen" stateGroups="bufferingStates, fullScreenStates" />
        <s:State name="playbackErrorAndFullScreen" stateGroups="playbackErrorStates, fullScreenStates" />
        <s:State name="disabledAndFullScreen" stateGroups="disabledStates, fullScreenStates"/>
    </s:states>
 
    <!-- A chrome color of 0xCCCCCC in the fullScreenStates means we ignore the chromeColor property
    all together as 0xCCCCCC is essentially just a no-op color transform -->
 
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("spark.components.VideoPlayer")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["videoDisplay", "playPauseButton", "scrubBar",
                "currentTimeDisplay", "timeDivider", "durationDisplay",
                "volumeBar", "fullScreenButton"];
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                dropShadow.visible = getStyle("dropShadowVisible");
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
        ]]>
 
    </fx:Script>
 
    <!-- drop shadow -->
    <s:RectangularDropShadow id="dropShadow" blurX="17" blurY="17" alpha="0.32" distance="4"
                             angle="90" color="#131313" left="0" top="0" right="0" bottom="0"
                             excludeFrom="fullScreenStates"/>
 
    <!--- Video and player controls are clipped if they exceed the size of the
    component, but the drop shadow above is not clipped and sizes to the component.
    We also set verticalScrollPosition so that when we do clip, rather than clipping
    off the bottom first, we clip off the top fist.  This is so the player controls
    are still visible when we start clipping. -->
    <s:Group id="clippedGroup" clipAndEnableScrolling="true" left="0" top="0" right="0" bottom="0"
             verticalScrollPosition="{Math.max(0, 184-clippedGroup.height)}">
 
        <!-- There's a minimum size for the video and controls.  If we go below that we are clipped. -->
        <s:Group minWidth="263" minHeight="184" left="0" right="0" top="0" bottom="0">
 
            <!-- background when the videoDisplay doesn't fill its whole spot -->
            <s:Rect bottom="1" left="1" right="1" top="1"
                    bottom.fullScreenStates="0" left.fullScreenStates="0"
                    right.fullScreenStates="0" top.fullScreenStates="0">
                <s:fill>
                    <s:SolidColor color="0x000000" />
                </s:fill>
            </s:Rect>
 
            <s:VideoDisplay id="videoDisplay" bottom="24" left="1" right="1" top="1"
                            bottom.fullScreenStates="0" left.fullScreenStates="0"
                            right.fullScreenStates="0" top.fullScreenStates="0" />
 
            <!-- video player controls -->
            <s:Group left="0" right="0" height="24" bottom="0" bottom.fullScreenStates="150">
 
                <!-- actual controls with a maxWidth in non-fullScreen mode -->
                <s:Group bottom="0" horizontalCenter="0" left="0" right="0" maxWidth.fullScreenStates="755" id="playerControls">
 
                    <s:ToggleButton id="playPauseButton" left="0" bottom="0"
                                    skinClass="spark.skins.spark.mediaClasses.normal.PlayPauseButtonSkin"
                                    skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.PlayPauseButtonSkin"
                                    focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
 
                    <!-- scrubbar + the currentTime/duration labels -->
                    <s:Group left="39" right="75" top="0" bottom="0">
 
                        <!-- background for scrubbar + the currentTime/duration -->
                        <s:Rect left="0" right="0" top="0" bottom="0">
                            <s:fill>
                                <s:LinearGradient rotation="90">
                                    <s:GradientEntry color="0xFFFFFF" color.fullScreenStates="0x585858" alpha.fullScreenStates="0.55"/>
                                    <s:GradientEntry color="0xDCDCDC" color.fullScreenStates="0x1E1E1E" alpha.fullScreenStates="0.55"/>
                                </s:LinearGradient>
                            </s:fill>
                        </s:Rect>
 
                        <!-- fill highlight  (exclude in fullScreen) -->
                        <s:Rect left="1" right="1" top="1" height="11" excludeFrom="fullScreenStates">
                            <s:fill>
                                <s:SolidColor color="0xFFFFFF" alpha="0.3" />
                            </s:fill>
                        </s:Rect>
 
                        <!-- one pixel border -->
                        <s:Rect left="1" right="1" top="1" bottom="1">
                            <s:stroke>
                                <s:LinearGradientStroke weight="1" rotation="90">
                                    <s:GradientEntry color="0xFEFEFE" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.12" />
                                    <s:GradientEntry color="0xEAEAEA" color.fullScreenStates="0xFFFFFF" alpha.fullScreenStates="0.09" />
                                </s:LinearGradientStroke>
                            </s:stroke>
                        </s:Rect>
 
                        <!-- border for the scrubbar/time label controls -->
                        <s:Rect left="-1" right="0" top="0" bottom="0">
                            <s:stroke>
                                <s:SolidColorStroke color="0x131313" color.fullScreenStates="0x222222" alpha.fullScreenStates="0.66"  />
                            </s:stroke>
                        </s:Rect>
 
                        <!-- scrub bar + currentTime/duration in a HorizontalLayout -->
                        <s:Group left="0" right="0" height="23" bottom="0">
                            <s:layout>
                                <s:HorizontalLayout verticalAlign="middle" gap="1" />
                            </s:layout>
 
                            <!-- spacer -->
                            <s:Rect width="7" height="1" />
 
                            <s:ScrubBar id="scrubBar" width="100%" liveDragging="true"
                                        skinClass="skins.CustomScrubBarSkin"
                                        skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.ScrubBarSkin" />
 
                            <!-- spacer -->
                            <s:Rect width="8" height="1" />
 
                            <s:Label id="currentTimeDisplay" color.fullScreenStates="0xFFFFFF" />
 
                            <s:Label id="timeDivider" text="/" color.fullScreenStates="0xFFFFFF" />
 
                            <s:Label id="durationDisplay" color.fullScreenStates="0xFFFFFF" />
 
                            <!-- spacer -->
                            <s:Rect width="8" height="1" />
                        </s:Group>
 
                    </s:Group>
 
                    <s:VolumeBar id="volumeBar" snapInterval="0.01" stepSize="0.01" liveDragging="true"
                                 right="37" bottom="0"
                                 skinClass="spark.skins.spark.mediaClasses.normal.VolumeBarSkin"
                                 skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.VolumeBarSkin"
                                 focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
 
                    <s:Button id="fullScreenButton" right="0" bottom="0" label="Fullscreen"
                              skinClass="spark.skins.spark.mediaClasses.normal.FullScreenButtonSkin"
                              skinClass.fullScreenStates="spark.skins.spark.mediaClasses.fullScreen.FullScreenButtonSkin"
                              focusIn="event.target.depth=1" focusOut="event.target.depth=0" />
 
                </s:Group>
 
            </s:Group>
 
            <!-- border -->
            <s:Rect left="0" right="0" top="0" bottom="0" excludeFrom="fullScreenStates">
                <s:stroke>
                    <s:SolidColorStroke color="0x131313" />
                </s:stroke>
            </s:Rect>
 
        </s:Group>
    </s:Group>
 
</s:SparkSkin>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/ -->
<s:SparkSkin name="CustomScrubBarSkin"
             xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark"
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
             minHeight="14" minWidth="60"
             alpha.disabled="0.5">
    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
    </s:states>
 
    <fx:Metadata>
        [HostComponent("spark.components.mediaClasses.ScrubBar")]
    </fx:Metadata>
 
    <fx:Script fb:purpose="styling">
        <![CDATA[
            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["track", "thumb"];
 
            override public function get colorizeExclusions():Array {
                return exclusions;
            }
 
            override protected function initializationComplete():void {
                useChromeColor = true;
                super.initializationComplete();
            }
        ]]>
    </fx:Script>
 
    <fx:Declarations>
        <!--- Defines the appearance of the ScrubBar skin's data tip. To customize the data tip's appearance, create a custom ScrubBarSkin class. -->
        <fx:Component id="dataTip">
            <s:DataRenderer minHeight="24" minWidth="40" y="-34">
                <s:RectangularDropShadow id="shadow" distance="3"
                        angle="90" color="#999999"
                        left="0" top="0" right="0" bottom="0"/>
 
                <s:Rect top="0" left="0" right="0" bottom="0">
                    <s:fill>
                        <s:SolidColor color="red" alpha="0.6"/>
                    </s:fill>
                </s:Rect>
 
                <s:Label id="labelDisplay" text="{data}"
                         horizontalCenter="0" verticalCenter="1"
                         left="5" right="5" top="5" bottom="5"
                         textAlign="center" verticalAlign="middle"
                         fontWeight="bold" color="black" fontSize="11">
                </s:Label>
            </s:DataRenderer>
        </fx:Component>
    </fx:Declarations>
 
    <!--- The skin pat that defines the video timeline. The timeline shows the current playhead location in the video, the amount of the video previously played, and the loaded in part of the video. -->
    <s:Button id="track" left="0" right="0" top="0" height="11"
              skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarTrackSkin" />
 
    <s:Group id="loadedRangeArea" x="0" y="0" height="11" includeInLayout="false">
 
        <!-- inset 7 and 6 pixels because that's thumbSize/2 -->
        <s:Group left="7" right="6" top="0" bottom="0" minWidth="0">
 
            <!-- fill -->
            <s:Rect left="1" right="1" top="1" bottom="1">
                <s:fill>
                    <s:SolidColor color="0xD7D7D7" />
                </s:fill>
            </s:Rect>
 
            <!-- inner glow -->
            <!-- set height to 100%, maxHeight=1, minHeight=0 b/c only want this line to show up if there's room for it -->
            <s:Rect left="1" top="1" bottom="1" width="100%" maxWidth="1" minWidth="0">
                <s:fill>
                    <s:SolidColor color="0x000000" alpha="0.12" />
                </s:fill>
            </s:Rect>
            <s:Rect left="2" right="1" top="1" height="100%" maxHeight="1" minHeight="0">
                <s:fill>
                    <s:SolidColor color="0x000000" alpha="0.12" />
                </s:fill>
            </s:Rect>
 
            <!-- black line on right -->
            <!-- set width to 100%, maxWidth=1, minWidth=0 b/c only want this line to show up if there's room for it -->
            <s:Rect right="0" top="1" bottom="1" width="100%" maxWidth="1" minWidth="0">
                <s:fill>
                    <s:SolidColor color="0x000000" alpha="0.5"/>
                </s:fill>
            </s:Rect>
 
        </s:Group>
    </s:Group>
 
    <s:Group id="playedArea" x="0" y="0" height="11" includeInLayout="false">
 
        <!-- inset 7 and 6 pixels because that's thumbSize/2 -->
        <s:Group left="7" right="6" top="0" bottom="0" minWidth="0">
 
            <!-- inner glow -->
            <s:Rect left="1" right="1" top="1" bottom="1">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xFEFEFE"/>
                        <s:GradientEntry color="0xECECEC"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- fill -->
            <s:Rect left="2" right="2" top="2" bottom="2">
                <s:fill>
                    <s:LinearGradient rotation="90">
                        <s:GradientEntry color="0xFFFFFF" alpha="0.85"/>
                        <s:GradientEntry color="0xE1E1E1" alpha="0.85"/>
                    </s:LinearGradient>
                </s:fill>
            </s:Rect>
 
            <!-- black line on right -->
            <!-- set width to 100%, maxWidth=1, minWidth=0 b/c only want this line to show up if there's room for it -->
            <s:Rect right="0" top="1" bottom="1" width="100%" maxWidth="1" minWidth="0">
                <s:fill>
                    <s:SolidColor color="0x131313"/>
                </s:fill>
            </s:Rect>
 
        </s:Group>
    </s:Group>
 
    <!--- A skin part that defines a button that can be dragged along the track to increase or decrease the playhead location in the video. -->
    <s:Button id="thumb" x="0" y="0" width="14" height="19" includeInLayout="false"
              skinClass="spark.skins.spark.mediaClasses.normal.ScrubBarThumbSkin" />
 
</s:SparkSkin>

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/06/17/styling-the-scrub-bar-data-tip-on-a-spark-videoplayer-control-in-flex-4/feed/ 5 Creating a radio button item renderer on a Spark List control in Flex 4 http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/#comments Thu, 20 May 2010 15:39:48 +0000 Peter deHaan http://blog.flexexamples.com/?p=3133 The following example shows how you can use a Spark RadioButton control as an item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ --> <s:Application name="Spark_List_itemRenderer_RadioButton_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:Label text="selected RadioButton: {dgr1.selection.label}" /> </s:controlBarContent>   <fx:Declarations> <s:RadioButtonGroup id="dgr1" selectedValue="Three" /> </fx:Declarations> [...]]]> The following example shows how you can use a Spark RadioButton control as an item renderer for a Spark List control in Flex 4 by setting the itemRenderer property.

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/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:Application name="Spark_List_itemRenderer_RadioButton_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:Label text="selected RadioButton: {dgr1.selection.label}" />
    </s:controlBarContent>
 
    <fx:Declarations>
        <s:RadioButtonGroup id="dgr1" selectedValue="Three" />
    </fx:Declarations>
 
    <s:List id="lst"
            itemRenderer="skins.RadioButtonItemRen"
            width="100"
            horizontalCenter="0" verticalCenter="0">
        <s:layout>
            <s:VerticalLayout gap="0"
                    horizontalAlign="contentJustify"
                    requestedRowCount="6" />
        </s:layout>
        <s:dataProvider>
            <s:ArrayList>
                <fx:Object val="One" gr="{dgr1}" />
                <fx:Object val="Two" gr="{dgr1}" />
                <fx:Object val="Three" gr="{dgr1}" />
                <fx:Object val="Four" gr="{dgr1}" />
                <fx:Object val="Five" gr="{dgr1}" />
                <fx:Object val="Six" gr="{dgr1}" />
                <fx:Object val="Seven" gr="{dgr1}" />
                <fx:Object val="Eight" gr="{dgr1}" />
                <fx:Object val="Nine" gr="{dgr1}" />
            </s:ArrayList>
        </s:dataProvider>
    </s:List>
 
</s:Application>

And the custom Spark List item renderer, skins/RadioButtonItemRen.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/ -->
<s:ItemRenderer name="RadioButtonItemRen"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark" 
        autoDrawBackground="false"
        dataChange="itemrenderer1_dataChangeHandler(event);">
 
    <fx:Script>
        <![CDATA[
            protected function itemrenderer1_dataChangeHandler(evt:Event):void {
                rdBtn.label = data.val;
                rdBtn.value = data.val;
                rdBtn.group = data.gr;
            }
        ]]>
    </fx:Script>
 
    <s:RadioButton id="rdBtn"
            left="3" right="3" top="5" bottom="5" />
 
</s:ItemRenderer>

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/05/20/creating-a-radio-button-item-renderer-on-a-spark-list-control-in-flex-4/feed/ 1 Changing the background color of a disabled Spark TextArea control in Flex 4 http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/#comments Wed, 19 May 2010 01:00:57 +0000 Peter deHaan http://blog.flexexamples.com/?p=3128 In a previous example, “Changing the background color of a disabled TextArea control in Flex”, we saw how you can change the background color of a disabled MX TextArea control by setting the use the backgroundDisabledColor style.

The following example shows how you can change the background color of a disabled Spark TextArea control [...]]]> In a previous example, “Changing the background color of a disabled TextArea control in Flex”, we saw how you can change the background color of a disabled MX TextArea control by setting the use the backgroundDisabledColor style.

The following example shows how you can change the background color of a disabled Spark TextArea control in Flex 4 by setting the contentBackgroundColor style in the disabled skin state.

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/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_contentBackgroundColor_disabled_text"
        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>
    <s:controlBarContent>
        <s:CheckBox id="cb"
                label="enabled"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|TextArea {
            contentBackgroundColor: haloGreen;
        }
 
        s|TextArea:disabled {
            contentBackgroundColor: red;
        }
    </fx:Style>
 
    <s:TextArea id="txtArea1"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
    <s:TextArea id="txtArea2"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
</s:Application>

If you want to change the contentBackgroundColor style on an individual Spark TextArea control instead of globally you can add an identifier to the CSS declaration, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/ -->
<s:Application name="Spark_TextArea_contentBackgroundColor_disabled_text"
        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>
    <s:controlBarContent>
        <s:CheckBox id="cb"
                label="enabled"
                selected="true" />
    </s:controlBarContent>
 
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|TextArea#txtArea1 {
            contentBackgroundColor: haloGreen;
        }
 
        s|TextArea:disabled#txtArea1 {
            contentBackgroundColor: red;
        }
    </fx:Style>
 
    <s:TextArea id="txtArea1"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
    <s:TextArea id="txtArea2"
            text="The quick brown fox jumps over the lazy dog"
            enabled="{cb.selected}" />
 
</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/05/18/changing-the-background-color-of-a-disabled-spark-textarea-control-in-flex-4/feed/ 0