Creating a custom MX Accordion header skin in Flex 4

14 Responses to Creating a custom MX Accordion header skin in Flex 4

1. Ruy Adorno says:

   July 28, 2009 at 8:34 am

   If there’s any other unfortunates like me browsing this page trying to get the Accordion skin to work well with the flex4, here comes a solution to set also a customized label skin:

   First of all, set a creationComplete handler, in the skin class definition:
   creationComplete=”onCreationComplete(event)”

   After that, just add this script tag, with some magic code to get a reference of the original mx component:
   

   After that you can access the properties of your original mx component like this:
   

   This solution is just a complement to the article above, and is not a beautiful one. Hope that in the future someone come with a better and easier solution for this issue.
2. Ruy Adorno says:

   July 28, 2009 at 8:37 am

   If there’s any other unfortunates like me browsing this page trying to get the Accordion skin to work well with the flex4, here comes a solution to set also a customized label skin:

   First of all, set a creationComplete handler, in the skin class definition:
   creationComplete=”onCreationComplete(event)”

   After that, just add this script tag, with some magic code to get a reference of the original mx component:

   After that you can access the properties of your original mx component like this:

   This solution is just a complement to the article above, and is not a beautiful one. Hope that in the future someone come with a better and easier solution for this issue.
3. Ruy Adorno says:

   July 28, 2009 at 8:45 am

   Shit, I can’t past the flex code here… the system keeps stripping my code….

   This, should be placed inside a fx:Script tag….

   import mx.events.FlexEvent;
    
   [Bindable]
   public var __parent:*;
    
   protected function onCreationComplete(event:FlexEvent):void{
   	//Get a reference to the "hostComponent", needed to be used like this 
   	//because I couldn't make the metadata hostComponent work for the mx:VBox component
   	__parent = this["parent"];
   	//Hide the original label of flex component
   	__parent.getChildAt(0).visible = false;
   }

   and after that you can use the __parent variable to access the information of the original mx component, just like the hostComponent should work…
   In my example I set the first child to false, to hide the original label of mx component… then you should specify another label element and you can retrieve the string value like this:
   text=”{__parent.label}”
4. Daniel says:

   October 19, 2009 at 10:40 am

   If you want to make your header a flat gradient, and not use the highlights, my assumption would be that you could simple comment out the other fill layers and just use layer 3 (changing the gradient fill colors accordinly).

   But when I do this, I get a strange shift in color where the colors look much darker than the values I’m putting in. This is probably my ignorance of the skinning framework (maybe the baseLayer attribute is somehow modifying the colors I enter).

   Any thoughts on trying to do a flat gradient for the header.

   As always, thanks for this immensely helpful site.

   Daniel McQ
5. Daniel says:

   October 19, 2009 at 10:47 am

   …and as usual the answer is pretty obvious on second glance: commenting out the

   useBaseColor = true;

   line allows level3 to show unmodified colors.

   DMcQ
6. AlCapone says:

   November 26, 2009 at 2:30 am

   i have a question…

   i want to switch between 2 or more stlyes , can i use a function to change directly the css file??

   thanks.
   • Peter deHaan says:

     November 26, 2009 at 12:05 pm

     @AlCapone,

     Sure, I’d just create an ActionScript function which sets the headerStyleName style to whatever whichever custom style you want. Basically make 2-3+ custom selectors and specify the custom Accordion header skin you want to use:

     .customAccordionHeadStyles1 {
         skin: ClassReference("skins.CustomAccordionHeaderSkin1");
     }
     .customAccordionHeadStyles2 {
         skin: ClassReference("skins.CustomAccordionHeaderSkin2");
     }
     .customAccordionHeadStyles3 {
         skin: ClassReference("skins.CustomAccordionHeaderSkin3");
     }

     And then create some ActionScript functions to set the headerStyleName to whichever CSS selector you want:

     private function useSkin1():void {
         accordion.setStyle("headerStyleName", "customAccordionHeadStyles1");
     }
     private function useSkin2():void {
         accordion.setStyle("headerStyleName", "customAccordionHeadStyles2");
     }
     private function useSkin3():void {
         accordion.setStyle("headerStyleName", "customAccordionHeadStyles3");
     }

     You could probably clean up that code significantly, but it may help get you started.

     Peter
7. Priya says:

   July 19, 2010 at 12:13 pm

   Could you please direct on how we change the accordian header text color in Flex4 skinng. I tried to add
   this label component and it doesn’t seem to be working.Thanks in advance.
   • Peter deHaan says:

     July 20, 2010 at 12:29 am

     @Priya,

     Not sure what you’re trying to do with skinning, but can’t you just set the headerStyleName style on the Accordion and set the color style there?

     <?xml version="1.0" encoding="utf-8"?>
     <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    xmlns:mx="library://ns.adobe.com/flex/mx">
      
         <fx:Style>
             @namespace s "library://ns.adobe.com/flex/spark";
             @namespace mx "library://ns.adobe.com/flex/mx";
      
             .headerStyles {
                 chromeColor: black;
                 color: white;
             }
         </fx:Style>
      
         <mx:Accordion id="acc1"
                 headerStyleName="headerStyles"
                 width="300" height="200"
                 horizontalCenter="0" verticalCenter="0">
             <s:NavigatorContent id="navCon1" label="One" />
             <s:NavigatorContent id="navCon2" label="Two" />
             <s:NavigatorContent id="navCon3" label="Three" />
         </mx:Accordion>
      
     </s:Application>

     Peter
8. Priya says:

   July 19, 2010 at 12:13 pm

   i meant to say <s:Label id=”labelDisplay” color=”#FFFFFF” >
9. Priya says:

   September 29, 2010 at 3:32 pm

   could you please let me know ,how can I apply a gradient colors to the “contentbackgroundColor” property?
   • Peter deHaan says:

     September 29, 2010 at 9:32 pm

     @Priya,

     You would need to create a custom skin. By default the contentBackgroundColor style does not support gradients, only solid colors.

     Peter
10. ideveloper says:

    December 19, 2010 at 1:14 am

    Hi. How can I change the size or the position of the header text in your example???
11. Tahir Azeem Alvi says:

    March 10, 2011 at 11:38 pm

    Hi peter,

    can we maintain the text color for all states of Accordion Header?

    currently i set the
    .headerStyle{
    color : ’0xFFFFFF’;
    text-roll-over-color : ’0xFFFFFF’;
    text-selected-color: ’0xFFFFFF’;
    }

    Bur on down or over state text color is black.

    Thanks