The following example shows how you can create a “fancy” fading bitmap fill background on a Spark Panel container in Flex 4 by using a combination BitmapFill and LinearGradient fill.
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 beta, check out the Adobe Flash Builder 4 page on the Adobe Labs site. To download the latest build of the Flex 4 SDK, see http://opensource.adobe.com/wiki/display/flexsdk/Download+Flex+4. For instructions on using the beta Flex 4 SDK in Flex Builder 3, see "Using the beta Flex 4 SDK in Flex Builder 3".
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_fill_BitmapFill_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <mx:ApplicationControlBar width="100%" cornerRadius="0"> <mx:Form styleName="plain"> <mx:FormItem label="rotation:"> <s:HSlider id="rotationSlider" minimum="-360" maximum="360" value="90" liveDragging="true" width="{pnl.width}" /> </mx:FormItem> <mx:FormItem label="ratio:"> <s:HSlider id="ratioSlider" minimum="0.0" maximum="1.0" value="0.2" valueInterval="0.05" liveDragging="true" width="{pnl.width}" /> </mx:FormItem> </mx:Form> </mx:ApplicationControlBar> <s:Panel id="pnl" title="Spark Panel title" width="320" height="240" horizontalCenter="0" verticalCenter="0"> <s:Rect width="100%" height="100%"> <s:fill> <s:BitmapFill source="@Embed('assets/pattern_140.gif')" /> </s:fill> </s:Rect> <s:Rect width="100%" height="100%"> <s:fill> <s:LinearGradient rotation="{rotationSlider.value}"> <s:GradientEntry color="white" alpha="0.0" ratio="0.0" /> <s:GradientEntry color="#F0EBD2" alpha="1.0" ratio="{ratioSlider.value}" /> </s:LinearGradient> </s:fill> </s:Rect> <s:TextArea id="textArea" verticalScrollPolicy="on" left="20" right="20" top="20" bottom="20"> <s:text>The quick brown fox jumps over the lazy dog.</s:text> </s:TextArea> </s:Panel> </s:Application>
View source is enabled in the following example.
Background image pattern copyright of Squidfingers.com.
You can also set the BitmapFill and LinearGradient fills in a custom Spark Panel skin, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ --> <s:Application name="Spark_Panel_fill_BitmapFill_test" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo"> <s:Panel id="pnl" title="Spark Panel title" skinClass="skins.CustomPanelSkin" contentBackgroundColor="#F0EBD2" width="320" height="240" horizontalCenter="0" verticalCenter="0"> <s:TextArea id="textArea" contentBackgroundColor="white" verticalScrollPolicy="on" left="20" right="20" top="20" bottom="20"> <s:text>The quick brown fox jumps over the lazy dog.</s:text> </s:TextArea> </s:Panel> </s:Application>
And the custom Spark Panel skin, CustomPanelSkin.mxml, is as follows:
<?xml version="1.0" encoding="utf-8"?> <!-- http://blog.flexexamples.com/2009/06/13/creating-a-fading-bitmap-fill-background-on-a-spark-panel-container-in-flex-4/ --> <s:SparkSkin name="CustomPanelSkin" xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5"> <s:states> <s:State name="normal" /> <s:State name="disabled" /> </s:states> <fx:Metadata> <![CDATA[ [HostComponent("spark.components.Panel")] ]]> </fx:Metadata> <fx:Script> /* Define the skin elements that should not be colorized. For panel, border and title backround are skinned, but the content area and title text are not. */ static private const exclusions:Array = ["background", "titleField", "contentGroup"]; 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}; </fx:Script> <!-- drop shadow --> <s:RectangularDropShadow id="shadow" blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" color="#000000" left="0" top="0" right="0" bottom="0"/> <!-- layer 1: border --> <s:Rect left="0" right="0" top="0" bottom="0"> <s:stroke> <s:SolidColorStroke color="0" alpha="0.50" weight="1" /> </s:stroke> </s:Rect> <!-- layer 2: background fill --> <s:Rect left="1" top="1" right="1" bottom="1"> <s:fill> <s:BitmapFill source="@Embed('assets/pattern_140.gif')" /> </s:fill> </s:Rect> <!--- 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:LinearGradient rotation="90"> <s:GradientEntry color="white" alpha="0.0" ratio="0.0" /> <s:GradientEntry id="bgFill" color="0xFF0000" alpha="1.0" ratio="0.3" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 3: title bar fill --> <s:Rect left="1" right="1" top="1" height="30"> <s:fill> <s:LinearGradient rotation="90"> <s:GradientEntry color="0xE2E2E2" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradient> </s:fill> </s:Rect> <!-- layer 4: title bar highlight --> <s:Rect left="1" right="1" top="1" height="30"> <s:stroke> <s:LinearGradientStroke rotation="90" weight="1"> <s:GradientEntry color="0xEAEAEA" /> <s:GradientEntry color="0xD9D9D9" /> </s:LinearGradientStroke> </s:stroke> </s:Rect> <s:Rect left="1" right="1" top="31" height="1"> <s:fill> <s:SolidColor color="0xC0C0C0" /> </s:fill> </s:Rect> <!-- layer 5: text --> <!--- Defines the appearance of the PanelSkin class's title bar. --> <s:SimpleText id="titleField" lineBreak="toFit" left="10" right="4" top="2" height="30" verticalAlign="middle" fontWeight="bold" truncation="1" /> <s:Scroller left="1" right="1" top="32" bottom="1"> <!-- 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:layout> <s:VerticalLayout paddingLeft="20" paddingRight="20" paddingTop="20" paddingBottom="20" /> </s:layout> --> </s:Group> </s:Scroller> </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.
{ 1 comment… read it below or add one }
Very cool! Pretty slick demo of this new capability. Nice Example.