Iwo Banaś - Flex Blog » how-to

Creating Collapsible Panel in Flex 4

Iwo Banas — Tue, 08 Sep 2009 17:57:39 +0000

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
```
    
    
    
```
Grouping all title bar layers inside one Group tag
Adding collapse button
Excluding contentGroup from collapsed state

Adding 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!

Creating MDataGrid date filter

Iwo Banas — Wed, 01 Jul 2009 12:33:50 +0000

In this post I will describe how to create custom filter for MDataGrid (my extension of Flex 3 DataGrid described in one of the previous posts and hosted on http://code.google.com/p/reusable-fx/). I will guide you through creation of date filter as an example.

I consider extensibility one of the most important feature of well designed reusable component and that’s why I am trying to make process of creating new MDataGrid filters as straightforward as possible.

Following “Favor object composition over class inheritance.” rule I decided to split filtering functionality among a number of classes rather than write another thousand lines of DataGrid code. At the first glance the solution may look complicated but after understanding responsibilities of “filters” and “filter editors” it is really straightforward.

Filter editors are the components displayed below column header after clicking filter button. Filter editor know nothing about business logic of filtering, their only responsibility is to present current state of the filter to the user and modify filter according to users actions. Filter editor may be any component implementing IColumnFilterEditor interface. The default implementation of this interface is FilterEditorBase class extending Box which is used as a base class for all standard MDataGrid filter editors. In the presented example we will create filter editor in MXML extending FilterEditorBase class.

Filter classes are where actual filtering takes place, they implement filterFunction which is used to eliminate items from MDataGrid data provider. Filters are also responsible for examining MDataGrid and presenting information about MDataGrid content to filter editors. In our example filter will present minimum and maximum dates found in given column. All filters extends ColumnFilterBase class.

To implement date filtering mechanism two classes have to be implemented: filter class (DateRangeFilter) and filter editor class (DateChooserFilterEditor).

DateRangeFilter

DateRangeFilter extends ColumnFilterBase class and defines four fields: dataMinimum, dataMaximum, minimum and maximum.

dataMinimum and dataMaximum represents a earliest and latest dates found in MDataGrid. These fields are updated by updateOriginalDateRange() function.

minimum and maximum defines the range of dates which will be displayed in MDataGrid. By default minimum is set to dataMinimum and maximum is set to dataMaximum which means that all data are displayed (filter is inactive). It is important to call commitFilterChange() function inside minimum/maximum setter to inform MDataGrid that filter value have changed.

DateRangeFilter also overrides two functions defined in ColumnFilterBase:

isActive getter checks if filter is active i.e. if it may eliminate any items form MDataGrid. In our case isActive getter simply checks if minimum and maximum differs from dataMinimum and dataMaximum.

override public function get isActive():Boolean
{
    return (minimum != dataMinimum || maximum != dataMaximum);
}

filterFunction checks if item passed as an argument should be eliminated. First date displayed in column associated with this filter is extracted from given item and then it is compared against minimum and maximum. If the value is within the range true is returned (item is not eliminated) other ways false is returned (item is filtered out). If no date is fond for the given item true is returned. filterFunction is called many times for every MDataGrid item so it should not be computationally expensive.

override public function filterFunction(obj:Object):Boolean
{
    var value:Date = itemToDate(obj);

    if (value)
    {
        if (minimum && value < minimum)
        {
            return false;
        }
        if (maximum && value > maximum)
        {
            return false;
        }
    }
    return true;
}

You can find two additional functions in DateRangeFilter code: itemToDate() is responsible for extracting date from data item and originalCollectionChandeHandler() refresh dataMinimum and dataMaximum when MDataGrid original collection (copy of data provider) changes.

DateChooserFilterEditor

Good news: creating filter editors in MXML is much simpler than coding filter and the effect is instantly visible!

To make curly brackets binding simpler it is good idea to create strongly typed, bindable reference to filter instance edited by filter editor. The code below is the only code placed in