Flex/Flash/Actionscript

Using complex headers with the Flex Accordion

Here’s an example of how to use complex UI components for the header renderers of a Flex Accordion component. Normally the Accordion only allows you to specify a Button as the header renderer, and any customization still requires you to subclass Button, so it’s hard to get full control over the headers. The CanvasButton component in FlexLib is an extension of Button that acts like Canvas, which means that it subclasses Button but allows you to easily add children via MXML.

I’ve created a special extension of CanvasButton that is specifically for use as a header renderer in an Accordion. The new CanvasButtonAccordionHeader (nice name huh?) is now in the FlexLib SVN repository. Note that this is in the FlexLib SVN repository but is not in the zip distribution on the main FlexLib page yet, once we get a few more updates I’ll update the .zip distribution. For now you’ll have to get the source from the repository.

The example below shows using a header renderer for the Accordion that display a ComboBox and a CheckBox in the header. The point here is that since you’re effectively using a Canvas as the header, you can easily add whatever UI components to the headers that you want.

Browse the MXML source of this example.

This movie requires Flash Player 9.

Standard

26 thoughts on “Using complex headers with the Flex Accordion”

  1. Works great in Flex 3 … thx! This was really helpful for me. Some feedback

    1) If you use the icon property of the AccordionHeader button it does not display as it does on the normal header. It is flush to the left edge of the Canvas, where the normal icon is normally offset.
    2) I am having trouble moving my HeaderRenderer to another directory other than the root. There may be a path dependency issue somewhere.

    Thanks again!

  2. Pingback: dougmccune.com » Blog Archive » Nifty Flex Accordion Menu (like on Apple.com)

  3. I am getting a host of errors when I add the MXML file to my flex app. They are all of the nature of “Interface method get defaultButton in namespace mx.core:IContainer not implemented by class AccordionHeaderRenderer.”

    The files all compile fine and the accordion works fine, but I get a bunch of errors every time I compile.

    Is this something I introduced? I am using AccordionHeaderRenderer.mxml from Google code. The errors all take me here: xmlns:mx=”http://www.adobe.com/2006/mxml”

    Thanks for any insight.

  4. @John – there was a change in the IContainer interface in the Flex 3 SDK, so the code in this example will not compile with Flex 3. I’ll be working on upgrading the code to work in Flex 3 over the next few days.

  5. Doug,

    Thanks for the reply. I am brand new to Flex, and your accordion header is one of a host of great components I am discovering. Thanks for your work on this.

    My hope is that once I get my feet more firmly beneath me with Flex that I will be able to create more of these great components.

    Best Regards.

  6. Michael Hightower says:

    Doug,

    It there a way to display something different on each button or to do something as simple as display each button with a different color?

    Thanks

  7. Doug,

    Seems that there is an issue when applying embedded assets as skins to the CanvasButtonAccordionHeader, where click events only seem to be thrown from the area the label occupies. Haven’t been able to figure out what’s causing this yet. Have you encountered this before? Seems new to 3.0.0 … I’m running build 477.

    Thanks!

  8. Ally says:

    I’m currently using the CanvasButtonAccordionHeader and would like to turn an image in the header on/off depending on if the header is selected. I tried turning it off in the click method and that works great but there’s a problem when you click on others and the previous headers image is still hidden.

    Could you please suggest how else I may approach this? For I will be needing to attack this from a change event instead of a click event approach. Mainly because I have buttons in my main app controlling as to which accordion pane is selected.

    I also tried placing a change=”functionhere(event)” on the canvasbuttonaccordionheader… but that doesn’t do anything… I’m still fresh to FLEX.

    BTW, I would like to thank you for this really cool component and the other ones too. It has saved me time in the long run.

  9. Pingback: CanvasButton! « Ramblings

  10. Grant Davies says:

    Doug, did you ever get chance to update this for flex 3? I just had to convert a project to flex3 that uses your accordion header and am getting the compiler issues.

    G.

  11. Ukie says:

    This only seems to work if the accordion is set within an application tag, and not if I want to use it as a component. Any ideas how to get this to work as a component?
    The error i get is:

    Could not resolve to a component implementation.

  14. I am having the same issue Ally described: I have an image in CanvasButtonAccordionHeader that I want to show/hide based on which accordion child is selected (currently selected child shows the image) and can not figure out how to bubble up an event {typical pattern, coming from the DOM/JS world would be hide all, then show the current one}. I can do things to the accordion and its children from within the CanvasButtonAccordionHeader but can’t get into CanvasButtonAccordionHeader from anywhere else. Halp?!

  17. Gady says:

    How can I gain access to each individual checkbox in the Accordion headers? I can use one function to handle the Change event, but how can I say “If a specific checkbox was changed, do something”? Thanks.

  19. Praveen says:

    Doug,

    There are these bunch of errors during compilation.

    “Interface method get creatingContentPane in namespace mx.core:IContainer not implemented by class HeaderRenderer ”

    There seems to be some incompatibility with the Flex SDK and your component which I’ve downloaded. Please help me out with your updated component if any. How do I go ahead?

    And also would like to congratulate for your awesome job and contribution.
    Note: I’m using Flex 3.2 SDK running on Flash Player 10.

    Thanks in advance.

  20. Jim Hulbert says:

    Doug,
    Thanks for this post it has helped me to accomplish what I was looking to accomplish.
    However, I am having one hickup.

    I want to have an accordion that has an X icon on the right side of
    each accordion header to be used to call a function from the parent
    application when clicked. I’ve created an MXML component using the
    CanvasButtonAccordionHeader from Flexlib as you discribed with the following code:

    This look the way I want it to. However, since I have to specify
    mouseChilderen=”true” to get the Image to respond to the mouse, the
    Label also acts like a button and does not pass the click through to
    the header correctly. I have made the accordion expand if the header
    is click and collapse if it is clicked again. This is not working due
    to the mouseChildren setting.

    Problem in Nutshell:
    If I set mouseChildren = “false”, the Label acts the way I want it to,
    but the Image doesn’t.
    If I set mouseChildren = “true”, the Images acts the way I want it to,
    but the Label doesn’t.
    How can I have the Label not respond like a button while the Image
    does respond like a button?

    Thanks in advance for your help.
    Jim

  21. Arnaud says:

    Hi, I started Flex some weeks ago, and downloaded AppleAccordionExample just to see how it works and make some tests.
    But I’ve the same problem as Praveen… Any idea ?
    Thanks.

  22. Lilford says:

    Hi
    I have added a Header Renderer with a textfleid and a button..

    I filter the contents of the datagrid based on the input in the textfield… All this works fine..

    But i’m not able to clear the textfield.

    My question is.. How do I access/clear the textfield in the header renderer?

    Thanks in advance yo’all

Comments are closed.