CollapsiblePanel

Lab Project

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:

Download

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:

import com.arc90.flexlib.containers.CollapsiblePanel;
var panel:CollapsiblePanel = new CollapsiblePanel();
panel.title = "Collapsible Panel";
panel.status = "This is status text.";
panel.setStyle("collapseDuration", 500);
addChild(panel);

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

<!--
// Version check for the Flash Player that has the ability to start Player Product Install (6.0r65)
var hasProductInstall = DetectFlashVer(6, 0, 65);
// Version check based upon the values defined in globals
var hasRequestedVersion = DetectFlashVer(requiredMajorVersion, requiredMinorVersion, requiredRevision);
if ( hasProductInstall && !hasRequestedVersion ) {
// DO NOT MODIFY THE FOLLOWING FOUR LINES
// Location visited after installation is complete if installation is required
var MMPlayerType = (isIE == true) ? "ActiveX" : "PlugIn";
var MMredirectURL = window.location;
document.title = document.title.slice(0, 47) + " - Flash Player Installation";
var MMdoctitle = document.title;
AC_FL_RunContent(
"src", "http://www.arc90.com/_assets/flash/playerProductInstall",
"FlashVars", "MMredirectURL="+MMredirectURL+'&MMplayerType='+MMPlayerType+'&MMdoctitle='+MMdoctitle+"",
"width", "400",
"height", "300%",
"align", "middle",
"id", "CollapsiblePanel_Example",
"quality", "high",
"bgcolor", "#869ca7",
"name", "CollapsiblePanel_Example",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else if (hasRequestedVersion) {
// if we've detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
"src", "http://www.arc90.com/_assets/collapsiblepanel/example/CollapsiblePanel_Example",
"width", "400",
"height", "300",
"align", "middle",
"id", "CollapsiblePanel_Example",
"quality", "high",
"bgcolor", "#869ca7",
"name", "CollapsiblePanel_Example",
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
);
} else {  // flash is too old or we can't detect the plugin
var alternateContent = 'Alternate HTML content should be placed here. '
+ 'This content requires the Adobe Flash Player. '
+ 'Get Flash';
document.write(alternateContent);  // insert non-flash content
}
// -->

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.