Flex Examples » backgroundAlpha http://blog.flexexamples.com Just a bunch of Adobe Flex Examples Wed, 26 Jan 2011 18:09:51 +0000 en hourly 1 Setting the background alpha on a Spark FormHeading control in Flex Hero http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/ http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/#comments Wed, 01 Sep 2010 23:27:07 +0000 Peter deHaan http://blog.flexexamples.com/?p=3329 The following example shows how you can set the background alpha on a Spark FormHeading control in Flex Hero by setting the backgroundAlpha style.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/ --> <s:Application name="Spark_FormHeading_backgroundAlpha_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> <s:controlBarContent> <s:Form> <s:FormItem label="backgroundAlpha:"> <s:HSlider id="sl" minimum="0.0" maximum="1.0" value="1.0" snapInterval="0.1" stepSize="0.1" /> </s:FormItem> [...]]]> The following example shows how you can set the background alpha on a Spark FormHeading control in Flex Hero by setting the backgroundAlpha style.

The following example(s) require Flash Player 10 and the beta Adobe Flex Hero 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 Hero SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+Hero.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/ -->
<s:Application name="Spark_FormHeading_backgroundAlpha_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>
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="backgroundAlpha:">
                <s:HSlider id="sl"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1" stepSize="0.1" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading label="Spark Form Heading"
                backgroundColor="haloSilver"
                backgroundAlpha="{sl.value}" />
        <s:FormItem sequenceLabel="1." label="Username:" required="true">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:" required="true">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

You can also set the backgroundAlpha 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/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/ -->
<s:Application name="Spark_FormHeading_backgroundAlpha_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";
        @namespace mx "library://ns.adobe.com/flex/mx";
 
        s|FormHeading {
            backgroundAlpha: 0.2;
            backgroundColor: haloSilver;
        }
    </fx:Style>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading id="fh1"
                label="Spark Form Heading" />
        <s:FormItem sequenceLabel="1." label="Username:" required="true">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:" required="true">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

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

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/ -->
<s:Application name="Spark_FormHeading_backgroundAlpha_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>
    <s:controlBarContent>
        <s:Form>
            <s:FormItem label="backgroundAlpha:">
                <s:HSlider id="sl"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1" stepSize="0.1"
                        change="sl_changeHandler(event);" />
            </s:FormItem>
        </s:Form>
    </s:controlBarContent>
 
    <fx:Script>
        <![CDATA[
            protected function sl_changeHandler(evt:Event):void {
                fh1.setStyle("backgroundAlpha", sl.value);
            }
        ]]>
    </fx:Script>
 
    <s:Form id="frm" defaultButton="{submitBtn}" backgroundColor="#EEEEEE">
        <s:FormHeading id="fh1"
                label="Spark Form Heading"
                backgroundColor="haloSilver" />
        <s:FormItem sequenceLabel="1." label="Username:" required="true">
            <s:helpContent>
                <s:Label text="user@domain.com" />
            </s:helpContent>
            <s:TextInput id="username" />
        </s:FormItem>
        <s:FormItem sequenceLabel="2." label="Password:" required="true">
            <s:helpContent>
                <s:Label text="weak" color="red" />
            </s:helpContent>
            <s:TextInput id="password1" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem sequenceLabel="3." label="Confirm password:">
            <s:helpContent>
                <s:HGroup>
                    <s:Label text="One" color="red" />
                    <s:Label text="Two" color="blue" />
                </s:HGroup>
            </s:helpContent>
            <s:TextInput id="password2" displayAsPassword="true" />
        </s:FormItem>
        <s:FormItem>
            <s:layout>
                <s:HorizontalLayout />
            </s:layout>
            <s:Button id="resetBtn" label="Reset" />
            <s:Button id="submitBtn" label="Submit" />
        </s:FormItem>
    </s:Form>
 
