Using skin CSS to change adobe flex accordion display

Using skin CSS to change adobe flex accordion display

Postby tomrff » Sat Mar 19, 2011 10:31 am

Using skin CSS to change adobe flex accordion display

Main.mxml
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Accordion_SparkSkin_headerStyleName_skin_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:mx="library://ns.adobe.com/flex/halo"
        xmlns:s="library://ns.adobe.com/flex/spark" viewSourceURL="srcview/index.html">

    <fx:Style>
        .customAccordionHeadStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>

    <mx:Accordion id="accordion"
            headerStyleName="customAccordionHeadStyles"
            left="20" right="20" top="20" bottom="20">
        <mx:VBox label="Red" width="100%" height="100%">
            <mx:Text text="Panel 1" />
        </mx:VBox>
        <mx:VBox label="Orange" width="100%" height="100%">
            <mx:Text text="Panel 2" />
        </mx:VBox>
        <mx:VBox label="Yellow" width="100%" height="100%">
            <mx:Text text="Panel 3" />
        </mx:VBox>
        <mx:VBox label="Green" width="100%" height="100%">
            <mx:Text text="Panel 4" />
        </mx:VBox>
        <mx:VBox label="Blue" width="100%" height="100%">
            <mx:Text text="Panel 5" />
        </mx:VBox>
    </mx:Accordion>

</s:Application>


Code for skin
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin name="CustomAccordionHeaderSkin"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        minWidth="21" minHeight="21"
        alpha.disabled="0.5">
    <!-- 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:SolidColor color="white"
                    color.up="red"
                    color.over="haloOrange"
                    color.down="yellow"
                    color.selectedUp="haloGreen"
                    color.selectedOver="haloBlue"
                    color.selectedDown="purple" />
        </s:fill>
    </s:Rect>

    <!-- layer 4: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>

    <!-- layer 5: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="0xFFFFFF"
                        alpha="0.33"
                        alpha.over="0.22"
                        alpha.down="0.12" />
        </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>

</s:SparkSkin>
tomrff
 
Posts: 33
Joined: Sat Jan 08, 2011 10:12 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron