Flex - Sending a parameter to a custom ItemRenderer?

Question

Hello all,

What I am trying to accomplish to to get financial data in my Flex Datagrid to be color-coded--green if it's positive; red if it's negative. This would be fairly straightforward if the column I want colored was part of the dataProvider. Instead, I am calculating it based on two other columns that are part of the dataProvider. That would still be fairly straightforward because I could just calculate it again in the ItemRenderer, but another part of the calculation is based on the value of a textBox. So, what I think I need to be able to do is send the value of the textBox to the custom ItemRenderer, but since that value is stored in the main MXML Application, I don't know how to access it. Sending it as a parameter seems like the best way, but perhaps there's another.

Here is the current code for my ItemRenderer:

package {
import mx.controls.Label;
import mx.controls.listClasses.*;

public class PriceLabel extends Label {
    private const POSITIVE_COLOR:uint = 0x458B00 // Green
    private const NEGATIVE_COLOR:uint = 0xFF0000; // Red 

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
        super.updateDisplayList(unscaledWidth, unscaledHeight);

        /* Set the font color based on the item price. */
        setStyle("color", (data.AvailableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
    }
}

(data.AvailableFunding doesn't exist)

So does anyone know how I would go about accomplishing this?

Much Appreciated,

-Matt

Answer 1

You may want to look into ClassFactory from the Flex APIs:

http://livedocs.adobe.com/flex/3/langref/mx/core/ClassFactory.html

This allows you to pass a prototype Object with arbitrary types / values into the item renderer.

Answer 2

Ah, so I knew about outerDocument but not parentDocument. I was able to just use parentDocument.*whatever I want from the main App and I can access it as long as it's public.

Example:

setStyle("color", (parentDocument.availableFunding >= 0) ? POSITIVE_COLOR : NEGATIVE_COLOR);

Sweet! :)

Answer 3

You can access the value of the TextBox directly, if you need to, by using the static Application.application object, which is accessible from anywhere in your application.

For example, if you wanted the renderers to be notified when the value of the TextInput control changes, you could do something like this (from within your ItemRenderer, and where myTextInput is the ID of the control defined in your main MXML class):

<mx:Script>
    <![CDATA[

     import mx.core.Application;

     private function creationCompleteHandler(event:Event):void
     {
            Application.application.myTextInput.addEventListener(TextEvent.TEXT_INPUT, handleTextInput, false, 0, true);
     }

     private function handleTextInput(event:TextEvent):void
     {
         if (event.currentTarget.text == "some special value")
            {
               // Take some action...
            }
     }

    ]]>
</mx:Script>

With this approach, each item-renderer object will be notified when the TextInput's text property changes, and you can take appropriate action based on the value of the control at that time. Notice as well that I've set the useWeakReference argument to true in this case, to make sure the listener assignments don't interfere unintentionally with garbage collection. Hope it helps!

Answer 4

Could not fit this in a comment, so here I go!

@mattdell: As far as I know, this is the only way to do it while still achieving semi-dynamic binding with the value in text box. Mind that the grid doesn't update if you change the value in textbox unless you scroll or somehow force it to refresh otherwise.

@brd6644: This is a clean way, but only suitable to set static properties of itemRenderer that don't change during the display. In this case, the value in the textbox is applied only once when you create the instance of ClassFactory and never again.

Answer 5

I like to override the set data function of the item renderer to change the renderer when the data provider changes as shown here: http://butterfliesandbugs.wordpress.com/2007/06/14/changing-text-color-in-a-datagrid-using-itemrenderers/

When you override the function you could cast the object to your object to make the availableFunding property available.

To access the text box you could try creating a public property and binding the property to the text box in the mxml file:

public var textVar:String;

            <mx:itemRenderer>
                <mx:Component>
                    <customrenderer textVar="{txtBox.text}" />
                </mx:Component>
            </mx:itemRenderer>

Answer 6

Nice ClassFactory Example here http://www.leavethatthingalone.com/blog/index.cfm/2009/2/20/FeatureRichDynamicItemRenderers