</s:Application>

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

 
]]> http://blog.flexexamples.com/2010/09/01/setting-the-background-alpha-on-a-spark-formheading-control-in-flex-hero/feed/ 0 Modifying the corner white box on an MX Container when scroll bars are visible in Flex http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/#comments Wed, 05 May 2010 23:51:13 +0000 Peter deHaan http://blog.flexexamples.com/?p=2938 The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ --> <mx:Application name="MX_Container_whiteBox_alpha_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" [...]]]> The following example shows how you can modify the visibility and alpha of the white box in the lower-right corner of an MX Container in Flex when both the horizontal and vertical scroll bars are visible by using the rawChildren property and getChildByName() method.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/ -->
<mx:Application name="MX_Container_whiteBox_alpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundGradientColors="[#FF0000,#FF00FF]">
 
    <mx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
 
            protected var wBox:DisplayObject;
 
            protected function hBox_creationCompleteHandler(evt:FlexEvent):void {
                wBox = hBox.rawChildren.getChildByName("whiteBox");
            }
 
            protected function sldr1_changeHandler(evt:Event):void {
                wBox.alpha = sldr1.value;
            }
 
            protected function chckBx_changeHandler(evt:Event):void {
                wBox.visible = chckBx.selected;
            }
        ]]>
    </mx:Script>
 
    <mx:ApplicationControlBar dock="true">
        <mx:Form>
            <mx:FormItem label="whiteBox alpha:">
                <mx:HSlider id="sldr1"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="sldr1_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="whiteBox visible:">
                <mx:CheckBox id="chckBx"
                        selected="true"
                        change="chckBx_changeHandler(event);" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundAlpha:">
                <mx:HSlider id="sldr2"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="HBox backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="green" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <mx:HBox id="hBox"
            backgroundAlpha="{sldr2.value}"
            backgroundColor="{clrPckr.selectedColor}"
            horizontalScrollPolicy="on" verticalScrollPolicy="on"
            width="240" height="160"
            paddingLeft="10" paddingRight="10"
            paddingTop="10" paddingBottom="10"
            creationComplete="hBox_creationCompleteHandler(event);">
        <mx:Button label="MX Button" width="300" height="100%" />
    </mx:HBox>
 
</mx:Application>
 
]]> http://blog.flexexamples.com/2010/05/05/modifying-the-corner-white-box-on-an-mx-container-when-scroll-bars-are-visible-in-flex/feed/ 0 Setting the alpha on a Spark Panel container title bar in Flex 4 http://blog.flexexamples.com/2010/04/03/setting-the-alpha-on-a-spark-panel-container-title-bar-in-flex-4/ http://blog.flexexamples.com/2010/04/03/setting-the-alpha-on-a-spark-panel-container-title-bar-in-flex-4/#comments Sat, 03 Apr 2010 19:32:12 +0000 Peter deHaan http://blog.flexexamples.com/?p=2676 The following example shows how you can create a Spark Panel container with a semi-transparent title bar in Flex 4 by creating a custom Spark Panel skin and setting the alpha property on the tbFill, tbHilite, and tbDiv skin parts, and then setting the backgroundAlpha style on the Panel container.

The following example has [...]]]> The following example shows how you can create a Spark Panel container with a semi-transparent title bar in Flex 4 by creating a custom Spark Panel skin and setting the alpha property on the tbFill, tbHilite, and tbDiv skin parts, and then setting the backgroundAlpha style on the Panel container.

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.

