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?

Unfair

Answer 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."

Torn

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

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? – Leptorrhine

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

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

Unfair

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. – Torn

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!

Firebird

Answer 4

I like to override the set data function of the item renderer to change the renderer when the data provider changes as shown here

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>

Persiflage

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

Answer 5

Nice ClassFactory Example here

Pending

The given link is broken. – Seismology

Answer 6

There's another technique, which, while it initially feels a little hacky is perhaps less cumbersome and cleaner in actual use.

It involves the little-observed fact that an event dispatch is, of course, synchronous and the event object can be treated as a value object populated by any event handler.

i.e. the ItemRenderer can do something like:

  ...
  var questionEvt:DynamicEvent = new DynamicEvent('answerMeThis', true, true);
  if (dispatchEvent(questionEvt))
  {
      if (questionEvent.answer == "some value")
      ....

With a corresponding handler somewhere up the view hierarchy above the renderer that has a listener on the event and does something like:

function handleAnswerMeThis(event:DynamicEvent):void
{
     event.answer = "another value";
     event.dataHelper = new DataHelperThingy();
}

etc.

It need not be a DynamicEvent - I'm just using that for lazy illustrative purposes.

Alleenallegation

Answer 7

I vote up for cliff.meyers' answer.

Here's another example on setting the properties of an itemRenderer from MXML by building a function that wraps a ClassFactory around the itemRenderer class and that injects the necessary properties.

The static function:

public static function createRendererWithProperties(renderer:Class,
properties:Object ):IFactory {
  var factory:ClassFactory = new ClassFactory(renderer); 
  factory.properties = properties;
  return factory;
}

A simple example that adds a Tooltip to each item in a list:

<mx:List dataProvider="{['Foo', 'Bar']}" itemRenderer="{createRendererWithProperties(Label, {toolTip: 'Hello'})}"/>

Reference:
http://cookbooks.adobe.com/post_Setting_the_properties_of_an_itemRenderer_from_MXM-5762.html

Jase

Answer 8

You use outerDocument property. Please see the fx:Component reference.

Gid

Answer 9

You could create an 'AvailableFunding' static variable in the ItemRenderer and then set it in the parent document.

public class PriceLabel extends Label {
    public static var availableFunding:int;
    ...
    ...
    SetStyle("color", (PriceLabel.availableFunding >= 0) ? NEGATIVE_COLOR : POSITIVE_COLOR);
}

In your parent document, set it when your text box gets updated

PriceLabel.availableFunding = textBox.text;

Obviously it'll be the same value for every ItemRenderer but it looks like that might be what you're doing anyway.

Gebhart

Answer 10

See this example:

itemRenderer="{UIUtils.createRenderer(TextBox,{iconSrc:IconRepository.linechart,headerColor:0xB7D034,subHeaderColor:0xE3007F,textColor:0x75757D})}"
                                   

Maestoso