Стилизация аккордеонных заголовков в Flex 4.5 с помощью CSS - PullRequest
Новая
       29

Стилизация аккордеонных заголовков в Flex 4.5 с помощью CSS

0 голосов
/ 23 июня 2011

Я пытаюсь стилизовать заголовки Accordion с помощью CSS и свойства headerStyleName в Flex 4.5, но стили 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">
...

Я также пробовалвстраивание CSS в тег style вместо ссылки на внешний файл CSS, но результаты такие же.

Кроме того, если я изменяю другое свойство CSS, такое как color, изменение корректно отображается.

Я знаю и о свойстве chromeColor, но я не пытаюсь добиться такого эффекта.Я также не полностью настроен на использование CSS, поэтому, если есть другой лучший способ получить настраиваемый заголовок Accordion, я полностью за это.Сначала я собирался создать обложку, но остановился, когда не увидел нужный компонент хоста в диалоговом окне «Новая обложка MXML».

Любая информация, которая укажет мне правильное направление, будет принята с благодарностью.Спасибо за ваше время!

1 Ответ

0 голосов
/ 23 июня 2011

Сладкая победа!

Мне удалось успешно обработать заголовок Accordion с помощью flexlib и создать собственный скин на основе AccordionHeaderSkin.mxml, найденного в источнике Flex 4.5 SDK. Я сделал 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">

...