People have asked for an Accordion component that lays itself out horizontally instead of vertically. Looks like Scott Barnes had put one together back in 2005 that worked for Flex 1.5. Seeing as he’s now as Microsoft I’d say the chances of him porting it to Flex 2 are zip. Others seem to be trying to make this component as well. Well, here it is, an accordion component that cascades horizontally for Flex 2.
You use it just like the normal accordion component. The only difference is now you can use the “headerWidth” style instead of headerHeight to set the width of the tabs in CSS.
Making the component wasn’t that difficult, but it required a complete copy/paste of the Accordion component. If you look at the source you’ll see that I’ve made a class called AccordionBase. Basically this base class is a straight copy of the Accordion class from the framework but modified to allow it to be extended easier. That means I changed a bunch of properties and methods that were private to protected, so my subclasses could access them. Once I made these changes the only other thing I did to AccordionBase was remove the updateDisplayList and measure methods. These methods are defined in the subclasses, which are HAccordion and VAccordion. Each of those subclasses has slightly different code to do the layout and tweening. Ideally I would have been able to do this without making a new AccordionBase class that duplicated the code of Accordion, but this is another instance where a simple extension of a class doesn’t give you enough access to the parent class.
The one important thing to be aware of is that you MUST embed the font that you’ll be using for the text of the HAccordion’s headers. The component rotates the headers by 90 degrees, and if you rotate a text component then it will only work if you have the font embedded. See the source of the example MXML file to see how I did this, it’s simple, but if you don’t do it you’ll be wondering why the headers are all blank.
I packaged the component as a SWC. You can download the SWC and drop it into a Flex project. Download the SWC here. (281 K)
Here’s the full source of the component. And here’s the source of the example MXML file that makes the example below.
This entry was posted
on Saturday, January 27th, 2007 at 8:13 pm and is filed under Flex.
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)
January 27th, 2007 at 8:52 pm
Great work Doug!
I’ve stopped and started doing it but it wasn’t because I joined Microsoft that stopped me, it was basically lazyness
But you’ve done it so no need now!
The torch has been passed so to speak hehehehe
January 27th, 2007 at 10:22 pm
Hi Doug,
Just wanted to say thanks for everything you are doing on the blog so far. Really enjoying things.
Keep up the good work
January 28th, 2007 at 12:04 am
Very nice!
January 28th, 2007 at 3:27 am
Very nice work.
January 28th, 2007 at 6:04 pm
Noice work Doug!!
January 29th, 2007 at 10:01 am
I wanted to test your example but I have some problems. flex does not accept “mx.automation.IAutomationObject”
January 29th, 2007 at 10:10 am
I think you probably need the Flex 2.0.1 update. I used the Accordion class from the 2.0.1 version of the framework. So get the update and it should work.
January 30th, 2007 at 3:23 am
good! thank you very much
January 30th, 2007 at 3:53 am
[…] Componente Horizontal Accordion Nuevo componente de Doug McCune basado en el Accordion pero a diferencia del que viene en el framework de Flex, éste renderiza sus elementos verticalmente. Horizontal Accordion Component for Flex […]
February 2nd, 2007 at 12:37 am
unable to load SWC HAccordion.swc: multiple points
all i did was 1. create a new Flex Project
2. added the HAccordian.swc to library path.
why do i get this message when i add this to the project library path?
Could not resolve to a component implementation.
February 2nd, 2007 at 9:45 am
franky,
No idea, my advice is: 1) make sure you’re using version 2.0.1 of the framework, and 2) try to use the full source Actionscript classes in the example instead of using the SWC and see if that works.
February 4th, 2007 at 3:15 pm
Man u dont really how much problem u just solved with this
But thanks man
February 5th, 2007 at 8:02 am
Thanks a million! Great to have this component in my library!
Does it already have a option to display the text from top to bottom in the headers? Maybe that could be a nice addition to the component.
Something like:
T
A
B
1
Thanks again!
February 5th, 2007 at 9:46 am
[…] Veja aqui. […]
February 7th, 2007 at 3:36 am
I have probelm implementing this panel. Canu help me sending me detailed instructions for making accordion panels separatelly??
Help needed.
Thanks
March 31st, 2007 at 8:28 pm
This is fantastic. Worked great – the first time.
However, I am having problems implementing it into a module.
It keeps giving me an error -
“1046:Type was not found or was not a compile-time constant: HAccordion”
The same with VAccordion.
Any ideas?
April 1st, 2007 at 9:33 am
Nevermind - fixed it.
Thx all
April 3rd, 2007 at 10:35 am
I’m having the same error as Russ, but cannot fix, fairly new to Flex so any help is appreciated.
April 13th, 2007 at 7:39 am
How do I implement the swc into my project?
Thanks,
Carrie
April 24th, 2007 at 1:56 pm
Carrie - you need to place the swc file in a library folder like myflexlib or flexlib — then when you are in your project, right click on the project folder, choose properties, click on Flex Build Path, select the Library path tab, then click on Add SWC - navigate to the library folder and pick the SWC file or Add SWC Folder and pick the library folder.
Hope that helps!
June 18th, 2007 at 6:29 am
Thanks for the help on the swc.
I have another issue now that any help would be greatly appreciated.
I am collecting data from a datagrid inside of the accordion pleats and need it to fire off to a
CFC when the accordion changes to the next pleat or the application changes state. I want the CFC to return before I let the user enter the next pleat. Any ideas?
Thanks,
Carrie
September 25th, 2007 at 1:38 pm
I am trying to rotate a ComboBox by -90 degrees, but it doesn’t seem to be working… the text seems to disappear. Does anyone know how to get around this, or if there is a component out there that already does this? Thanks.
September 30th, 2007 at 7:59 pm
Thanks so much for your valuable contribution !
Now I would like to rant about all those people who take an opensource, ask questions and when they got the solutions don’t share it, like Rus on March 31st, 2007 at 8:28 pm.
I have exactly the same problem as him: “VAccordion & HAccordion Types are not found, and I get errors and since I am a beginner I don’t know how to correct that problem. Had the same problem today on another FlexSource I cannot get them to work.
If someone has help on this I really will apprecciate it, and please all my friends here:
Do post solutions to your problems once you found them for all the people following your footsteps
October 7th, 2007 at 8:20 pm
Hey there this is a great component you’ve made! But I’ve found a flaw but I dont know if you’ve addressed this elsewhere.
Im coding via the Flex2 SDK and I’ve added your HAccordion.swc to the flex-config.xml to include it when compiling. The issue is that I’m using the HAccordion in a module and it appears not to add in the labels. What I have is the personal.mxml had a tab navigator and in there each one holds a module. As Im coding it the VAccordion works fine but the HAccordion wont embed the fonts so I get no labels. I’ve copied your example and it still wont work. Is there suppose to be a different way to embed fonts in modules?
October 12th, 2007 at 8:32 am
Hello Doug,
Thanks a lot for all the contributions to the flex community. I tried to download the swc for the horizontal accordion, but don’t seem to find it. Instead, there is a swf file, which I believe does not do the work. Can you please review the files?
Thanks in advance!!
October 25th, 2007 at 6:41 am
Ive figured out how to rotate the headers the other way. Change two lines in updateDisplayList of HAccordion.as to be:
header.rotation = 90;
header.move(x + headerWidth, y);
and change
var x:Number = vm.left;
to
var x:Number = vm.left + getHeaderAt(0).height;
in onTweenUpdate and onTweenEnd.
This rotates the headers the other way so that text can be read from top to bottom.
December 5th, 2007 at 6:21 am
Hi… 1st, Thanks 4 th component, its nice. 2nd, would u mind telling me how call the function that change from one VBox to other when I clicked the label of the VBox?
Thanks in advance…
December 12th, 2007 at 3:46 am
V.Good
February 4th, 2008 at 3:35 am
Hi I am trying to do the horizontal view in the accordion… after downloading the code,,, its cant able to view,,, the horizontal view.. and com.dougmccune.containers doest contain
March 3rd, 2008 at 3:41 am
AAAAAAARGH!
Been pulling my hair over this for ages now. How do I add the path to the source code to this thing. I’m using Flex Builder 3 and I know it may not work. But I get this error: 1046 Type was not found or was not a compile-time constant: HAccordion.
How do I add a namespace to my project. I seem to not understand this basic, but very valuable, concept. Any help appreciated.
May 2nd, 2008 at 8:24 pm
Sven, you need to all the flexlib.swc to your build path.
Hey Doug,
Sup man. It would be really cool if we could choose the direction of the text rotation. Is there a way to do this?
May 8th, 2008 at 3:53 am
omg.. good work, dude
May 29th, 2008 at 9:03 am
Same problem as Zaithian. I get no labels. I am using Flex3.
June 3rd, 2008 at 2:22 am
Yep, no labels in Flex3…
June 3rd, 2008 at 3:29 am
Apparently the lack of labels is a result of missing the stylesheet. Make sure the stylesheet referenced with: is placed in the src folder in your project.
June 3rd, 2008 at 3:31 am
The code was edited out…
The name of the stylesheet is AccordionDefaults.css. Make sure it is in the “src” folder of your project.
Works with Flex builder 3.
June 5th, 2008 at 7:51 am
I am also using Flex Builder 3. I have the style sheet in the “src” folder, but when I go to run the application, I get errors in the mxml. This is the line that kills the program:
[Embed(systemFont='Arial', fontWeight=”bold”, fontName='accordionHeader', mimeType='application/x-font', flashType='true')]
The error messages include:
Syntax error: expecting rightbracket before accordionHeader
Syntax error: expecting identifier before comma
Syntax error: expecting rightparen before Arial
Syntax error: expecting identifier before bitwiseand
Any help would be greatly appreciated. Thanks!
June 5th, 2008 at 10:34 am
Never mind. I was able to incorporate it from the FlexLib. Great application!!!
July 2nd, 2008 at 6:38 pm
Hi Michael,
I am having the same problem as yours:
[Embed(systemFont=’Arial’, fontWeight=”bold”, fontName=’accordionHeader’, mimeType=’application/x-font’, flashType=’true’)]
The error messages include:
Syntax error: expecting rightbracket before accordionHeader
Syntax error: expecting identifier before comma
Syntax error: expecting rightparen before Arial
Syntax error: expecting identifier before bitwiseand
Would you please explain to me how did you get over that error?
Thanks.
July 30th, 2008 at 1:02 pm
Doug,
How do you modify the horizontal accordion component so that the headers are on the right side of the component (expanding out leftward) instead of on the left side (expanding out rightward)?
Thx
August 20th, 2008 at 9:00 pm
Anyone have any ideas on skinning each accordion tab individually