23 Responses to “Accordion with Icons”

1. Ben Says:
   March 29th, 2007 at 10:12 am

   Very nice.

2. Dan Wilson Says:
   March 29th, 2007 at 10:49 am

   Rich,

   Cool Component!

   When I run the demo, it seems like my browser refreshes. The component maintains state, however. Is this the intended functionality?

   dw

3. everythingflex Says:
   March 29th, 2007 at 10:51 am

   That would be the history manager at work. You can use your forward and back keys to change the Accordion state. This is the default behavior of the history manager.

4. Jamie Badman Says:
   March 30th, 2007 at 3:28 am

   LOVE this component - makes the Accordion look much more interesting! Thanks for this!

   Jamie.

5. Rajesh Bhadra Says:
   March 31st, 2007 at 12:04 am

   hey man…way to go!

6. Jason Says:
   April 3rd, 2007 at 12:55 pm

   So there is a minor problem when you set selectedFillColors and textRollOverColor. The icons go away while in the selected and rollover states. I’m guessing they need to be accounted for when an updatedisplay happens. I havn’t had time to look into the real reason yet.

7. Jason Says:
   April 3rd, 2007 at 1:17 pm

   Actually I take that back. My browser cached that. It has more to do with setting these skins in a stylesheet instead of inline. I’m using a Type selector in my stylesheet.

8. Gregor Rot Says:
   April 19th, 2007 at 11:35 am

   Hi, great work, just one minor problem happened when i was using the component in this way:

   1) i started the Flex application in one state and then the AccordionIcon component was only present in another state to which i changed later (currentState=nextState).

   With this behaviour the this.getChildDescriptors().length returns null, i don’t know why, even the childrenCreated is called OK.

   Anyway i changed it with this.getChildren().length and now it works fine.

   Gregor

9. Jim Says:
   May 25th, 2007 at 3:53 am

   Cool stuff. Thx

10. JOrge Says:
    July 4th, 2007 at 1:48 pm

    Great Job, but i have a little problem.
    I need assign a different icon for each header of the accordion.
    That can be posibly ? Can you help me?

11. everythingflex Says:
    July 5th, 2007 at 11:16 am

    Yes, you could either just add the icon to the container that you are using within your Accordion menu like this:

    1. <mx:Accordion id="acc" width="400" height="200">
    2.         <mx:Panel label="Panel 1" icon="@Embed('sound1.gif')"/>
    3.         <mx:Panel label="Panel 2" icon="@Embed('unknown.gif')"/>
    4.         <mx:Panel label="Panel 3" icon="@Embed('world1.gif')"/>
    5.     </mx:Accordion>

    Or you can do it with ActionScript:

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    3.     layout="absolute"
    4.     creationComplete="init()">
    5.    
    6.     <mx:Script>
    7.         <![CDATA[
    8.             import mx.core.Container;
    9.        
    10.             [Embed(source="sound1.gif")]
    11.             [Bindable]
    12.             public var icon1:Class;
    13.             
    14.             [Embed(source="unknown.gif")]
    15.             [Bindable]
    16.             public var icon2:Class;
    17.             
    18.             [Embed(source="world1.gif")]
    19.             [Bindable]
    20.             public var icon3:Class;
    21.        
    22.             private function init():void{
    23.                 Container(acc.getChildAt(0)).icon = icon1;
    24.                 Container(acc.getChildAt(1)).icon = icon2;
    25.                 Container(acc.getChildAt(2)).icon = icon3;
    26.             }
    27.         ]]>
    28.     </mx:Script>
    29.     <mx:Accordion id="acc" width="400" height="200">
    30.         <mx:Panel label="Panel 1"/>
    31.         <mx:Panel label="Panel 2"/>
    32.         <mx:Panel label="Panel 3"/>
    33.     </mx:Accordion>
    34. </mx:Application>
12. tonya harding Says:
    October 4th, 2007 at 9:21 am

    Thanks for the great tips!
    A must read for all the users out there!