The following example has three Spark Panel containers. The first Panel uses the default skin and setting the backgroundAlpha style only sets the alpha on the Panel background and not the title bar. The second Panel sets the skinClass style to our custom Spark Panel skin, and setting the backgroundAlpha style sets the alpha on the Panel background AND the title bar area. The third Panel also sets the skinClass style to our custom Spark Panel skin but also uses a Spark BorderContainer container to override the background fill on the Panel so only the Panel title bar area changes alpha.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/03/setting-the-alpha-on-a-spark-panel-container-title-bar-in-flex-4/ -->
<s:Application name="Spark_Panel_skin_tbFill_alpha_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>
            <mx:FormItem label="backgroundAlpha:">
                <s:HSlider id="sldr"
                        minimum="0.0" maximum="1.0"
                        value="1.0"
                        snapInterval="0.1" stepSize="0.1" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="clrPckr"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </s:controlBarContent>
 
    <!-- background fill -->
    <s:Rect width="100%" height="100%">
        <s:fill>
            <s:BitmapFill source="@Embed('skins/pattern_149.gif')" fillMode="repeat" />
        </s:fill>
    </s:Rect>
 
    <s:HGroup horizontalCenter="0" verticalCenter="-0">
        <s:Panel id="pnl1"
                 title="Default Spark Panel"
                 backgroundAlpha="{sldr.value}"
                 backgroundColor="{clrPckr.selectedColor}"
                 width="200" height="160">
            <s:Scroller left="0" right="0" top="0" bottom="0">
                <s:VGroup width="100%" height="100%" paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
                    <s:Label text="Spark Panel contents" width="100%" />
                </s:VGroup>
            </s:Scroller>
        </s:Panel>
 
        <s:Panel id="pnl2"
                title="Spark Panel w/ alpha"
                skinClass="skins.CustomPanelSkin"
                backgroundAlpha="{sldr.value}"
                backgroundColor="{clrPckr.selectedColor}"
                width="200" height="160">
            <s:Scroller left="0" right="0" top="0" bottom="0">
                <s:VGroup width="100%" height="100%" paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
                    <s:Label text="Spark Panel contents" width="100%" />
                </s:VGroup>
            </s:Scroller>
        </s:Panel>
 
        <s:Panel id="pnl3"
                 title="Spark Panel w/ alpha+fill"
                 skinClass="skins.CustomPanelSkin"
                 backgroundAlpha="{sldr.value}"
                 backgroundColor="{clrPckr.selectedColor}"
                 width="200" height="160">
            <s:BorderContainer backgroundColor="white" borderVisible="false" width="100%" height="100%">
                <s:Scroller left="0" right="0" top="0" bottom="0">
                    <s:VGroup width="100%" height="100%" paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20">
                        <s:Label text="Spark Panel contents" width="100%" />
                    </s:VGroup>
                </s:Scroller>
            </s:BorderContainer>
        </s:Panel>
    </s:HGroup>
 
</s:Application>

And the custom Spark Panel skin, skins/CustomPanelSkin.mxml, is as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/04/03/setting-the-alpha-on-a-spark-panel-container-title-bar-in-flex-4/ -->
<s:SparkSkin name="CustomPanelSkin"
        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">
    <!-- states -->
    <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>
                <s:SolidColor id="backgroundFill" color="#FFFFFF"/>
            </s:fill>
        </s:Rect>
 
        <!-- layer 3: contents -->
        <!--- Contains the vertical stack of titlebar content and controlbar. -->
        <s:Group id="contents"
                 left="1" right="1" top="1" bottom="1">
            <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"
                        alpha="0.2">
                    <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"
                        alpha="0.2">
                    <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"
                        alpha="0.2">
                    <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"
                         minHeight="30"
                         verticalAlign="middle" fontWeight="bold">
                </s:Label>
            </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>
 
            <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>

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/04/03/setting-the-alpha-on-a-spark-panel-container-title-bar-in-flex-4/feed/ 3 Displaying a semi-transparent FLV file in an MX VideoDisplay control in Flex http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/ http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/#comments Fri, 22 Jan 2010 01:24:33 +0000 Peter deHaan http://blog.flexexamples.com/?p=2323 The following example shows how you can display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/ --> <mx:Application name="VideoDisplay_backgroundAlpha_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#FF0000,#0000FF]">   <mx:VideoDisplay id="vidDisp" source="walking.flv" backgroundAlpha="0.0" width="80%" height="80%" horizontalCenter="0" [...]]]> The following example shows how you can display an FLV file with alpha channel transparency in an MX VideoDisplay control in Flex 3 by setting the backgroundAlpha style to 0.

Full code after the jump.

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/ -->
<mx:Application name="VideoDisplay_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="absolute"
        backgroundGradientColors="[#FF0000,#0000FF]">
 
    <mx:VideoDisplay id="vidDisp"
            source="walking.flv"
            backgroundAlpha="0.0"
            width="80%" height="80%"
            horizontalCenter="0" verticalCenter="0"
            complete="event.currentTarget.play();"/>
 
</mx:Application>

