In a previous example, “Setting a gradient background fill on a Halo TextArea control in Flex 4″, we saw how you could create a linear gradient background on a Halo/MX TextArea control in Flex 4 by creating a custom border skin with a LinearGradient fill and setting the borderSkin style.
The following example shows how you can create a linear gradient background on a Spark TextArea control in Flex 4 by modifying the background fill in the TextArea control’s skin to a LinearGradient.
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 www.adobe.com/products/flex/. To download the latest nightly build of the Flex 4 SDK, see opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4.
For more information on getting started with Flex 4 and Flash Builder 4, see the official Adobe Flex Team blog.
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_skin_background_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"> <s:controlBarContent> <s:Button id="btn" label="Set TextArea background gradient" click="btn_click(event);" /> </s:controlBarContent> <fx:Script> <![CDATA[ import mx.graphics.GradientEntry; import mx.graphics.LinearGradient; import mx.utils.ObjectUtil; import spark.skins.spark.TextAreaSkin; protected function btn_click(evt:MouseEvent):void { var grad1:GradientEntry = new GradientEntry(0xFF0000); var grad2:GradientEntry = new GradientEntry(0xFF00FF); var linearGrad:LinearGradient = new LinearGradient(); linearGrad.entries = [grad1, grad2]; linearGrad.rotation = 90; TextAreaSkin(ta.skin).background.fill = linearGrad; } ]]> </fx:Script> <s:TextArea id="ta" text="{Capabilities.serverString}" verticalScrollPolicy="on" horizontalCenter="0" verticalCenter="0" /> </s:Application> |
View source is enabled in the following example.
[GoogleAdsWide]
You can also set the background fill to a gradient using a custom TextArea skin and then set the skinClass style, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_skin_background_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"> <s:TextArea id="ta" text="{Capabilities.serverString}" skinClass="skins.CustomTextAreaSkin" verticalScrollPolicy="on" horizontalCenter="0" verticalCenter="0" /> </s:Application> |
And the custom Spark TextArea skin, skins/CustomTextAreaSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- --> <s:SparkSkin name="CustomTextAreaSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" blendMode="normal"> <s:states> <s:State name="normal"/> <s:State name="disabled"/> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.TextArea")] ]]> </fx:Metadata> <fx:Script fb:purpose="styling"> <![CDATA[ private var paddingChanged:Boolean; /* Define the skin elements that should not be colorized. For text area, the skin itself is colorized but the individual parts are not. */ static private const exclusions:Array = ["background", "scroller"]; 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 = []; override public function get contentItems():Array { return contentFill }; override protected function commitProperties():void { super.commitProperties(); if (paddingChanged) { updatePadding(); paddingChanged = false; } } override protected function initializationComplete():void { useBaseColor = true; super.initializationComplete(); } override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void { if (getStyle("borderVisible") == true) { border.visible = true; shadow.visible = true; background.left = background.top = background.right = background.bottom = 1; textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 1; } else { border.visible = false; shadow.visible = false; background.left = background.top = background.right = background.bottom = 0; textDisplay.left = textDisplay.top = textDisplay.right = textDisplay.bottom = 0; } borderStroke.color = getStyle("borderColor"); borderStroke.alpha = getStyle("borderAlpha"); super.updateDisplayList(unscaledWidth, unscaledHeight); } private function updatePadding():void { if (!textDisplay) { return; } // Push padding styles into the textDisplay var padding:Number; padding = getStyle("paddingLeft"); if (textDisplay.getStyle("paddingLeft") != padding) { textDisplay.setStyle("paddingLeft", padding); } padding = getStyle("paddingTop"); if (textDisplay.getStyle("paddingTop") != padding) { textDisplay.setStyle("paddingTop", padding); } padding = getStyle("paddingRight"); if (textDisplay.getStyle("paddingRight") != padding) { textDisplay.setStyle("paddingRight", padding); } padding = getStyle("paddingBottom"); if (textDisplay.getStyle("paddingBottom") != padding) { textDisplay.setStyle("paddingBottom", padding); } } override public function styleChanged(styleProp:String):void { super.styleChanged(styleProp); if (!styleProp || styleProp.indexOf("padding") == 0) { paddingChanged = true; invalidateProperties(); } } ]]> </fx:Script> <fx:Script> <![CDATA[ override public function get focusSkinExclusions():Array { return [ textDisplay ] }; ]]> </fx:Script> <!-- 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> <!-- fill --> <!--- Defines the appearance of the TextArea component's background. --> <s:Rect id="background" left="1" right="1" top="1" bottom="1"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="red" /> <s:GradientEntry color="purple" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- shadow --> <s:Rect id="shadow" left="1" top="1" right="1" height="1"> <s:fill> <s:SolidColor color="0x000000" alpha="0.12" /> </s:fill> </s:Rect> <!--- Defines the scroller used to scroll the RichEditableText. --> <s:Scroller id="scroller" left="0" top="0" right="0" bottom="0" minViewportInset="1" measuredSizeIncludesScrollBars="false"> <s:RichEditableText id="textDisplay" widthInChars="15" heightInLines="10" /> </s:Scroller> </s:SparkSkin> |
You can also set the skinClass 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/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_skin_background_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/halo"; s|TextArea { skinClass: ClassReference("skins.CustomTextAreaSkin"); } </fx:Style> <s:TextArea id="ta" text="{Capabilities.serverString}" verticalScrollPolicy="on" horizontalCenter="0" verticalCenter="0" /> </s:Application> |
Or, you can set the skinClass style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/10/24/setting-a-gradient-background-fill-on-a-spark-textarea-control-in-flex-4/ --> <s:Application name="Spark_TextArea_skin_background_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"> <s:controlBarContent> <s:Button id="btn" label="Set TextArea background gradient" click="btn_click(event);" /> </s:controlBarContent> <fx:Script> <![CDATA[ import skins.CustomTextAreaSkin; protected function btn_click(evt:MouseEvent):void { ta.setStyle("skinClass", CustomTextAreaSkin); } ]]> </fx:Script> <s:TextArea id="ta" text="{Capabilities.serverString}" verticalScrollPolicy="on" 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.