3 Replies Latest reply on Nov 8, 2009 4:54 PM by mewk

    How to skin an Accordion in FB4?

    Handycam Level 1

      I'm at a loss here how to skin a mx:Accordion in the Spark world. I have a typical accordion:

      <mx:Accordion width="251" minHeight="300">
           <s:NavigatorContent label="Phase 1" width="100%" height="100%" skinClass="skins.NavigatorContentSkin1">
                <s:layout>
                   <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
                </s:layout>
                <s:Label text="{dataList[0].sub}" styleName="subhead" />
                <s:RichText text="{dataList[0].desc}" width="100%" styleName="caption" />
           </s:NavigatorContent>
           <s:NavigatorContent label="Phase 2" width="100%" height="100%">
                <s:layout>
                   <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
                </s:layout>
                <s:Label text="{dataList[1].sub}" styleName="subhead" />
                <s:RichText text="{dataList[1].desc}" width="100%" styleName="caption" />
           </s:NavigatorContent>
           <s:NavigatorContent label="Phase 3" width="100%" height="100%">
                <s:layout>
                   <s:VerticalLayout paddingLeft="5" paddingRight="5" paddingTop="5" paddingBottom="5"/>
                </s:layout>
                <s:Label text="{dataList[2].sub}" styleName="subhead" />
                <s:RichText text="{dataList[2].desc}" width="100%" styleName="caption" />
           </s:NavigatorContent>
      </mx:Accordion>
      

       


      I loked at the existing skins and found an AccordionHeaderSkin.mxml.  I know how to apply these to Spark containers, so I tried:

      mx|Accordion {
          skinClass: ClassReference("skins.AccordionHeaderSkin");
      }
      


      and then

       

      mx|Accordion {
          headerStyleName: "myaccordionHeader";
      }      
      myaccordionHeader {
         skinClass: ClassReference("skins.AccordionHeaderSkin")
      }
      

      neither did anything at all.


      So next I tried

      mx|Accordion {
           borderStyle: none;
           headerHeight: 32;
           textIndent: 0;
           highlightAlphas: 0.6, 0.62;
           fillAlphas: 1, 1, 1, 1;
           fillColors: #a3b2e2, #4557a2, #868EB9, #868EB9;
           selectedFillColors: #a3b2e2, #4557a2;
           backgroundColor: #F7F9DF;
           textRollOverColor: #000000;
           textSelectedColor: #000000;
           headerStyleName: "myaccordionHeader";
      }
      .myaccordionHeader {
           color: #000000;
           fontFamily: Arial;
           fontSize: 16;
      }
      


      And this also did nothing at all, other than the header height and the headet title size. So I tried an old tip of adding this to the compiler argument: -theme=${flexlib}/themes/Halo/halo.swc


      But that apparently broke the Spark skins, AND did nothing to change colors etc.  So I removed it.


      So next I focused on the navigator content, I duplicated its skin. And changed its backgroundColor style, which works, but now the navigator is empty:

      Screen shot 2009-11-08 at 11.45.14 AM.png

      So I removed that too, and am back to a plain vanilla Accordion.  Can someone please explain this?  Otherwise I will just replicate the functionality with various Spark elements.  But it seems odd, since an accordion is exactly what I need.

        • 1. Re: How to skin an Accordion in FB4?
          Method-es

          May not be exactly what you are after, but the Accordion element is not a Spark component, but the Navigator Content is a spark component, meaning you can extend the skin for the Navigator ( I do this by using design view, right clicking on the element, and create new copy of skin )

           

          As far as I know, the accordion controls the behavior of the navigator contents, but does nothing visually (hence no need for a skin).

           

          You also appear to be asking about the header, which is part of the navigator component as well, so assuming they all use the same skin, they'll all have the same visual look.

           

          I guess overall your trying to skin something that has no visual elements ( the children are the visible thing )

           

          I hope this helps

          • 3. Re: How to skin an Accordion in FB4?
            mewk Level 3

            hey Steve,

             

            you almost have it!! try this:

             

              <fx:Style>
                @namespace mx "library://ns.adobe.com/flex/halo";
            
                mx|Accordion {
                  borderStyle: none;
                  headerHeight: 32;
                  textIndent: 0;
                  highlightAlphas: 0.6, 0.62;
                  fillAlphas: 1, 1, 1, 1;
                  fillColors: #a3b2e2, #4557a2, #868EB9, #868EB9;
                  selectedFillColors: #a3b2e2, #4557a2;
                  backgroundColor: #F7F9DF;
                  textRollOverColor: #000000;
                  textSelectedColor: #000000;
                  headerStyleName: myAccordionHeader;
                }
                .myAccordionHeader {
                  color: #000000;
                  fontFamily: Arial;
                  fontSize: 16;
                  skin: ClassReference("skins.CustomAccordionHeaderSkin");
                }
              </fx:Style>
            

             

            - e

             

            well I can't for all the styles applied, but the header skin should register...

             

            Message was edited by: mewk