The walking.flv can be found at the “Introducing True Alpha Video in Flash 8″ article in the Adobe Flash Developer Center.

 
]]> http://blog.flexexamples.com/2010/01/21/displaying-a-semi-transparent-flv-file-in-an-mx-videodisplay-control-in-flex/feed/ 0 Setting the background alpha on a Spark SimpleText control in Flex 4 http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/ http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/#comments Thu, 16 Jul 2009 03:22:23 +0000 Peter deHaan http://blog.flexexamples.com/?p=1202 The following example shows how you can set the background alpha and background color on a Spark SimpleText control in Flex 4 by setting the backgroundAlpha and backgroundColor styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/ --> <s:Application name="Spark_SimpleText_backgroundAlpha_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo">   <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form [...]]]> The following example shows how you can set the background alpha and background color on a Spark SimpleText control in Flex 4 by setting the backgroundAlpha and backgroundColor styles.

Full code after the jump.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/ -->
<s:Application name="Spark_SimpleText_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
            <mx:FormItem label="backgroundAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0" 
                        stepSize="0.1" 
                        snapInterval="0.1" 
                        liveDragging="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:SimpleText id="smplTxt"
            backgroundAlpha="{slider.value}"
            backgroundColor="{colorPicker.selectedColor}"
            maxWidth="500"
            horizontalCenter="0"
            verticalCenter="0">
        <fx:String source="lorem.txt" />
    </s:SimpleText>
 
</s:Application>

You can also set the backgroundAlpha and backgroundColor styles in an external .CSS file or <Style /> block, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/ -->
<s:Application name="Spark_SimpleText_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";
        @namespace s "library://ns.adobe.com/flex/spark";
 
        s|SimpleText {
            backgroundAlpha: 0.2;
            backgroundColor: red;
        }
    </fx:Style>
 
    <s:SimpleText id="smplTxt"
            maxWidth="500"
            horizontalCenter="0"
            verticalCenter="0">
        <fx:String source="lorem.txt" />
    </s:SimpleText>
 
</s:Application>

Or, you can set the backgroundAlpha and backgroundColor styles using ActionScript, as seen in the following example:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/ -->
<s:Application name="Spark_SimpleText_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
 
    <fx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
 
            protected function colorPicker_change(evt:ColorPickerEvent):void {
                smplTxt.setStyle("backgroundColor", evt.color);
            }
 
            protected function slider_change(event:Event):void {
                smplTxt.setStyle("backgroundAlpha", slider.value);
            }
        ]]>
    </fx:Script>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="backgroundAlpha:">
                <s:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0" 
                        stepSize="0.1" 
                        snapInterval="0.1" 
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>
 
    <s:SimpleText id="smplTxt"
            maxWidth="500"
            horizontalCenter="0"
            verticalCenter="0">
        <fx:String source="lorem.txt" />
    </s:SimpleText>
 
</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/07/15/setting-the-background-alpha-on-a-spark-simpletext-control-in-flex-4/feed/ 3 Changing the background alpha on the Halo TextArea control in Flex 4 http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/#comments Wed, 10 Jun 2009 06:59:12 +0000 Peter deHaan http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ The following example shows how you can set the background alpha on the Halo TextArea control’s Spark skin in Flex 4 by setting the borderSkin style. As you may have noticed, the Halo components have new “Spark” themed skins in Flex 4 (basically so you can use Halo+Spark components in the same Flex project and [...]]]> The following example shows how you can set the background alpha on the Halo TextArea control’s Spark skin in Flex 4 by setting the borderSkin style. As you may have noticed, the Halo components have new “Spark” themed skins in Flex 4 (basically so you can use Halo+Spark components in the same Flex project and have a consistent look-and-feel). You may also have noticed that several styles on the Halo controls don’t appear to work any more when using the Spark skins. For example, if you want to change the background fill alpha on the Halo TextArea control in Flex 4, you can no longer set the backgroundAlpha style, you’ll now need to create a custom skin and set the borderSkin style.

The various Halo component’s new Spark skins can be found in your Flex 4 SDK installation in the following location: <Flex SDK>\frameworks\projects\sparkskins\src\mx\skins\spark\…

If you want to set the border skin on the Halo TextArea control, you’ll need to copy the TextInputBorderSkin.mxml file.

