Iwo Banaś – Flex Blog

It is quite common in Flex applications (and other RIAs) to divide screen content into two parts: the navigation/configuration panel on the left and the actual content on the right.
The examples of such apps are FlexStore sample and famous Style Explorer.

I followed this pattern in many projects and several times we come to the point that navigation/configuration panel requires too much space and that there should be a possibility to minimize it. Probably designers of Style Explorer has a similar idea since their navigation control can be minimized. Unfortunately they haven’t created reusable component to do this.

Some time ago I have created the collapsible panel in Flex 3. The idea of this component was to minimize panel by hiding panel content and rotating the header by 90 degree. So that, minimized panel was visible as vertical bar with the title. It was the nightmare to use rotation in Flex 3 since Flex 3 layouts doesn’t care about rotation. Placing component in the right place requires many tricks and extensive usage of trigonometric functions…

When I read that Gumbo (now Flex 4) layouts supports rotation I decided to test it by reimplementing my collapsible panel. Flex 4 definitely passed the test. Spark component architecture is really cool and it is much easier to create reusable/extendible components in Flex 4 than it was before. You can see the result of my work below.

This example is created using 4.0.0.8847, it will not work with SDK shipped with beta 1.
View source is enabled, you can download zipped sources from here.

Following Spark components architecture I have extended Panel class and created new MXML skin.

Component class

Below you can find the list of steps taken to create CollapsiblePanel main component class. At first sight this list may look long and complicated but after understanding Spark architecture it is really simple.

• Adding “collapsed” skin state

  [SkinState("collapsed")]
  public class CollapsiblePanel extends Panel
  {
  

• Adding new collapsed field indicating if panel is collapsed (invalidating skin state in setter)

  public function get collapsed():Boolean
  {
  	return _collapsed;
  }
  public function set collapsed(value:Boolean):void
  {
  	_collapsed = value;
  	invalidateSkinState();
  }
  protected var _collapsed:Boolean;
  

• Overriding getCurrentSkinState() function to support “collapsed” skin state

  override protected function getCurrentSkinState():String
  {
  	return collapsed ? "collapsed" : super.getCurrentSkinState();
  }
  

• Adding collapseButton optional skin part

  [SkinPart(required="false")]
  public var collapseButton:Button;
  

• Implementing handler to toggle collapsed property on collapseButton click

  protected function collapseButtonClickHandler(event:MouseEvent):void
  {
  	collapsed = !collapsed;
  }
  

• Overriding partAdded()/partRemoved() functions to add collapseButton event handler

  override protected function partAdded(partName:String, instance:Object) : void
  {
  	super.partAdded(partName, instance);
  
  	if (instance == collapseButton)
  	{
  		Button(instance).addEventListener(MouseEvent.CLICK, collapseButtonClickHandler);
  	}
  }
  override protected function partRemoved(partName:String, instance:Object) : void
  {
  	if (instance == collapseButton)
  	{
  		Button(instance).removeEventListener(MouseEvent.CLICK, collapseButtonClickHandler);
  	}
  	super.partRemoved(partName, instance);
  }
  

MXML Skin

The CollapsiblePanelSkin.mxml skin is a copy of default Spark Panel skin with a number of modification. I used enhanced styles syntax to modify skin in “collapsed” state.

• Adding “collapsed” state

  <s:states>
      <s:State name="normal" />
      <s:State name="collapsed" />
      <s:State name="disabled" />
  </s:states>
  

• Grouping all title bar layers inside one Group tag

  <s:Group id="titleBarGroup" left="0" top="0" right="0" bottom="0"
       maxHeight="32" rotation.collapsed="90">
  

• Adding collapse button

  <s:Button id="collapseButton" width="16" height="16" top="7" right="7"
      label="-" label.collapsed="+" toolTip="Collapse" toolTip.collapsed="Open" />
  

• Excluding contentGroup from collapsed state

  <s:Group id="contentGroup" left="1" right="1" top="32" bottom="1" minWidth="0" minHeight="0"
       visible.collapsed="false" excludeFrom="collapsed">
  </s:Group>
  

• Adding transitions

  <s:transitions>
      <s:Transition fromState="normal" toState="collapsed">
          <s:Sequence>
              <s:Fade target="{contentGroup}" duration="250" />
              <s:Parallel targets="{[titleBarGroup, this]}" >
                  <s:Rotate target="{titleBarGroup}" duration="250" />
                  <s:Resize target="{this}" duration="250" easer="{collapseEaser}" />
              </s:Parallel>
          </s:Sequence>
      </s:Transition>
      <s:Transition fromState="collapsed" toState="normal">
          <s:Sequence>
              <s:Parallel targets="{[titleBarGroup, this]}" >
                  <s:Rotate target="{titleBarGroup}" duration="250" />
                  <s:Resize target="{this}" duration="250" easer="{uncollapseEaser}" />
              </s:Parallel>
              <s:Fade target="{contentGroup}" duration="250" />
          </s:Sequence>
      </s:Transition>
  </s:transitions>
  

Summarizing, creating CollapsiblePanel in Flex 4 was much easier than in Flex 3 and the resulting component is of much higher quality. Although understanding Spark components architecture and MXML 2009 may require some time it is definitely worth doing!