3 Replies Latest reply on Jun 16, 2010 10:17 PM by BhaskerChari

    when to use Drop In Item renderer and InLine Item Renderers ??

    kiran7881 Level 1

      Hi ,

       

      I am getting confused in where to use Inline ItemRenderer and DropIn Item Renderer .

       

      What i feel is that DROP in Item Renderer are easy to use , and those can satisfy any requirements .

       

      What i read from tutorilas that we cant use Drop In because they say ,  The only drawback to using  drop in is that them is that you cannot configure them

       

      Please help me .

        • 1. Re: when to use Drop In Item renderer and InLine Item Renderers ??
          David_F57 Level 5

          hi,

           

          Inline renders are ok for very simplistic tasks(they are best left to example code etc..),  I would go as far as saying that inline renderers are not even close to best practise cases. By separating out the renderer you have flexible code as well as maintainable code. Inline renderer's tend to get quite messy and hard to follow in more complex use cases.

           

          David

          • 2. Re: when to use Drop In Item renderer and InLine Item Renderers ??
            kiran7881 Level 1

            David , thanks for the answer .

             

            But i think that the question is diverted , my question was that in what cases DROP IN Item Renderers aren't sufficient and when should we go for

            INLINE Item Renderes ??

             

            Thanks in advance.

            • 3. Re: when to use Drop In Item renderer and InLine Item Renderers ??
              BhaskerChari Level 4

              Hi Kiran,

               

              Here is the detailed explanation you needed:

               

              You can also refer the link below:

               

              http://blog.flexdevelopers.com/2009/02/flex-basics-item-renderers.html

              Drop-In Item Renderers

              Drop-In Item Renderers are generic in nature and don't rely on specific data fields to render data. This allows them to be used with a wide range of data sets, hence, the term “drop-in”. Drop-In Item Renderers can be “dropped-in” to any list-based control regardless of the dataprovider’s data properties.

              In our previous example, the employee photo property requires use of a custom Item Renderer to render properly in the UI. In this scenario the Image component satisfies our rendering needs out of the box. Implemented as a Drop-In Item Renderer, the Image component takes any data property regardless of name and uses it as the Image component's source property value. Assuming our employee photo property contains a valid image path, the Image Drop-In Item Renderer will work perfectly and resolve the image path as an image in the UI.

              <!-- Drop-in Item Renderer: Image control -->
              <mx:DataGridColumn dataField="photo"
                                 headerText="Employee Photo"
                                 itemRenderer="mx.controls.Image"/>

              Drop-In Item Renderers are simple and easy to use and satisfy specific use cases nicely. However, they provide no flexibility whatsoever. If your needs are not satisfied by a Drop-In Item Renderer, you must create your own Item Renderer as an inline component or an external component.

              Inline Item Renderers

              Generally used for simple item rendering requiring minimal customization, inline Item Renderers are defined as a component nested within the MXML of your list-based control.

              It is important to note that Item Renderers nested within the itemrender property of a list-based control occupy a different scope than the list-based control. Any attempt to reference members (properties or methods) of the parent component from the nested Item Renderer component will result in a compile-time error. However, references to the members of the parent component can be achieved by utilizing the outerDocument object.

              <mx:DataGrid id="myGrid" dataProvider="{gridData}">
                 <mx:columns>
                    <mx:DataGridColumn headerText="Show Relevance">
                       <mx:itemRenderer>
                          <mx:Component>
                             <mx:Image source="{'assets/images/indicator_' + data.showRelevance + '.png'}"
                                       toolTip="{(data.showRelevance == 1) ? 'On' : 'Off'}"
                                       click="outerDocument.toggle()" />
                          </mx:Component>
                       </mx:itemRenderer>
                    </mx:DataGridColumn>
                 </mx:columns>
              </mx:DataGrid>

              Remember, rules of encapsulation still apply. Mark all properties or methods public if you want them accessible by your inline Item Renderer. In the previous example, the toggle() method must have a public access modifier to expose itself to the inline Item Renderer.

              public function toggle():void

              Inline Item Renderers can also be reusable by creating a named component instance outside of the list-based control. This component must have an id property and contain the rendering logic of the Item Renderer. Using data bindings, the component is assigned to the itemrenderer property of one or more data properties of a list-based control.

              <!-- Reusable inline Item Renderer -->
              <mx:Component id="ImageRenderer">
                 <mx:VBox width="100%" height="140"
                          horizontalAlign="center" verticalAlign="middle">
                    <mx:Image source="{'assets/'+data.image}"/>
                    <mx:Label text="{data.image}" />
                 </mx:VBox>
              </mx:Component>

              <!-- Used within a list-based control-->
              <mx:DataGridColumn headerText="Image"
                                 dataField="image" width="150"
                                 itemRenderer="{ImageRenderer}"/>

              In the previous example, note that the Item Renderer component contains 2 UI controls – Image and Label. When using multiple controls within an Item Renderer, a layout container is required. In this example, a VBox was used.

              If this post answers your question or helps, please kindly mark it as such.

               

              Thanks,

              Bhasker Chari

               

              Message was edited by: BhaskerChari