Category: reusable components

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

Scrolling and zooming chart with CategoryAxis

Title of this post is a little bit misleading because it is not possible to use ChartScroller directly with CategoryAxis. This is because ChartScroller relays on axis minimum/maximum properties which are not present in CategoryAxis. Luckily it is possible to simulate CategoryAxis behavior with LinearAxis which is supported by ChartScroller. I will describe how to do it in this post.
Continue reading Scrolling and zooming chart with CategoryAxis

Scrolling and zooming chart with ChartScroller

Some time ago I presented scrolling chart by using modified axis renderer (ScrollableAxisRenderer). I rethought this concept and come to the point that axis renderer should render axis not scroll the chart, so chart scrolling should be implemented as separate component. This is especially true in case of charts with many axes and renderers. My new idea was to create nonvisual component which will take reference to a chart and add appropriate listeners modifying axes minimum/maximum to achieve scrolling /zooming.
Continue reading Scrolling and zooming chart with ChartScroller

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

Continue reading Creating MDataGrid date filter

DataGrid with client-side filtering and searching

I am working on reusable Flex 3 DataGrid extension allowing client-side filtering and searching, and probably many other features in the future. Although it is not finished yet I decided to publish the result of my work to get some feedback from you:-)

The project source repository is located at http://code.google.com/p/reusable-fx/
You can also view source of the example below.

Continue reading DataGrid with client-side filtering and searching

Scrollable Chart Axis Renderer

Some time ago I was asked to create column chart representing data in time with user friendly interface to change period of analysis. Current solution was consisted of two data fields to select date range and it was OK but it wasn’t really Flexy.

I decided to enable scrolling the chart by dragging the axis so that if one wants to see what’s beyond the left edge of chart (s)he can simply drag the charts horizontal axis and scroll it right. To enable zooming the data I chose to use mouse wheel. Generally these ideas was based on popular maps services interfaces.

This example is deprecated, consider using ChartScroller instead!!!
Continue reading Scrollable Chart Axis Renderer

Searchable DataGrid

Although standard Flex 3 DataGrid implements findString() function it is not really usable. Searching only the first column or the column with sorting enabled is definitely not intuitive and skipping to the next match on every keystroke is confusing. Furthermore calling to findString() changes selected index without highlighting matching text so in DataGrid with many columns it may be hard to figure out where the matching text is located.

Given above I decided to create new more flexible and reusable searching mechanism for DataGrid. As I was working on it I realized that other components (e.g. TextArea) may also support searching. That’s why I decided to create ISearchable interface to be implemented by every component supporting searching.

I also decided that searching should support standard wildcards like “*” or “?” so I created WlidcardUtils class to convert wildcards to regular expressions which are internally used by my searching mechanism. I know that regular expressions aren’t very fast so maybe one day I will write my own mechanism for matching wildcards but for now RegExp’s are enough.

Continue reading Searchable DataGrid

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