Wednesday, June 2, 2010

Flex Glass Headers

When i first started to work in Flex almost a year back, I was so eagerly looking to grab as much goodies as possible and make my application look spiffy. I remember staying all night long at work so many times, just to explore options by visiting many sites and applications built using Flex, primarily to get sources of inspiration.

One such application was the Flex Style Explorer. The one thing that I loved the most was the mild glossy look it had on its title; Luckily it had the view source enabled and I went on to see how the guys had done that.

It was a mere reference to a transparent flash sprite compiled into a swiff file and was referred from inside the CSS - set as the backgroundImage of the panel.

I went on to build my own header using flash in the next few minutes and added my own version of the glossy look to my application.

Click here to see the image of my app title before and after.

It was such a mild difference, people could hardly notice it; but it hugely enhanced the overall aesthetics of my application. People LOVED the look and feel but no one guessed it. I went on to use this header smartly across the application onto different controls wherever possible.

Flex Renderer Recycling

Thought it would be useful to just mention about renderer recycling 'feature' that is inherent in the Flex UI control handling.

Often this could burn your time if not handled properly at the time of building your application.

The Problem:
When you scroll through a list control which has a huge list of items and is bound with an itemRenderer, the items in the list control tend to shift its positions randomly, as you scroll.

The Reason:
Flex by default tries to reuse the item renderers. In other words lets say your list control has about 40 items. It is not necessary that Flex would generate 40 itemRenderers to display the list.
Instead, based on the display area available, it would generate a few itemRenderers, just enough to handle the current display area and probably a few more for buffering.

As the users scroll through the same itemRenderers get reused and the contents that need to be displayed, in other words the next item data will be rewritten onto that itemRenderer.

So in total the creationComplete event on the item renderer would just fire once and it is not necessary that it would fire for every item added to the list again because of this reusing concept.

The Solution:
Override the set data function on your itemRenderer which would give you access to the actual item that is being bound to the itemRenderer at that point in time, and in this function you could take care of binding the item the way you want.

The set data is bound to get called many times during the process of creation/change resize etc...
For an example of overcoming the renderer recycling issue and how to override the set data function, check the example here.

Flex TileList ItemRenderer with Drag and Drop Sample

Moving on to Flex 4 since last month, I think it is time to publish a few of the small things I had done in Flex 3.

This one is a simple but nice - drag and drop example from one of the modules I had built. It is not the entire application of course; just a stripped down to basics version that just explains a few

The example handles issues like renderer recycling and explains how a custom item renderer can be used which in turn could have its own set of child controls.

The source for this can be found here and a live example here.

P.S.: When viewing the demo, just click on Open if your browser prompts you about handling the file.