Flex Gumbo中如何通过skinClass样式去掉Spark Panel下拉阴影的例子

By Minidxer | August 1, 2009

接下来的Flex Gumbo中如何通过skinClass样式，去掉Spark Panel下拉阴影。



下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_Panel_skinClass_dropShadow_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark">
  5.  
  6.     <s:Panel title="Spark Panel title"
  7.             skinClass="skins.CustomPanelSkin_noDropShadow"
  8.             width="200"
  9.             horizontalCenter="0"
  10.             verticalCenter="0">
  11.         <s:VGroup left="20" right="20" top="20" bottom="20">
  12.             <s:RichEditableText id="richEditableTxt"
  13.                     text="The quick brown fox jumps over the lazy dog."
  14.                     width="100%"
  15.                     height="100%" />
  16.         </s:VGroup>
  17.     </s:Panel>
  18.  
  19. </s:Application>

下面是CustomFxPanelSkin_noDropShadow.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomPanelSkin_noDropShadow"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         alpha.disabled="0.5">
  6.     <s:states>
  7.         <s:State name="normal" />
  8.         <s:State name="disabled" />
  9.     </s:states>
  10.  
  11.     <fx:Metadata>
  12.     <![CDATA[
  13.         [HostComponent("spark.components.Panel")]
  14.     ]]>
  15.     </fx:Metadata>
  16.  
  17.     <fx:Script>
  18.         /* Define the skin elements that should not be colorized.
  19.            For panel, border and title backround are skinned, but the content area and title text are not. */
  20.         static private const exclusions:Array = ["background", "titleField", "contentGroup"];
  21.  
  22.         override public function get colorizeExclusions():Array {return exclusions;}
  23.  
  24.         /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  25.         static private const contentFill:Array = ["bgFill"];
  26.  
  27.         override public function get contentItems():Array {return contentFill};
  28.     </fx:Script>
  29.  
  30.     <!-- layer 1: border -->
  31.     <s:Rect left="0" right="0" top="0" bottom="0">
  32.         <s:stroke>
  33.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  34.         </s:stroke>
  35.     </s:Rect>
  36.  
  37.     <!-- layer 2: background fill -->
  38.     <!--- Defines the appearance of the PanelSkin class's background. -->
  39.     <s:Rect id="background" left="1" top="1" right="1" bottom="1">
  40.         <s:fill>
  41.         <!--- Defines the  PanelSkin class's background fill. The default color is 0xFFFFFF. -->
  42.             <s:SolidColor color="0xFFFFFF" id="bgFill" />
  43.         </s:fill>
  44.     </s:Rect>
  45.  
  46.     <!-- layer 3: title bar fill -->
  47.     <s:Rect left="1" right="1" top="1" height="30">
  48.        <s:fill>
  49.             <s:LinearGradient rotation="90">
  50.                 <s:GradientEntry color="0xE2E2E2" />
  51.                 <s:GradientEntry color="0xD9D9D9" />
  52.             </s:LinearGradient>
  53.        </s:fill>
  54.     </s:Rect>
  55.  
  56.     <!-- layer 4: title bar highlight -->
  57.     <s:Rect left="1" right="1" top="1" height="30">
  58.        <s:stroke>
  59.             <s:LinearGradientStroke rotation="90" weight="1">
  60.                 <s:GradientEntry color="0xEAEAEA" />
  61.                 <s:GradientEntry color="0xD9D9D9" />
  62.             </s:LinearGradientStroke>
  63.        </s:stroke>
  64.     </s:Rect>
  65.     <s:Rect left="1" right="1" top="31" height="1">
  66.         <s:fill>
  67.             <s:SolidColor color="0xC0C0C0" />
  68.         </s:fill>
  69.     </s:Rect>
  70.  
  71.     <!-- layer 5: text -->
  72.     <!--- Defines the appearance of the PanelSkin class's title bar. -->
  73.     <s:SimpleText id="titleField" lineBreak="explicit"
  74.              left="10" right="4" top="2" height="30"
  75.              verticalAlign="middle" fontWeight="bold" />
  76.  
  77.     <s:Group id="contentGroup"
  78.             left="1" right="1" top="32" bottom="1" />
  79.  
  80. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Gumbo, Panel | No Comments » | Tags: ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll