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 entry was posted
on Tuesday, September 18th, 2007 at 10:35 am and is filed under Flex, flexlib.
You can follow any responses to this entry through the RSS 2.0 feed.
You can leave a response, or trackback from your own site.
Entries (RSS)
September 19th, 2007 at 5:22 am
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!
September 22nd, 2007 at 11:00 am
[...] The header renderer The next problem was that the header of the Accordion needs to be more complex than a normal button. It needs to show two text fields, one for the title of the header and one for the descriptive text. And the description needs to wrap on multiple lines. So as I blogged about previously, I used the CanvasButtonAccordionHeader in FlexLib to easily use a complex header on an Accordion. [...]
December 20th, 2007 at 10:37 pm
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.
December 21st, 2007 at 12:40 am
@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.
December 21st, 2007 at 7:30 am
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.
February 4th, 2008 at 9:09 am
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
February 27th, 2008 at 2:34 pm
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!
February 29th, 2008 at 12:51 pm
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.
April 1st, 2008 at 5:15 pm
[...] Doug McCune » Blog Archive » Using complex headers with the Flex Accordion 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. [...]
April 22nd, 2008 at 7:38 pm
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.
August 11th, 2008 at 9:31 am
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.
August 30th, 2008 at 9:24 am
Ukie,
U can make an in-like headerRenderer, like so:
August 31st, 2008 at 3:24 am
Ukie,
u can use absolute path of the MXML for the headerRender
i.e.
headerRenderer=”view.components.HeaderRenderer”
September 10th, 2008 at 1:05 pm
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?!
September 23rd, 2008 at 4:14 am
Hi, how can I change the header height?
Thanks
September 23rd, 2008 at 5:05 am
Ups, it´s just the “headerHeight” property of the Accordion
September 30th, 2008 at 1:42 pm
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.
March 4th, 2009 at 10:12 pm
I have been in need of this so thank you very much
May 26th, 2009 at 3:09 am
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.
July 14th, 2009 at 9:07 am
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
October 4th, 2009 at 3:26 pm
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.
October 14th, 2009 at 7:13 am
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
December 14th, 2009 at 8:49 am
Can anybody tell how i can remove the accordion header border
August 24th, 2010 at 12:11 pm
I cannot view the example or the source. The link fails (http://flexlib.googlecode.com/svn/trunk/examples/CanvasButtonAccordionHeader/). Does it work for others?