ItemRenderers vs ItemEditors

There has been another discussion on the mailing list why using components for itemrenders and itemeditors is challenging – and how to deal with it. The case in point was DateField with mask as ItemEditor – and usual synchronization with the itemRenderer labelFunction and things

Basically when you use a renderer as an editor, there is no reason to deal with labelFunction as you have at your disposal a powerful control with a built-in mask. It is more expensive to use tons of heavy controls as ItemRenderers. And if you do, you might be OK because in my opinion you get a better looking UI with just a little performace degradation.

In most cases we are using ItemRenderers as ItemEditors and have a single point of customization for controls.

Here is the rub – you can not declare properties needed for these controls on the DataGridColumn tag.

There is no trivial out of the box way to add properties to MXML . You have to use mx:Component in order to “embed” them into the class. This approach is very limiting and does not lend itself easily to data driven programming.

An alternative it to create a class factory. I do not have a trivial factory to share with you, and the factory we use would take too much space and time to go over, but here is (very ugly and untested) version of the factory implementation:
………..

rendererIsEditor=”true” />
itemRenderer=”{new WrappedClassFactory(com.theriabook.controls.DateField,
{
dateFormat:locale.getDateFormat()}}”
/>

public class WrappedClassFactory extends ClassFactory {
public function WrappedClassFactory (cls:Class, props:Object) {
super();
this.properties = props;
}}
This should work and allow you to add as many properties to the itemRenderer as you need.

Warning: This approach is addictive. It may change the way you code. If you are in application and not software development and have team of junior programmers it might cause project delivery delays. On contrary, if you are in software development and have experienced team, it can benefit you greatly.
Here is a screenshot from Chapter 11 of our upcoming book on Flex – BOTH controls on the left and right are datagrids showing the same data. The “expando” property contains serialized additional render attributes, styles, runtime property and styles (ie calculated on the data change), etc.

Enjoy.

4 thoughts on “ItemRenderers vs ItemEditors

  1. Thanks for sharing another great idea. I’ve been making do with a far less elegant solution that I’ve never been happy with.
    If you find a minute, I’d love to hear your rationale for the warning you’ve attached.
    Have a good one.

  2. Well, did you figure out the way the picture (property bag above) was created? If you did, you can see where it goes.
    Basically, using class factories allow you to make grids that do not look like grids but dynamic forms, support runtime styles, any types of plugs – with all via either MXML or better well structured ActionScript.

    Let me give you another example that got my head spin for a while:http://coenraets.org/samples/portfolio/portfolio.html
    Chris’s http://coenraets.org/samples/portfolio/srcview/source/OptimizedDataGrid.as.html is undeniably a way to follow for realtime Flex programming.

    However, I got similar refresh rates by using very simplistic runtime styles based on unconventional use of class factories.
    I would argue that depending on your experience you can take either our approach or more direct one . Imho, wrapping factories and making them aware of data they are presenting and event model is going to be more usable in long run. However, it gives you too much rope and leads you in the area where you would have to learn ~19000 lines of datagrid and surrounding objects code by heart.

  3. Hi,
    I am trying to use this solution to create really reusable item renders. I am finding a problem though putting this in a datagrid. When I use a classFactory for a itemrender (same way the article is showing) its giving a error during the verticalscroll of the datagrid. Infact I am able to reproduce the error not only using custom item render but for a code like this

    buttonItemRenderer:ClassFactory
    buttonItemRenderer = new ClassFactory(mx.controls.Button);

    When I try to set the verticalScrollPosition property of the datagrid… like
    dg.verticalScrollPosition = 2
    It is giving a error. This error is described in http://www.mail-archive.com/flexcoders@yahoogroups.com/msg50380.html

    Would appreciate if you could share ur opinion on why this problem occurs when u use ClassFactory?

    Regards,
    Kishan

  4. Sorry – do not have 2.0 codebase handy to look up error. In short, running it under debugger would help to see offending item

    I seldom use ClassFactory on a standard class – rather as mixin over “virtual” renderer – for example above classfactory actually hosts function. Other trick that really helps dealing with datagrid issues is to disable caching on datagrid.
    Regards,
    Anatole

Comments are closed.