Collapsible Panel Component for Flex
Posted on August 21, 2010 | No Comments
Here’s an another post in the same vein as my previous one: this time, the component I’m sharing is a Panel subclass that allows for collapsing and expanding its contents. What this means is that the user can click on the header of the Panel to make it toggle between an open or closed state, with a smooth animation.
I Tried to implement the component so that it’ll be easy to use in both MXML and ActionScript. In the demo app there is also an example on styling the CollapsiblePanel.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:hassegContainers="org.hasseg.containers.*"
width="100%" height="100%"
layout="vertical"
creationComplete="ccHandler(event);"
>
<mx:Style>
.myCPStyle {
borderThicknessLeft: 0;
borderThicknessTop: 0;
borderThicknessBottom: 0;
borderThicknessRight: 0;
headerHeight: 20;
dropShadowEnabled: false;
headerColors: #d9d9d9, #ffffff;
borderAlpha: 1;
backgroundAlpha: 0;
paddingTop: 4;
paddingLeft: 4;
paddingRight: 4;
verticalGap: 4;
openIcon: Embed(source="icons.swf", symbol="CollapsiblePanelOpenIcon");
closedIcon: Embed(source="icons.swf", symbol="CollapsiblePanelClosedIcon");
}
</mx:Style>
<mx:Script>
<![CDATA[
import mx.events.*;
private function ccHandler(event:FlexEvent):void {
/*
* An example of programmatically adding a new CollapsiblePanel:
*/
var newCP:CollapsiblePanel = new CollapsiblePanel(false); // closed by default
newCP.title = "This added via AS";
newCP.styleName = "myCPStyle";
var bOne:Button = new Button();
var bTwo:Button = new Button();
bOne.label = "button one"
bTwo.label = "button two"
newCP.addChild(bOne);
newCP.addChild(bTwo);
var newLabel:Label = new Label();
newLabel.text = "Added via ActionScript:";
this.addChild(newLabel);
this.addChild(newCP);
}
]]>
</mx:Script>
<mx:HBox>
<mx:Box>
<mx:Label text="styled, open=false:" />
<hassegContainers:CollapsiblePanel
title="This is the title"
width="200"
open="false"
styleName="myCPStyle"
>
<mx:Button label="hello" />
<mx:Button label="hello again" />
</hassegContainers:CollapsiblePanel>
</mx:Box>
<mx:Box>
<mx:Label text="styled, open=true:" />
<hassegContainers:CollapsiblePanel
title="This is the title"
width="200"
open="true"
styleName="myCPStyle"
>
<mx:Button label="hello" />
<mx:Button label="hello again" />
</hassegContainers:CollapsiblePanel>
</mx:Box>
</mx:HBox>
<mx:HBox>
<mx:Box>
<mx:Label text="styled, open attribute not set:" />
<hassegContainers:CollapsiblePanel
title="This is the title"
width="200"
styleName="myCPStyle"
>
<mx:Button label="hello" />
<mx:Button label="hello again" />
</hassegContainers:CollapsiblePanel>
</mx:Box>
<mx:Box>
<mx:Label text="not styled, open=false:" />
<hassegContainers:CollapsiblePanel
title="This is the title"
width="200"
open="false"
>
<mx:Button label="hello" />
<mx:Button label="hello again" />
</hassegContainers:CollapsiblePanel>
</mx:Box>
</mx:HBox>
</mx:Application>
CollapsiblePanel.as:
package org.hasseg.containers {
import flash.events.*;
import mx.effects.AnimateProperty;
import mx.events.*;
import mx.containers.Panel;
import mx.core.ScrollPolicy;
/**
* The icon designating a "closed" state
*/
[Style(name="closedIcon", property="closedIcon", type="Object")]
/**
* The icon designating an "open" state
*/
[Style(name="openIcon", property="openIcon", type="Object")]
/**
* This is a Panel that can be collapsed and expanded by clicking on the header.
*
* @author Ali Rantakari
*/
public class CollapsiblePanel extends Panel {
private var _creationComplete:Boolean = false;
private var _open:Boolean = true;
private var _openAnim:AnimateProperty;
/**
* Constructor
*
*/
public function CollapsiblePanel(aOpen:Boolean = true):void
{
super();
open = aOpen;
this.addEventListener(FlexEvent.CREATION_COMPLETE, creationCompleteHandler);
}
// BEGIN: event handlers ------------------------------------------------------------
private function creationCompleteHandler(event:FlexEvent):void
{
this.horizontalScrollPolicy = ScrollPolicy.OFF;
this.verticalScrollPolicy = ScrollPolicy.OFF;
_openAnim = new AnimateProperty(this);
_openAnim.duration = 300;
_openAnim.property = "height";
titleBar.addEventListener(MouseEvent.CLICK, headerClickHandler);
_creationComplete = true;
}
private function headerClickHandler(event:MouseEvent):void { toggleOpen(); }
private function callUpdateOpenOnCreationComplete(event:FlexEvent):void { updateOpen(); }
// --end--: event handlers - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// BEGIN: private methods ------------------------------------------------------------
// sets the height of the component without animation, based
// on the _open variable
private function updateOpen():void
{
if (!_open) height = closedHeight;
else height = openHeight;
setTitleIcon();
}
// the height that the component should be when open
private function get openHeight():Number {
return measuredHeight;
}
// the height that the component should be when closed
private function get closedHeight():Number {
var hh:Number = getStyle("headerHeight");
if (hh <= 0 || isNaN(hh)) hh = titleBar.height;
return hh;
}
// sets the correct title icon
private function setTitleIcon():void
{
if (!_open) this.titleIcon = getStyle("closedIcon");
else this.titleIcon = getStyle("openIcon");
}
// --end--: private methods - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// BEGIN: public methods ------------------------------------------------------------
/**
* Collapses / expands this block (with animation)
*/
public function toggleOpen():void
{
if (_creationComplete && !_openAnim.isPlaying) {
_openAnim.fromValue = _openAnim.target.height;
if (!_open) {
_openAnim.toValue = openHeight;
_open = true;
dispatchEvent(new Event(Event.OPEN));
}else{
_openAnim.toValue = _openAnim.target.closedHeight;
_open = false;
dispatchEvent(new Event(Event.CLOSE));
}
setTitleIcon();
_openAnim.play();
}
}
/**
* Whether the block is in a expanded (open) state or not
*/
public function get open():Boolean {
return _open;
}
/**
* @private
*/
public function set open(aValue:Boolean):void {
_open = aValue;
if (_creationComplete) updateOpen();
else this.addEventListener(FlexEvent.CREATION_COMPLETE, callUpdateOpenOnCreationComplete, false, 0, true);
}
/**
* @private
*/
override public function invalidateSize():void {
super.invalidateSize();
if (_creationComplete)
if (_open && !_openAnim.isPlaying) this.height = openHeight;
<a href="http://all-forums.biz/images/index.php">how do i buy viagra online</a> }
// --end--: public methods - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
}
}
Incoming search terms:
- flex 4 collapsible panel (24)
- flex collapsible panel (15)
- collapsible panel flex 4 (13)
- flex 4 collapsiblepanel (11)
Author
By Sameera Thilakasiri
,is a front-end developer based in Colombo, is a blogger and a lifestyle photographer.
Follow him Twitter and Google+. Check out him.
Comments
Leave a Reply
You must be logged in to post a comment.
Community presentations of the blogger
Sameera at LinkedIn
BIOGRAPHY
Sameera Thilakasiri is a front-end developer and UX Architect based in Colombo, Sri Lanka, specialist in User Interface Design, User Experience, Usability and Accessibility, Information Architecture, Responsive Web Design, Interactive Design, Search Engine Optimization, Trainging and Public Speaking.
In his profession, follow the best practices, W3C web standards and guidelines, responsive, semantic, usable, accessible, SEO friendly to cutting edge cording using XHTML/HTML5, CSS and jQuery for Pixel-perfect cross browser compatibility.
In his leisure blogging for technical articles and lifestyle photographer.