CSSでFlex 4.5のアコーディオンヘッダーをスタイル設定する

Question

Flex 4.5のCSSとheaderStyleNameプロパティを使用してアコーディオンヘッダーのスタイルを設定しようとしていますが、CSSスタイルは表示されません。アコーディオンヘッダーは既定のスタイルと同じに見えます。ここに私の現在のコードがあります。

Accordion.css：成分​​（ないメインアプリケーション）から

.accHeader { 
    fillColors: #dbf6c6, #e1facd; 
    fillAlphas: 1.0, 0.5; 
} 

MXMLコード：

... 
<fx:Style source="skins/Accordion.css" /> 
<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion" 
         openDuration="500" headerStyleName="accHeader"> 
... 

Iはまた、スタイル・タグ内にCSSを埋め込むの代わりにリンクしようとしました外部のCSSファイルですが、結果は同じです。

また、別のCSSプロパティ（colorなど）を変更すると、変更が正しく表示されます。

私はchromeColorプロパティについても知っていますが、これは私が達成しようとしている外観ではありません。私はCSSを使用することで完全には設定されていないので、カスタマイズ可能なAccordionヘッダーを実現するもう1つの良い方法があれば、それはすべてです。私は最初にスキンを作成しようとしていましたが、新しいMXMLスキンダイアログで正しいホストコンポーネントが表示されなくなったときに停止しました。

正しい方向に私を指し示す情報は非常に高く評価されます。あなたの時間をありがとう！

Answer 1

甘い勝利！

flexlibを使用してAccordionヘッダーをスキンし、Flex 4.5 SDKのソースにあるAccordionHeaderSkin.mxmlに基づいてカスタムスキンを作成することができました。私はヘッダーレンダラーのためにCanvasButtonAccordionHeaderを作り、それのためのスキンを新しいカスタムスキンに設定しました。ここで

はAccordionHeaderSkin.mxml（ない私の最終的なスタイルが、働いて編集可能な皮膚）のためのコードです：

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

<fx:Script> 
    /** 
    * @private 
    */ 
    override protected function initializationComplete():void 
    { 
     useChromeColor = true; 
     super.initializationComplete(); 
    } 
</fx:Script> 

<!-- states --> 
<s:states> 
    <s:State name="up" /> 
    <s:State name="over" /> 
    <s:State name="down" /> 
    <s:State name="disabled" /> 
    <s:State name="selectedUp" /> 
    <s:State name="selectedOver" /> 
    <s:State name="selectedDown" /> 
    <s:State name="selectedDisabled" /> 
</s:states> 

<!-- layer 3: fill --> 
<s:Rect left="1" right="1" top="1" bottom="1"> 
    <s:fill> 
     <s:LinearGradient rotation="90"> 
      <s:GradientEntry color="0x000000" 
          color.over="0xBBBDBD" 
          color.down="0xAAAAAA" 
          alpha="0.85" /> 
      <s:GradientEntry color="0xD8D8D8" 
          color.over="0x9FA0A1" 
          color.down="0x929496" 
          alpha="0.85" /> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 

<!-- layer 4: fill lowlight --> 
<s:Rect left="1" right="1" top="1" bottom="1"> 
    <s:fill> 
     <s:LinearGradient rotation="270"> 
      <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" /> 
      <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" /> 
      <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" /> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 

<!-- layer 5: fill highlight --> 
<s:Rect left="1" right="1" top="1" bottom="1"> 
    <s:fill> 
     <s:LinearGradient rotation="90"> 
      <s:GradientEntry color="0xFFFFFF" 
          ratio="0.0" 
          alpha="0.33" 
          alpha.over="0.22" 
          alpha.down="0.12"/> 
      <s:GradientEntry color="0xFFFFFF" 
          ratio="0.48" 
          alpha="0.33" 
          alpha.over="0.22" 
          alpha.down="0.12" /> 
      <s:GradientEntry color="0xFFFFFF" 
          ratio="0.48001" 
          alpha="0" /> 
     </s:LinearGradient> 
    </s:fill> 
</s:Rect> 

<!-- layer 6: highlight stroke (all states except down) --> 
<s:Rect left="1" right="1" top="1" bottom="1" excludeFrom="down"> 
    <s:stroke> 
     <s:LinearGradientStroke rotation="90"> 
      <s:GradientEntry color="0xFFFFFF" alpha.over="0.22" /> 
      <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" /> 
     </s:LinearGradientStroke> 
    </s:stroke> 
</s:Rect> 

<!-- layer 6: highlight stroke (down state only) --> 
<s:Rect left="1" top="1" bottom="1" width="1" includeIn="down"> 
    <s:fill> 
     <s:SolidColor color="0x000000" alpha="0.07" /> 
    </s:fill> 
</s:Rect> 
<s:Rect right="1" top="1" bottom="1" width="1" includeIn="down"> 
    <s:fill> 
     <s:SolidColor color="0x000000" alpha="0.07" /> 
    </s:fill> 
</s:Rect> 
<s:Rect left="1" top="1" right="1" height="1" includeIn="down"> 
    <s:fill> 
     <s:SolidColor color="0x000000" alpha="0.25" /> 
    </s:fill> 
</s:Rect> 
<s:Rect left="1" top="2" right="1" height="1" includeIn="down"> 
    <s:fill> 
     <s:SolidColor color="0x000000" alpha="0.09" /> 
    </s:fill> 
</s:Rect> 

<!-- layer 2: border --> 
<s:Rect left="0" right="0" top="0" bottom="0" width="69" height="20"> 
    <s:stroke> 
     <s:SolidColorStroke color="0x696969" 
          alpha="1" 
          alpha.over="1" 
          alpha.down="1" /> 
    </s:stroke> 
</s:Rect> 

そして、ここレンダラ（AccordionHeader.mxml）です：

<?xml version="1.0" encoding="utf-8"?> 
<CanvasButtonAccordionHeader xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      xmlns="flexlib.containers.accordionClasses.*" skin="AccordionHeaderSkin" height="25"> 

    <s:Group height="25"> 

    </s:Group> 

</CanvasButtonAccordionHeader> 

そしてここに私のアコーデオンがあります：

<mx:Accordion left="0" right="0" top="0" bottom="0" id="geo_accordion" openDuration="500" headerRenderer="AccordionHeader">