13. Edelsteine Says:
    October 18th, 2007 at 1:27 pm

    Hey thank you that is exactly what is was searching for for my site. Will try it and hopefully have no problem with it…

14. Chris Mollo Says:
    November 5th, 2007 at 5:58 pm

    First, thanks for the component.

    I can get it to work great when the child containers added to AccordionIcons via MXML (like the example shown on this blog). However, when the child containers are added via ActionScript, then something goes seriously wrong with the initialization of the application. (I don’t yet know what exactly goes wrong… in my case, the panel in which the AccordionIcons component is placed is completely blank.)

    The MXML is:

    I add children to the AccordionIcons component in popAccChildren(). I am adding several Canvas containers, e.g.:

    var c:Canvas = new Canvas();
    c.percentWidth = 100;
    c.percentHeight = 100;
    c.label = “Label 01″;
    prodAccordion.addChild(c);

    I have tried calling popAccChildren() on occurrence of different events like “initialize”, “creationComplete”, etc…. nothing I have tried has worked.

    If I switch to using mx.containers.Accordion instead, everything works just fine.

    Any idea what is going wrong or do you have any example?

    Thanks!

15. Chris Mollo Says:
    November 6th, 2007 at 8:19 am

    Try this again (using square brackets instead of angle brackets)…

    The MXML is:

    [eflex:AccordionIcons id=”prodAccordion” initialize=”popAccChildren()” …]
    [/eflex:AccordionIcons]

16. Chris Mollo Says:
    November 6th, 2007 at 10:34 am

    Figured it out…. in the method AccordionIcons.setIcons, there is a call to this.childDescriptors. It seems this field is only set when child components are added via MXML. I would think this.childDescriptors.length would simple return zero when child components are added via ActionScript, but it seems some sort of exception occurs. Anyhow, calling numChildren instead of childDescriptors resolves the problem.

17. everythingflex Says:
    November 6th, 2007 at 10:53 am

    Thanks Chris,

    I have updated the source code.

18. Suzanne Dorman Says:
    January 3rd, 2008 at 12:51 pm

    Thank you for the component. It is much better than the plain accordion which can look confusing without the graphics.

    I have an additional problem. I want to use your component to show up/down/selected but I also want an additional icon that goes with my label. For example, where you have the word “Canvas” for the Canvas label, I want a graphic followed by my text (I am showing logging messages and want graphics to display for success, error, etc).

    But it appears that I can only have 1 icon for a container which means I have to choose between my message graphic or your navigation graphic. Do you know of a way to have both?

    Thanks again!

19. flexatron Says:
    January 6th, 2008 at 1:17 pm

    This script is cool..
    But, I’m really confused about a few lines
    Namely, line 127 of of AccordionIcons.as

    Why must you import mx.core.Container when AccordionIcons extends Accordion which extends Container? So all the properties of Container should be inherited by AccordionIcons.

    You don’t have to cast it to a Container, is this correct?

20. flexatron Says:
    January 6th, 2008 at 1:46 pm

    And I even tried :
    Accordion (this.getChildAt(i)).icon = upIcon;

    But that gave a run time error:
    “Type Coercion failed: cannot convert mx.containers::Canvas@6fd80a1 to mx.containers.Accordion.”

    I’m not sure what is happening there either. I thought that would have worked too

21. everythingflex Says:
    January 6th, 2008 at 8:10 pm

    Casting it as a container allows the icon to be set as initially the object type is DisplayObject. Can you send me your source code that is throwing the error? rtretola AT gmail.com

22. Gagan Says:
    May 29th, 2008 at 9:32 am

    Hi everythingflex

    Your custom accordion is great. Actually I want to add icon in my accordion on the right side of the label instead of left. Is there any way to do that.

    Any help from your side will be appreciated.

    Thanx

23. maila Says:
    June 16th, 2008 at 5:10 pm

    Thanks for the great example.

    I have a problem. the sample accordion didn’t work when i use a style sheet. Is there an issue with the style sheet and flex accordion? Thanks.

Leave a Reply