Flex/Flash/Actionscript

Horizontal Accordion Component for Flex

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 movie requires Flash Player 9.

Related Posts
  • Tags: flex
  • Pretty sweet logo, whoever designed that must be pretty much the best person in the world. Get your 360|Flex stuff here. And if you haven't registered for 360Flex, do that here.
    Tags: flex
  • Since the next 360|Flex is fast approaching, I thought I'd post the full recording of my session at the last 360|Flex in Seattle. You can do whatever you want with this video, embed it wherever, watch it wherever, you can even download the original mp4 video file. Hopefully the embedded video is good enough quality…
    Tags: flex
Standard

73 thoughts on “Horizontal Accordion Component for Flex

  1. 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

  2. Scotty says:

    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

  3. lamrayah says:

    I wanted to test your example but I have some problems. flex does not accept “mx.automation.IAutomationObject”

  4. 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.

  5. Pingback: MadeInFlex » Blog Archive » Componente Horizontal Accordion

  6. franky says:

    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.

  7. 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.

  8. 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!

  9. Pingback: Componente Accordion na posição Horizontal at Flex Brasil

  10. Mitch says:

    I have probelm implementing this panel. Canu help me sending me detailed instructions for making accordion panels separatelly??

    Help needed.

    Thanks

  11. Rus says:

    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?

  12. Arnold says:

    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!

  13. Carrie says:

    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

  14. Nathan Redding says:

    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.

  15. First week Flexer says:

    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 :-)

  16. Zaithian says:

    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?

  17. Gus says:

    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!!

  18. 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.

  19. Gabriel says:

    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…

  20. Balaji says:

    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

  21. Sven says:

    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.

  22. 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?

  23. 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.

  24. 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.

  25. Michael says:

    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!

  26. Naorus says:

    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.

  27. Jamie says:

    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

  28. Greg says:

    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

  29. speedyman says:

    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?

  30. Ranga says:

    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.

  31. GG says:

    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.

  32. rotts says:

    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

  33. Renee says:

    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!

  34. mohsin says:

    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.

  35. flexcoder2009 says:

    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?

  36. FLFX says:

    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.

  37. Tarun T says:

    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

  38. Peter R says:

    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….

  39. Andi says:

    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 :)

  40. AVSESIS says:

    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

  41. np says:

    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?

  42. Pingback: Accordion horizontal » Bruno bg + ADOBE FLEX

  43. Tarun T says:

    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

  44. brian says:

    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?

  45. Pieter T says:

    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 !

  46. Narasaiah says:

    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

  47. Gaurav K says:

    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

  48. Aejaz says:

    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()

  49. Kumar says:

    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]

  50. Casey says:

    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?

  51. jing says:

    I want to ask : can HAccordion support Chinese Charactor in header?
    The chinese charactor cannot be shown in my file.

Comments are closed.