Item Renderes: Part 1: Introduction

Lets start with the definition of the term item renderers and item editors

According to me:

Item renderes and item editors are set of instruction or a piece of code which customize the appearance and/or behavior of items in list based components.

Sometime people get confused between item renderers and item editors.
So, before going further, Let me draw a comparison between them

Item rendere versus item editors

• Both item renderes and item editors receive data in a data property from a list contol

• The item renderer uses the data for purly for display and can't pass back data to list controls while item editor can pass data back from the controls that then becomes the new value of the edited items

• Visually item renderes and item editors behaves differently and item renders is used all the times while an item editor is used only when item is being edited

Item Renderers and item editors could be of following three types:
1. Drop in
2. Inline
3. Component

Drop in item renederes and item editors
When you specify a control as a value again itemRenderer or itemEditor property of the control it would be called as a drop in item renderer or item editor

Example:
As item renderer

<mx:DataGridColumn dataField="completed"
     headerText="Completed"
     itemRenderer="mx.controls.CheckBox"
     />

As item editor

<mx:DataGridColumn dataField="quantity"
headerText="Quantity"
itemEditor="mx.controls.NumericStepper"
editorDataField="value"/>

Inline item renederes and item editors
when we write item renderes and item editor within a DataGridColumn tag block using
and tag respectively they are known as inline item renderes or editors.
Example

Inline Item Renderes

<mx:datagridcolumn datafield="someData"&gt
<mx:itemrenderer>
    <mx:component>
        <mx:Text selectable="false"
            text="{dataObj.name}"/>
    </mx:Component>
</mx:itemRenderer>
</mx:DataGridColumn>

Inline Item Editor

<mx:datagridcolumn datafield="someData">
<mx:itemeditCoor>
    <mx:component>
        <mx:NumericStepper minimum="0"
            maximum="10"/>
    </mx:Component>
</mx:itemEditor>
</mx:DataGridColumn>

Component Item renderers and item editors
When a inline item renderer get complex, its better to make it in a separate file as an independent component. When we do so, it is know as component item renderer or item editor.
It 0pen almost a new paradigm of opportunities which lets developer ease of resume and provides greater flexibility and functionality.

Example:

Make a separate file say myFirstItemRender.mxml

<mx:DataGridColumn dataField="someData" itemRenderer="myFirstRenderer.mxml"/>

Don't forget to mention the folder if of you component file if their is any. Say you saved all your renderes or editor files under renderers folder then you should include it like this:

<mx:DataGridColumn dataField="someData" itemRenderer="renderers.myFirstRenderer.mxml"/>

We will discuss about these various types of item renderers and item editors with a lot of other things in detail with coming series of articles on this topic.

Hope you enjoyed reading this article.
I would be interested in your feedback about this article.

Thanks,
Shaleen Jain