Creating Collapsible Panel in Flex 4

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.
Continue reading Creating Collapsible Panel in Flex 4

Creating MDataGrid date filter

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 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.

Continue reading Creating MDataGrid date filter

Implementing Slide effects – iteration 3

This post is a continuation of iteration 2. From the end user point of view Slide effects presented here are almost identical to these from previous post. The only difference is that target components shadow or other filter drawn beside components bounds (0,0 to width, height rectangle) are not cropped during slide animation.

A number of changes was required to implement this functionality:

Continue reading Implementing Slide effects – iteration 3

Implementing Slide effects – iteration 2

This post is a continuation of Implementing SlideDown effect – iteration 1. It is quite short since extraction of Slide base class and implementation of SlideDown, SlideUp, SlideLeft and SlideRight classes was really straightforward. Most of the code from iteration 1 was used as base classes (Slide and SlideInstance). Concrete effect classes simply declares instanceClass in constructor while concrete effect instance classes overrides onTweenUpdate() method to tween animation in a specific direction.

Continue reading Implementing Slide effects – iteration 2

Implementing SlideDown effect – iteration 1

This tutorial describes how to create reusable effect which can be applied both by calling play() function and by binding it to showEffect/hideEffect MXML attribute.

If you simply want to use slide effect in your application you don’t have to read whole this tutorial. Simply download sources, open included examples and you will surely understand how to use it.

I have divided this tutorial into three parts (posts):

Continue reading Implementing SlideDown effect – iteration 1