Flex - Sending a parameter to a custom ItemRenderer?

问题

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?

回答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."

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

回答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!

回答4:

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.

回答5:

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

回答6:

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

回答7:

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.

回答8:

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>

回答9:

Nice ClassFactory Example here

回答10:

See this example:

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

来源：https://stackoverflow.com/questions/528796/flex-sending-a-parameter-to-a-custom-itemrenderer

标签

apache-flex

itemrenderer