Flex Gumbo中如何改变Panel标题栏背景填充色的例子

By Minidxer | August 28, 2009

接下来的例子演示了Flex Gumbo中如何通过创建自定义的skin类和修改标题栏Rect对象fill属性，改变Panel标题栏背景填充色。

让我们先来看一下Demo（可以点击这里察看源代码）：


下面是完整代码(或点击这里察看)：
下面是main.mxml：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:Application name="Spark_Panel_titleBar_fill_test"
  3.         xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.         xmlns:s="library://ns.adobe.com/flex/spark"
  5.         xmlns:mx="library://ns.adobe.com/flex/halo">
  6.  
  7.     <s:Panel id="panel"
  8.             title="Spark Panel title"
  9.             horizontalCenter="0"
  10.             verticalCenter="0"
  11.             width="320"
  12.             height="240"
  13.             skinClass="skins.CustomPanelSkin">
  14.         <s:TextArea id="textArea"
  15.                 initialize="textArea.text = mx_internal::VERSION;"
  16.                 left="20" top="20" />
  17.     </s:Panel>
  18.  
  19. </s:Application>

下面是skins/CustomPanelSkin.mxml的代码：

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <s:SparkSkin name="CustomPanelSkin"
  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.         <![CDATA[
  19.             /* Define the skin elements that should not be colorized.
  20.                For panel, border and title backround are skinned, but the content area and title text are not. */
  21.             static private const exclusions:Array = ["background", "titleField", "contentGroup"];
  22.  
  23.             override public function get colorizeExclusions():Array {return exclusions;}
  24.  
  25.             /* Define the content fill items that should be colored by the "contentBackgroundColor" style. */
  26.             static private const contentFill:Array = ["bgFill"];
  27.  
  28.             override public function get contentItems():Array {return contentFill};
  29.         ]]>
  30.     </fx:Script>
  31.  
  32.     <!-- drop shadow -->
  33.     <s:Rect left="0" top="0" right="0" bottom="0">
  34.         <s:filters>
  35.             <s:DropShadowFilter blurX="20" blurY="20" alpha="0.32" distance="11" angle="90" knockout="true" />
  36.         </s:filters>
  37.         <s:fill>
  38.             <s:SolidColor color="0" />
  39.         </s:fill>
  40.     </s:Rect>
  41.  
  42.     <!-- layer 1: border -->
  43.     <s:Rect left="0" right="0" top="0" bottom="0">
  44.         <s:stroke>
  45.             <s:SolidColorStroke color="0" alpha="0.50" weight="1" />
  46.         </s:stroke>
  47.     </s:Rect>
  48.  
  49.     <!-- layer 2: background fill -->
  50.     <s:Rect id="background" left="1" top="1" right="1" bottom="1">
  51.         <s:fill>
  52.             <s:SolidColor color="0xFFFFFF" id="bgFill" />
  53.         </s:fill>
  54.     </s:Rect>
  55.  
  56.     <!-- layer 3: title bar fill -->
  57.     <s:Rect left="1" right="1" top="1" height="30">
  58.        <s:fill>
  59.             <s:SolidColor color="haloBlue" />
  60.        </s:fill>
  61.     </s:Rect>
  62.  
  63.     <!-- layer 4: title bar highlight -->
  64.     <s:Rect left="1" right="1" top="1" height="30">
  65.        <s:stroke>
  66.             <s:LinearGradientStroke rotation="90" weight="1">
  67.                 <s:GradientEntry color="0xEAEAEA" />
  68.                 <s:GradientEntry color="0xD9D9D9" />
  69.             </s:LinearGradientStroke>
  70.        </s:stroke>
  71.     </s:Rect>
  72.     <s:Rect left="1" right="1" top="31" height="1">
  73.         <s:fill>
  74.             <s:SolidColor color="0xC0C0C0" />
  75.         </s:fill>
  76.     </s:Rect>
  77.  
  78.     <!-- layer 5: text -->
  79.     <s:SimpleText id="titleField" lineBreak="explicit"
  80.              left="10" right="4" top="2" height="30"
  81.              verticalAlign="middle" fontWeight="bold" color="white" />
  82.  
  83.     <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" />
  84.  
  85. </s:SparkSkin>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

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

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

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll