Flex - Sending a parameter to a custom ItemRenderer?

Question

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?

Solution 1

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

This allows you to set a prototype Object with arbitrary types / values each of which will be passed to the item renderer. From the sample:

var productRenderer:ClassFactory = new ClassFactory(ProductRenderer);
productRenderer.properties = { showProductImage: true };
myList.itemRenderer = productRenderer;

The above code assumed that "ProductRenderer" has a public property called "showProductImage" which will be set with a value of "true."

Solution 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! :)

Solution 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!

Comments

[cliff.meyers]

Using parentDocument is going to couple your item renderer to the parent component and make it unusable anywhere else in your app. Tread carefully, this is usually considered bad practice.

[Nek]

This won't work. The declared mx:Component is out of scope where txtBox.text lives.

[surfer01]

Much better answer than the chosen one! Add one event handler, write three lines of code... DONE!

[sstauross]

could you give an example on how to accomplish this? I have a list component and an itemrenderer and i want to pass an extra value into the itemrenderer how can i do that?

[MonoThreaded]

Very elegant and works wonders. For clarity properties just need to be defined in the render (in fx:Declaration for example)

[jeffslofish]

The given link is broken.