The Joy of… Flex - Scrollable Accordion Menu Control/Component (Part I)
November 21st, 2007
I’ve decided to document my process of creating an accordion style flex navigation component. The component I’m creating is a little bit tree, a little bit list, a little bit accordion, and lot of frustration! I’m going to break this up into different parts so it’s easier to digest if anyone is interested in reading this.
DISCLAIMER: This series probably comes off pretty cynical. I love Flex and Flash. I’ve made my career out of working with Actionscript and Flash/Flex. I’ve been a programmer for over ten years now although much of that time has been focused on the art of sculpting a web page to look and act right with various server-side scripting languages. This article is intended as a kind of journal of the process I went through creating this component as a sort of case study. As I write this I am frustrated over how difficult this task became. There have been may instances where Flex has solved some very complex issues for me, not this time though.
PART I
SCROLLABLE ACCORDION MENU COMPONENT OVERVIEW
I have way more time invested in developing this component than I am comfortable writing here. However, suffice to say the time I’ve taken to explore this solution I probably should have found a different way to do this.
- The component should be able to expand/collapse like an accordion/tree but unlike an accordion, all nodes could be closed.
- The component should only allow one node on each level to be open at one time to give the current focused node as much room as possible to be displayed.
- The component should expand to the size of the expanded branch or only as tall as the screen width as a maximum height.
- If the component requires more vertical space to display all the child nodes than is available, the child nodes should be able to scroll by hovering over an arrow at the top or bottom of the current level. (see Doug Mccune’s ScrollableArrowMenu to see this type of behavior in action)
To give you a bit of background, I have a project that I work on each year for a photography workshop that requires a navigation component which allows for easy access to several different sections and one section has about a hundred sub nodes. Another probably easier way to put this is to just show the structure.
- About
- Custom SWF with three tabs (text, video, contact form)
- Overview Video
- Back Stage
- Three Videos
- One Slideshow
- Photo Participants
- Roughly 100 participants (all slideshows, menu item for each participant)
- Multimedia Participants
- Roughly 10 participants (videos, soundslides projects, menu item for each)
- Midnight Edits
- Thursday (slideshow)
- Friday (slideshow)
- Saturday (slideshow)
- Best Of (slideshow)
- Faculty
- Roughly 25 Faculty (menu item for each)
- Staff
- Roughly 25 Staff (menu item for each)
Now the goal of this component is that it would be able to create as many levels as needed based off of a xml file so that this could be used on other projects.
So, after working with Flex 2/AS3 and Flash CS3 for over a year and having, what I’d consider, a fair amount of AS2 experience I figured this would be cake and I’d bang this out in a day or two. RIIIIIGGGGHT… (Peter, I’m going to need you to come in on Saturday)
Entry Filed under: Web Development
The Joy of… Flex - Scrollable Accordion Menu Control/Component (Part I)
November 21st, 2007
I’ve decided to document my process of creating an accordion style flex navigation component. The component I’m creating is a little bit tree, a little bit list, a little bit accordion, and lot of frustration! I’m going to break this up into different parts so it’s easier to digest if anyone is interested in reading this.
DISCLAIMER: This series probably comes off pretty cynical. I love Flex and Flash. I’ve made my career out of working with Actionscript and Flash/Flex. I’ve been a programmer for over ten years now although much of that time has been focused on the art of sculpting a web page to look and act right with various server-side scripting languages. This article is intended as a kind of journal of the process I went through creating this component as a sort of case study. As I write this I am frustrated over how difficult this task became. There have been may instances where Flex has solved some very complex issues for me, not this time though.
PART I
SCROLLABLE ACCORDION MENU COMPONENT OVERVIEW
I have way more time invested in developing this component than I am comfortable writing here. However, suffice to say the time I’ve taken to explore this solution I probably should have found a different way to do this.
- The component should be able to expand/collapse like an accordion/tree but unlike an accordion, all nodes could be closed.
- The component should only allow one node on each level to be open at one time to give the current focused node as much room as possible to be displayed.
- The component should expand to the size of the expanded branch or only as tall as the screen width as a maximum height.
- If the component requires more vertical space to display all the child nodes than is available, the child nodes should be able to scroll by hovering over an arrow at the top or bottom of the current level. (see Doug Mccune’s ScrollableArrowMenu to see this type of behavior in action)
To give you a bit of background, I have a project that I work on each year for a photography workshop that requires a navigation component which allows for easy access to several different sections and one section has about a hundred sub nodes. Another probably easier way to put this is to just show the structure.
- About
- Custom SWF with three tabs (text, video, contact form)
- Overview Video
- Back Stage
- Three Videos
- One Slideshow
- Photo Participants
- Roughly 100 participants (all slideshows, menu item for each participant)
- Multimedia Participants
- Roughly 10 participants (videos, soundslides projects, menu item for each)
- Midnight Edits
- Thursday (slideshow)
- Friday (slideshow)
- Saturday (slideshow)
- Best Of (slideshow)
- Faculty
- Roughly 25 Faculty (menu item for each)
- Staff
- Roughly 25 Staff (menu item for each)
Now the goal of this component is that it would be able to create as many levels as needed based off of a xml file so that this could be used on other projects.
So, after working with Flex 2/AS3 and Flash CS3 for over a year and having, what I’d consider, a fair amount of AS2 experience I figured this would be cake and I’d bang this out in a day or two. RIIIIIGGGGHT… (Peter, I’m going to need you to come in on Saturday)
Entry Filed under: Web Development
Leave a Comment
Some HTML allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>
Trackback this post | Subscribe to the comments via RSS Feed