Few best Custom Components for Adobe Flex – Part 1

December 6, 2009, 1:02
Softwares
Add a comment

As you all aware Adobe Flex comes with a full spectrum of components, but sometimes it even lacks what we try to implement with the existing components. So, we have to either create our own custom component or grab one component which is in our similar route and enhance the same to suit our requirements of our Adobe Flex Applications. Here comes the customization into picture.

And I am sure it is always tough to get the right resource in right time, so just compiled some of my best and must check Adobe Flex Custom Components. Here comes the list of custom components which will be helpful for the Flex developers over there.

Adobe Flex Components

Custom Collapsible Panel in Flex 4 with rotation

Adobe Flex Collapsible Panel

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…

Source | Demo

Custom DataGrid with Date filter

Adobe Flex MDataGrid Filter

It’s a normal Datagrid component with added functionality of date filter. 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.

Source | Demo

Custom DataGrid with client-side filtering and searching

It’s a normal Datagrid component with added functionality of filtering and searching similar to Datagrid component with date filter.

Source | Demo

Normal Custom Collapsible Panel

It’s 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.

Demo

Chart DrillDown Animations

Adobe Flex Chart DrillDown Animations

This charts uses animation to convey what’s happening in a typical OLAP drill down. A drilldown is when the user navigates from some summary information in to examine specific details. Viewing sales figures by month, for example, a user might ‘drill down’ into December to see specific sales figure for each day of December to see what effect this holiday season has.

Source | Demo

Animated DragTile Component 0.1

Animated DragTile Component

The DragTile Component adds Picasa like Drag/Drop animated feedback to the basic Flex Tile behavior. Using this component, you can:

a. drag to reorder items in the component
b. drag from/to the component to move items into or out of the dataProvider to another component.
c. drag from/to the component (with shift key pressed) to copy items into the dataProvider

DragDrop Demo | Alphabet Demo | TeamMgr Demo

Fisheye Component v0.3

Adobe Flex Fisheye Component

The effect is similar to the general Fisheye Menu.

Demo | Title Explorer Demo

FlexBook – Flip book

FlexBook can act as a container, allowing the developer to flip through its children components

Demos:

RandomWalk Component

Adobe Flex Random Walk

RandomWalk component neither knows, nor cares, how the items are being rendered. All it’s doing is creating the renderers, handing over the XML nodes, and laying them out on screen. In this version, we were able to drop in a slightly more complex renderer that alters the appearance of the individual items based on whether they’re selected or not.

Demos:

Landscape Zoomer

Adobe Flex Landscape Zoomer

This component was inspired by a number of really nice flash sites, which make effective use of zooming to navigate information. In the right circumstances, a good zoom is the perfect way to both give the user a 1000 foot view of data and quickly drive them down to explore the details as necessary.

So the Landscape component makes it easy to do just that. By default, it essentially behaves like a Canvas component, laying out its children absolutely, sizing itself to the smallest size that can contain them all. But you can pass it any collection of descendants (children, or children’s children, etc), and it will automatically zoom in to the tightest area possible that contains the ’selected’ descendants.

Demos: