flex4自定义panel皮肤

写道

MyPanelSkin.mxml:

<?xml version="1.0" encoding="utf-8"?>

<!--

ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.

NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.

-->

<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
alpha.disabled="0.5" minWidth="131" minHeight="127" xmlns:mx="library://ns.adobe.com/flex/mx">

<fx:Metadata>
[HostComponent("spark.components.Panel")]
</fx:Metadata>

<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="normalWithControlBar" />
<s:State name="disabledWithControlBar" />
</s:states>

<!-- drop shadow -->
<s:Rect left="0" right="0" bottom="0" left.normal="0" bottom.normal="0" right.normal="0" top.normal="0">
<s:filters>
<s:DropShadowFilter blurX="15" blurY="15" alpha="0.18" distance="11" angle="90" knockout="true" />
</s:filters>
<s:fill>
<s:SolidColor color="0" />
</s:fill>
</s:Rect>

<!-- 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="0" right="0" bottom="0" height="15">
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0xE2E2E2" />
<s:GradientEntry color="0x000000" />
</s:LinearGradient>
</s:fill>
</s:Rect>

<!-- layer 3: contents -->
<s:Group left="1" right="1" top="1" bottom="1" >
<s:layout>
<s:VerticalLayout gap="0" horizontalAlign="justify" />
</s:layout>

<s:Group id="topGroup">
<!-- layer 0: title bar fill -->
<!-- Note: We have custom skinned the title bar to be solid black for Tour de Flex -->
<s:Rect id="tbFill" left="0" right="0" top="0" bottom="1">
<s:fill>
<s:SolidColor color="0x000000" />
</s:fill>
</s:Rect>

<!-- layer 1: title bar highlight -->
<s:Rect id="tbHilite" left="0" right="0" top="0" bottom="0" >
<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">
<s:fill>
<s:SolidColor color="0xC0C0C0" />
</s:fill>
</s:Rect>

<!-- layer 3: text -->
<s:BorderContainer backgroundImage="@Embed(source='images/zz.PNG')" backgroundImageFillMode="repeat"
top="0" left="0" right="0" minHeight="30">
<s:Label id="titleDisplay" maxDisplayedLines="1"
verticalAlign="middle" fontWeight="bold" color="#E2E2E2">
</s:Label>
</s:BorderContainer>


<!--<mx:Image includeIn="normal" top="0" left="0" right="0" bottom="0" source="images/zz.PNG"/>-->

</s:Group>

<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" >
<!-- layer 0: control bar background -->
<s:Rect left="0" right="0" bottom="0" top="1" >
<s:fill>
<s:SolidColor color="0xE2EdF7" />
</s:fill>
</s:Rect>

<!-- layer 1: control bar divider line -->
<s:Rect left="0" right="0" top="0" height="1" >
<s:fill>
<s:SolidColor color="0xD1E0F2" />
</s:fill>
</s:Rect>

<!-- layer 2: 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:Skin>

 用flexBuilder设计皮肤时，会自动生成Panel对应的Skin代码，这些自动生成的Skin代码中个控件的ID不能改动。比如：title标签id为titleDisplay，如果改成titleDisplay1，则使用时就无法显示Title。。。。。。