Full code after the jump.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">

    <mx:TextArea id="textArea"
            borderSkin="skins.CustomHaloTextAreaBorderSkin"
            left="50" right="50"
            top="50" bottom="50">
        <mx:htmlText><fx:String source="lorem.html" /></mx:htmlText>
    </mx:TextArea>

</s:Application>

And the custom skin class, CustomHaloTextAreaBorderSkin.mxml, is as follows:

View skins/CustomHaloTextAreaBorderSkin.mxml

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ -->
<local:SparkSkinForHalo name="CustomHaloTextAreaBorderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:local="mx.skins.spark.*"
        implements="mx.core.IBorder">

    <fx:Script>
        <![CDATA[
            import mx.core.EdgeMetrics;
            import mx.core.IUIComponent;

            /* Define the skin elements that should not be colorized. */
            static private const exclusions:Array = ["background"];
            override public function get colorizeExclusions():Array {return exclusions;}

            /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
            static private const contentFill:Array = ["bgFill"];
            override public function get contentItems():Array {return contentFill};

            /* Define the border items.*/
            static private const borderItem:Array = ["borderEntry1", "borderEntry2"];
            override protected function get borderItems():Array {return borderItem;}

            static private const metrics:EdgeMetrics = new EdgeMetrics(2, 2, 2, 2);

            public function get borderMetrics():EdgeMetrics {
                return metrics;
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                if (parent && (parent is IUIComponent) && !IUIComponent(parent).enabled) {
                    alpha = 0.5;
                } else {
                    alpha = 1;
                }
            }
        ]]>
    </fx:Script>

    <!-- border -->
    <s:Rect left="0" right="0" top="0" bottom="0">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" alpha="0.5525" />
                <s:GradientEntry id="borderEntry2" alpha="0.6375" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>

    <!-- fill -->
    <s:Rect id="background" left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:SolidColor id="bgFill" color="0xFFFFFF" alpha="0.4" />
        </s:fill>
    </s:Rect>

    <!-- shadow -->
    <s:Rect left="1" top="1" right="1" height="1">
        <s:fill>
            <s:SolidColor color="0x000000" alpha="0.12" />
        </s:fill>
    </s:Rect>

</local:SparkSkinForHalo>

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

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">

    <fx:Style>
        @namespace mx "library://ns.adobe.com/flex/halo";

        mx|TextArea {
            borderSkin: ClassReference("skins.CustomHaloTextAreaBorderSkin");
            left: 50;
            right: 50;
            top: 50;
            bottom: 50;
        }
    </fx:Style>

    <mx:TextArea id="textArea">
        <mx:htmlText><fx:String source="lorem.html" /></mx:htmlText>
    </mx:TextArea>

</s:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red">

    <fx:Script>
        <![CDATA[
            import skins.CustomHaloTextAreaBorderSkin;

            private function btn_click(evt:MouseEvent):void {
                textArea.setStyle("borderSkin", CustomHaloTextAreaBorderSkin);
            }
        ]]>
    </fx:Script>

    <s:Button id="btn"
            label="Set border skin"
            click="btn_click(event);"
            left="10"
            top="10" />

    <mx:TextArea id="textArea"
            left="50" right="50"
            top="50" bottom="50">
        <mx:htmlText><fx:String source="lorem.html" /></mx:htmlText>
    </mx:TextArea>

</s:Application>

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/ -->
<s:Application name="TextArea_SparkSkin_backgroundAlpha_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        backgroundColor="red"
        initialize="init();">

    <fx:Script>
        <![CDATA[
            import mx.controls.TextArea;
            import skins.CustomHaloTextAreaBorderSkin;

            [Embed(source="lorem.html", mimeType="application/octet-stream")]
            private const lorem:Class;

            private var textArea:TextArea;

            private function init():void {
                textArea = new TextArea();
                textArea.htmlText = new lorem();
                textArea.left = 50;
                textArea.right = 50;
                textArea.top = 50;
                textArea.bottom = 50;
                textArea.setStyle("borderSkin", CustomHaloTextAreaBorderSkin);
                addElement(textArea);
            }
        ]]>
    </fx:Script>

</s:Application>

This entry is based on a beta version of the Flex 4 SDK and therefore is very likely to change as development of the Flex SDK continues. The API can (and will) change causing examples to possibly not compile in newer versions of the Flex 4 SDK.

 
]]> http://blog.flexexamples.com/2009/06/09/changing-the-background-alpha-on-the-halo-textarea-control-in-flex-4/feed/ 3 Setting the background alpha of the RichTextEditor text area in Flex http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/#comments Mon, 25 Aug 2008 07:55:30 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ In a previous example, Setting the background color of the RichTextEditor text area in Flex, we saw how you could set the background color of the RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

The following example shows how you can set the background alpha of the Flex RichTextEditor control’s nested TextArea [...]]]> In a previous example, Setting the background color of the RichTextEditor text area in Flex, we saw how you could set the background color of the RichTextEditor control’s nested TextArea control by setting the backgroundColor style.

The following example shows how you can set the background alpha of the Flex RichTextEditor control’s nested TextArea control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.events.ColorPickerEvent;
            import mx.events.SliderEvent;

            private function colorPicker_change(evt:ColorPickerEvent):void {
                richTextEditor.textArea.setStyle("backgroundColor", evt.color);
            }

            private function slider_change(evt:SliderEvent):void {
                richTextEditor.textArea.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="0xFFFFFF"
                        change="colorPicker_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>

View source is enabled in the following example.

You can also set the nested TextArea control’s background alpha in an external .CSS file or <mx:Style /> block, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/ -->
<mx:Application name="RichTextEditor_textArea_backgroundAlpha_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        RichTextEditor {
            textAreaStyleName: rteTextAreaStyles;
        }

        .rteTextAreaStyles {
            backgroundAlpha: 0.3; /* 30% */
            backgroundColor: red;
        }
    </mx:Style>

    <mx:RichTextEditor id="richTextEditor" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/25/setting-the-background-alpha-of-the-richtexteditor-text-area-in-flex/feed/ 3 Changing the background alpha of a TextArea control in Flex http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/#comments Mon, 18 Aug 2008 15:37:05 +0000 Peter deHaan http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ The following example shows how you can set the background alpha for a Flex TextArea control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ --> <mx:Application name="TextArea_backgroundDisabledColor_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"> <mx:String id="lorem" source="lorem.txt" /> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain" backgroundAlpha="0.0"> <mx:FormItem label="backgroundAlpha:"> <mx:HSlider id="slider" [...]]]> The following example shows how you can set the background alpha for a Flex TextArea control by setting the backgroundAlpha style.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            backgroundAlpha="{slider.value}"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Style>
        TextArea {
            backgroundAlpha: 0.0;
        }
    </mx:Style>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />

</mx:Application>

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/ -->
<mx:Application name="TextArea_backgroundDisabledColor_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle">

    <mx:Script>
        <![CDATA[
            import mx.events.SliderEvent;

            private function slider_change(evt:SliderEvent):void {
                textArea.setStyle("backgroundAlpha", evt.value);
            }
        ]]>
    </mx:Script>

    <mx:String id="lorem" source="lorem.txt" />

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain" backgroundAlpha="0.0">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.01"
                        tickInterval="0.1"
                        liveDragging="true"
                        change="slider_change(event);" />
            </mx:FormItem>
            <mx:FormItem label="enabled:">
                <mx:CheckBox id="checkBox"
                        selected="true" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:TextArea id="textArea"
            text="{lorem}"
            enabled="{checkBox.selected}"
            width="100%"
            height="100%" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/08/18/changing-the-background-alpha-of-a-textarea-control-in-flex/feed/ 0 Setting the background color and background alpha for a NumericStepper control in Flex http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/#comments Sat, 24 May 2008 01:06:34 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ The following example shows how you can set the background color and background alpha for a Flex NumericStepper control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="backgroundAlpha:"> <mx:HSlider id="slider" [...]]]> The following example shows how you can set the background color and background alpha for a Flex NumericStepper control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0.0"
                        maximum="1.0"
                        value="1.0"
                        snapInterval="0.1"
                        tickInterval="0.1"
                        liveDragging="true" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:NumericStepper id="numericStepper"
            backgroundAlpha="{slider.value}"
            backgroundColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

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

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Style>
        NumericStepper {
            backgroundAlpha: 0.5;
            backgroundColor: red;
        }
    </mx:Style>

    <mx:NumericStepper id="numericStepper" />

