views:

145

answers:

1

Hi

I was wondering if anyone had any luck with the following senario in flex.

I'd like to be able to have a custom item renderer which delegates to another renderer inside.

The reason for this would be in a datagrid for instance displaying a checkbox if the dataprovider for the row had a boolean value. Using the default item renderer when the value was a non boolean.

Basically I was hoping to use a proxy object (though not necessarily the proxy class) so that I could a renderer which delegated all of its responsibilties to a sub renderer.

Hard to explain.

Edit 1

I think the following gives a clearer idea of what I had in mind. This is only knocked up quickly for the purpose of showing the idea.

SwitchingRenderer.as

package com.example
{
    import mx.controls.CheckBox;
    import mx.controls.dataGridClasses.DataGridItemRenderer;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.core.IDataRenderer;
    import mx.core.UIComponent;

    public class SwitchingRenderer extends UIComponent implements IDataRenderer, IDropInListItemRenderer
    {
        private var checkboxRenderer:CheckBox;
        private var defaultRenderer:DataGridItemRenderer;
        private var currentRenderer:IDataRenderer;
        public function SwitchingRenderer()
        {
            this.checkboxRenderer = new CheckBox();
            this.defaultRenderer = new DataGridItemRenderer();
            this.currentRenderer = defaultRenderer();
            super();
        }

        public function get data():Object
        {
            //If the data for this cell is a boolean 
            //  currentRender = checkBoxRenderer
            // otherwise 
            //  currentRenderer = defaultRenderer
        }

        public function set data(value:Object):void
        {
            currentRenderer.data = value;
        }

        public function get listData():BaseListData
        {
            return currentRenderer.listData;
        }

        public function set listData(value:BaseListData):void
        {
            currentRenderer.listData = value;
        }



    }
}
+2  A: 

If you're using Flex 4 spark components look into the itemRendererFunction,

Here is a good sample from the interwebs.

Unfortunately, Flex 3 components, such as the DataGrid do not support that.

You're a bit vague on what you'd be displaying if the data sent into the itemRenderer was not a Boolean value. But, you can easily modify the visual appearance of a component based on the data change event, including swapping visible properties of a component's children, changing states or change the selectedIndex of a ViewStack. All these things can be done within an itemRenderer w/o issues.


Edit:

Based on the user's additional posting, I'd add that what he is after can be done like this:

public function get data():Object
{
    if(this.data is Boolean){
       checkBoxRenderer.visible = true;
       defaultRenderer.visible = false;
    } else {
       checkBoxRenderer.visible = false;
       defaultRenderer.visible = true;

    }

}
www.Flextras.com
I hope I've clarifed my question somewhat.
Wes
I've edited my answer accordingly, however I will point out that your original post has no question. Are you having a problem trying to implement this? Your already define the algorithmic logic in your question.
www.Flextras.com
Yes I considered this before. I understand my question was different. Its a useful answer but yes I'm trying to see if the method would work.
Wes