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.
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
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
Very nice!
Very nice work.
Noice work Doug!!
I wanted to test your example but I have some problems. flex does not accept “mx.automation.IAutomationObject”
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.
good! thank you very much
Pingback: MadeInFlex » Blog Archive » Componente Horizontal Accordion
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.
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.
Man u dont really how much problem u just solved with this
But thanks man
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!
Pingback: Componente Accordion na posição Horizontal at Flex Brasil
I have probelm implementing this panel. Canu help me sending me detailed instructions for making accordion panels separatelly??
Help needed.
Thanks
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?
Nevermind – fixed it.
Thx all
I’m having the same error as Russ, but cannot fix, fairly new to Flex so any help is appreciated.
How do I implement the swc into my project?
Thanks,
Carrie
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!
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
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.
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 🙂
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?
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!!
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.
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…
V.Good
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
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.
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?
omg.. good work, dude
Same problem as Zaithian. I get no labels. I am using Flex3.
Yep, no labels in Flex3…
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.
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.
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!
Never mind. I was able to incorporate it from the FlexLib. Great application!!!
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.
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
Anyone have any ideas on skinning each accordion tab individually
how to use this component without flex
I’m getting a warning that says “CSS type selectors are not supported in components: ‘AccodionHeader'”. Also, I’m not seeing any labels. Any ideas what I’ve done wrong?
Thanks
great work
I downloaded the zip file but cannot find the SWC referenced in Doug’s post.
Are there any instructions for how to incorporate all the files contained in the zip into a Flex 3 project? Or do I have to somehow create a SWC from these files?
I am using the horizontal accordion component from flexlib. It works very well; the only issue I am having is that the JAWS (screen) reader does not read the header labels. All the other components are recognized and read correctly except this customized component. Any help is appreciated.
For those of you who would like to modify the headers !
Follow this… It works great fur ich !
http://blog.flexexamples.com/2007/10/30/setting-styles-on-individual-flex-accordion-headers/
Hi I am using flex builder 3.3. HAccordian is giving some problem to me when I tried to compile the application in jboss Server side. In flex builder 3.3 it is working fine. The code what u have given to display the rotated labels is not working. It is giving null pointer exception.
to have individual style on each header add the following to the createHeader method
var customStyle:Object = contentContainer.styleName;
if(customStyle && customStyle != “”){
header.styleName = customStyle;
contentContainer.styleName = null;
}
place it inside the if statement ” if(content is Container) ”
then you can pass a styleName to a vbox or whatever container you are using
Great component! Just wondering… does it need to be in an application as opposed to a canvas component? When I try to embed an HAccordion in a canvas, the vertical font doesn’t appear on the accordion buttons.
Thanks!
grrrr8 Doug..worked on flex3 too..
as arnold said…
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…
regards
_MJ.
My application requires the use of both the regular accordion and the ‘sideways’ horizontal accordion container. If I use the css stylesheet as shown in the example, it ends up overwriting the default css for the regular vertical accordion.
Does anyone have the css for the default accordion look and feel so that I can toggle styles?
This is a great work Dough ! — just was wondering… I’m using Fx3 and I actually imported it and also appeared on the components panel (custom folder) but when I drop into the project area only appears a transparent block… the icon of the Accordion doesn’t appear at all…
Some help would be appreciated Dough.
regards.
[FYI] This is feature is built into the gumbo now..(flex4).. thx for the code
Fantastic component, posts are very helpful also, thanks very much Doug and everyone!
No label displayed in flex 4, need help plz.
Hi Doug
I am working with localization
I am getting blank values for the VBox header for Japanese locale but it is working fine with English, German.
Code I am using
/ en_US/myPropertyFile. properties
SAVE = Save
/ ja_JP/myPropertyFile. properties
SAVE =?????
Please tell me whats going wrong
Thanks in advance
Anyone know the way to embed fonts in Flex to get the header labels working again? The example code in FlexLib has a broken link so I cant get to it….
Whew! I’m using 3.5 and could not get the labels to show up, until I added:
fontFamily: ArialEmbed;
You have to embed in order to do cool things with labels, like rotate them 🙂
Hi I am a very very newbie and would love to be able to use this feature. I am using Flash Builder 4 and can get it to compile OK but when running it I am getting this error:-
VerifyError: Error #1053: Illegal override of AccordionBase in com.dougmccune.containers.AccordionBase.
Can anyone help me
Great work Doug!
question to Doug or others here, how would I make the headers display text horizontally? I would like to be able to read the text normally as if it was a regular accordion but still keep the vertical functionality… any ideas?
Pingback: Accordion horizontal » Bruno bg + ADOBE FLEX
Hi All
I am getting the following error while creating SWC file form My Flex Builder. I am using Flex 3.3 SDK
[Style] must annotate a class. for FillStyle.as and same for the other FocusStyles.as and SelectedFillColorsStyle.as
Please can any help me out for the solutions
Thanks in Advance
mx.containers.Accordion has changed quite a bit in the 4.1 SDK. I cannot get this to compile. It all starts with the AccordionBase reference to mx.graphics.RoundedRectangle which has changed to mx.geom.RoundedRectangle in the new SDK. It all unravels from there. The new Accordion allows INavigatorContent, which the old one does not know about…
Anyone want to take a stab at a new port?
Is it possible to embed a none system font. Like ConduitITCPro
[Embed(source=’assets/font/ConduitITCPro-ExtraLight.otf’, fontName=’accordionHeader’, mimeType=’application/x-font’)]
private var font:Class;
This isn’t working !
I am using Horizontal Accordion provided by this site. But in Horizontal accordion labels in the VBox or HBox are not displayed.If i use Vertical Accordion its working fine.But according to my requirement i should use Horizontal accordion. Please help me in this. I strukked up here
One more I am using Flex3.0
Seriously awesome, thanks!
Thanks for the component…did everything, Doug, the component works smooth, I embedded the fonts using
[Embed(systemFont=’Arial’, fontWeight=”bold”, fontName=’accordionHeader’, embedAsCFF=’false’, mimeType=’application/x-font’)]
hence, am able to view the headers in the VAccordian..but not in HAccordian…Any help based on this?
I’m using Flex 4.1 by the way..
Thanks for this component
With Flash Builder using Flex SDK 4.5.1, it gives attached Exception.
Has anyone been able to resolve it ?
VerifyError: Error #1053: Illegal override of AccordionBase in com.dougmccune.containers.AccordionBase.
at Function/()[C:\Flex45Samples\HAccordionTest\src\HAccordion_Test.mxml:49]
at Function/http://adobe.com/AS3/2006/builtin::call()
at mx.core::ComponentDescriptor/get properties()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\ComponentDescriptor.as:271]
at mx.core::Container/createComponentFromDescriptor()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:4272]
at mx.core::Container/createComponentsFromDescriptors()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:4183]
at mx.core::Container/createChildren()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:3189]
at mx.core::UIComponent/initialize()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
at mx.core::Container/initialize()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:3131]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7485]
at mx.core::Container/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:3974]
at mx.core::Container/addChildAt()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:2618]
at mx.core::Application/addChildAt()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Application.as:1330]
at mx.core::Container/addChild()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:2534]
at mx.core::Container/createComponentFromDescriptor()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:4396]
at mx.core::Container/createComponentsFromDescriptors()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:4183]
at mx.core::Container/createChildren()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:3189]
at mx.core::UIComponent/initialize()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
at mx.core::Container/initialize()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Container.as:3131]
at mx.core::Application/initialize()[E:\dev\4.5.1\frameworks\projects\mx\src\mx\core\Application.as:1049]
at HAccordion_Test/initialize()
I am facing the same issue in Flash Builder 4.5. Has anyone solved the problem. If so please provide the solution
VerifyError: Error #1053: Illegal override of AccordionBase in com.dougmccune.containers.AccordionBase.
at components::C_Accordion()[C:\Documents and Settings\kxgund\Adobe Flash Builder 4.5\Accordion\src\components\C_Accordion.mxml:5]
at PerfDash_Controller/_PerfDash_Controller_C_Accordion1_i()
at PerfDash_Controller/_PerfDash_Controller_Array2_c()
at mx.core::DeferredInstanceFromFunction/getInstance()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\DeferredInstanceFromFunction.as:108]
at spark.components::SkinnableContainer/createDeferredContent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1049]
at spark.components::SkinnableContainer/createContentIfNeeded()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1078]
at spark.components::SkinnableContainer/createChildren()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:885]
at mx.core::UIComponent/initialize()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7624]
at mx.core::UIComponent/http://www.adobe.com/2006/flex/mx/internal::childAdded()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7485]
at mx.core::UIComponent/addChildAt()[E:\dev\4.5.1\frameworks\projects\framework\src\mx\core\UIComponent.as:7189]
at spark.components::Group/addDisplayObjectToDisplayList()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Group.as:2037]
at spark.components::Group/http://www.adobe.com/2006/flex/mx/internal::elementAdded()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Group.as:1628]
at spark.components::Group/setMXMLContent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Group.as:633]
at spark.components::Group/set mxmlContent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\Group.as:573]
at spark.components::SkinnableContainer/set mxmlContent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:657]
at spark.components::SkinnableContainer/createDeferredContent()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1050]
at spark.components::SkinnableContainer/createContentIfNeeded()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:1078]
at spark.components::SkinnableContainer/createChildren()[E:\dev\4.5.1\frameworks\projects\spark\src\spark\components\SkinnableContainer.as:885]
This is a great accordion component but I’m having trouble gettiing it into a mobile app as mobile apps don’t support MX components. I tried using a spark vgroup instead of an MX VBOX but it didn’t work. do you have any suggestions?
I want to ask : can HAccordion support Chinese Charactor in header?
The chinese charactor cannot be shown in my file.