</mx:Application>

Or you can set the backgroundAlpha and backgroundColor styles using ActionScript, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function init():void {
                numericStepper.setStyle("backgroundAlpha", 0.5);
                numericStepper.setStyle("backgroundColor", "red");
            }
        ]]>
    </mx:Script>

    <mx:NumericStepper id="numericStepper"
            creationComplete="init();" />

</mx:Application>
 
]]> http://blog.flexexamples.com/2008/05/23/setting-the-background-color-and-background-alpha-for-a-numericstepper-control-in-flex/feed/ 2 Changing the background color of the DateChooser control in Flex http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/ http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/#comments Sat, 03 May 2008 06:32:20 +0000 Peter deHaan http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/ The following example shows how you can change the background color of a Flex DateChooser control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/ --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white"> <mx:ApplicationControlBar dock="true"> <mx:Form styleName="plain"> <mx:FormItem label="backgroundAlpha:"> <mx:HSlider id="slider" minimum="0" maximum="1" value="1" [...]]]> The following example shows how you can change the background color of a Flex DateChooser control by setting the backgroundColor and backgroundAlpha styles.

Full code after the jump.

View MXML

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="backgroundAlpha:">
                <mx:HSlider id="slider"
                        minimum="0"
                        maximum="1"
                        value="1"
                        liveDragging="true"
                        snapInterval="0.01"
                        tickInterval="0.1" />
            </mx:FormItem>
            <mx:FormItem label="backgroundColor:">
                <mx:ColorPicker id="colorPicker"
                        selectedColor="white" />
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:DateChooser id="dateChooser"
            backgroundAlpha="{slider.value}"
            backgroundColor="{colorPicker.selectedColor}" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here’s the “same” example, but in ActionScript instead of MXML:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.ColorPicker;
            import mx.controls.DateChooser;
            import mx.controls.HSlider;
            import mx.events.ColorPickerEvent;
            import mx.events.SliderEvent;

            private var appControlBar:ApplicationControlBar;
            private var form:Form;
            private var slider:HSlider;
            private var colorPicker:ColorPicker;
            private var dateChooser:DateChooser;

            private function init():void {
                slider = new HSlider();
                slider.minimum = 0;
                slider.maximum = 1;
                slider.value = 1;
                slider.liveDragging = true;
                slider.snapInterval = 0.01;
                slider.tickInterval = 0.1;
                slider.addEventListener(SliderEvent.CHANGE, slider_change);

                colorPicker = new ColorPicker();
                colorPicker.selectedColor = 0xFFFFFF;
                colorPicker.addEventListener(ColorPickerEvent.CHANGE, colorPicker_change);

                var alphaFormItem:FormItem = new FormItem();
                alphaFormItem.label = "backgroundAlpha:";
                alphaFormItem.addChild(slider);

                var colorFormItem:FormItem = new FormItem();
                colorFormItem.label = "backgroundColor:";
                colorFormItem.addChild(colorPicker);

                form = new Form();
                form.styleName = "plain";
                form.addChild(alphaFormItem);
                form.addChild(colorFormItem);

                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(form);
                addChild(appControlBar);

                dateChooser = new DateChooser();
                dateChooser.setStyle("backgroundAlpha", slider.value);
                dateChooser.setStyle("backgroundColor", colorPicker.selectedColor);
                addChild(dateChooser);
            }

            private function slider_change(evt:SliderEvent):void {
                dateChooser.setStyle("backgroundAlpha", evt.value);
            }

            private function colorPicker_change(evt:ColorPickerEvent):void {
                dateChooser.setStyle("backgroundColor", evt.color);
            }
        ]]>
    </mx:Script>

</mx:Application>

View source is enabled in the following example.

You can also set the backgroundColor and backgroundAlpha styles in an external .CSS file or within a <mx:Style /> block, as seen in the following snippet:

<mx:Style>
    DateChooser {
        backgroundColor: red;
        backgroundAlpha: 0.5;
    }
</mx:Style>
 
]]> http://blog.flexexamples.com/2008/05/02/changing-the-background-color-of-the-datechooser-control-in-flex/feed/ 4