set background image in accordian by setting headerStyleName

set background image in accordian by setting headerStyleName

Postby haretu » Thu Mar 24, 2011 10:43 am

Adobe flex

This example shows how to set background image in accordian by setting headerStyleName
mail.mxml
Code: Select all
<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Halo_Accordion_headerStyleName_skin_test"
               xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/halo" viewSourceURL="srcview/index.html">
   
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/halo";
       
        .accordionHeaderStyles {
            skin: ClassReference("skins.CustomAccordionHeaderSkin");
        }
    </fx:Style>
   
    <mx:Accordion id="accordion"
                  headerStyleName="accordionHeaderStyles"
                  width="80%" height="80%"
                  horizontalCenter="0" verticalCenter="0">
        <mx:VBox label="Red" />
        <mx:VBox label="Orange" />
        <mx:VBox label="Yellow" />
        <mx:VBox label="Green" />
        <mx:VBox label="Blue" />
    </mx:Accordion>
   
</s:Application>


use 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 1: fill -->
    <s:Rect left="1" right="1" top="1" bottom="1" alpha="0.6">
        <s:fill>
            <s:BitmapFill source="@Embed('pattern_147.gif')" />
        </s:fill>
    </s:Rect>
   
    <!-- layer 2: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="black" alpha="0.0099" />
                <s:GradientEntry color="black" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
   
    <!-- layer 3: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9">
        <s:fill>
            <s:SolidColor color="white"
                          alpha="0.33"
                          alpha.over="0.22"
                          alpha.down="0.12" />
        </s:fill>
    </s:Rect>
   
    <!-- layer 4: 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="white" alpha.over="0.22" />
                <s:GradientEntry color="0xD8D8D8" alpha.over="0.22" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
   
    <!-- layer 5: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="1" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="down">
        <s:fill>
            <s:SolidColor color="black" alpha="0.09" />
        </s:fill>
    </s:Rect>
   
    <!-- layer 6: 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>
Attachments
Screen shot 2011-03-24 at 10.43.43 AM.png
Screen shot 2011-03-24 at 10.43.43 AM.png (19.9 KiB) Viewed 733 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron