The arc90 lab is the playground of arc90 - a New York-based technology and strategic consulting firm. The lab is a place for us to share our ideas, tools and the occasional experiment in web technology. All ideas, experiments and tools are licensed under Creative Commons.
This site is licensed under a Creative Commons Attribution 2.5 License.
Tools
CollapsiblePanel
The collapsible panel is a fairly simple container that pops up all over the internet. It's great for hiding, but not losing, areas of the screen that may be unnecessary at a given moment in time. This allows the end-user to customize certain aspects of the screen to their liking.
Unfortunately, the Flex Framework doesn't actually contain a collapsible panel. We moaned and groaned, and then built our own. Now we're offering it to you for nothing, because, well, that's how we roll. So, with no further ado, arc90 presents a simple solution for a simple need, CollapsiblePanel.
What is this?
A collapsible panel container that uses a mx.effects.Resize tween on collapse and expand. The developer can manipulate the appearance of the collapse button and duration of the tween. CollapsiblePanel extends the mx.containers.Panel class, so all of that class's functionality is still available to the developer.
How Do I Use It?
To use CollapsibelPanel in your Flex project, just follow these simple steps:
Download The Code
Click on the icon below to download the source code:
The file, arc90flexlib.zip, contains a compiled library, the source, and ASDoc generated documentation.
Add the code to your Flex project
You can either add the compiled library, arc90flexlib.swc, to your project's library path, or include the source directly in your project.
Create a CollapsiblePanel using either MXML or ActionScript.
MXML:
ActionScript:
CollapsiblePanel functions exactly like Flex's built-in Panel class. However, there are several additions to the API.
CollapsiblePanel implements the collapsed property. This property refers to the current state of the component, collapsed or expanded. Setting the collapsed property to true will collapse the component; setting it to false will expand it.
There are also two new events:
minimize: Dispatched when the collapse button is clicked and the component is in its expanded state.restore: Dispatched when the collapse button is clicked and the component is in its collapsed state.
Review the documentation for a complete list of all properties, methods, styles, and events exposed by CollapsiblePanel.
Example
Licensing
This arc90 tool is licensed under the Creative Commons Attribution 2.5 license.
Discuss CollapsiblePanel
You can offer feedback on CollapsiblePanel at the arc90 blog.
