Adding Visual custom component in spark DataGrid

Question

I am working with flex 4.5. I want to create Gauge component Datagrid.
I am using open source com.betterthantomorrow.components. I have created custom components like this
    <?xml version="1.0" encoding="utf-8"?>
    <s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009"
                                               xmlns:s="library://ns.adobe.com/flex/spark"
                                               xmlns:mx="library://ns.adobe.com/flex/mx"
                                               xmlns:bttc="com.betterthantomorrow.components.*"
                                               xmlns:gauge="com.betterthantomorrow.components.gauge.*"
                                               xmlns:objects="tekhnia.com.tekhniag.objects.*"
                                               width="30%" height="65" backgroundColor="black" borderColor="black"
                                               creationComplete="init(event)">
              <fx:Declarations>
                        <mx:NumberFormatter precision="1" id="formatter" rounding="nearest" />
              </fx:Declarations>
              <fx:Script>
                        <![CDATA[
                                  import mx.events.FlexEvent;
                                  import mx.messaging.channels.StreamingAMFChannel;
                                  [Bindable]
                                  public var cpuValue:Number;
                                  [Bindable]
                                  public var memoryValue:Number;
                                  [Bindable]
                                  public var diskValue:Number;
                                  [Bindable]
                                  public var mycomp:String;
                                  [Bindable]
                                  public var serverName:String;
                                  [Bindable]
                                  public var statusImage:String;
                                  protected function init(event:FlexEvent):void
                                            var strValues:String;
                                            var strColors:String;
                                            var strAlphas:String;
                                            strColors="0x009900,0xFFFF00,0xDD0000";
                                            strValues="0,50,70,100";
                                            strAlphas=".8,.8,.8"
                                            var values:Array=strValues.split(",");
                                            var colors:Array=strColors.split(",");
                                            var alphas:Array=strAlphas.split(",");
                                            gauge1.setStyle("alertValues",values);
                                            gauge1.setStyle("alertColors",colors);
                                            gauge1.setStyle("alertAlphas",alphas);
                                            gauge2.setStyle("alertValues",values);
                                            gauge2.setStyle("alertColors",colors);
                                            gauge2.setStyle("alertAlphas",alphas);
                                            gauge.setStyle("alertValues",values);
                                            gauge.setStyle("alertColors",colors);
                                            gauge.setStyle("alertAlphas",alphas);
                                            gauge.invalidateDisplayList();
                                            gauge1.invalidateDisplayList();
                                            gauge2.invalidateDisplayList();
                        ]]>
              </fx:Script>
              <s:layout>
                        <s:HorizontalLayout/>
              </s:layout>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1"  maxValue="10" value="{cpuValue}"  valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
              </s:TileGroup>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge1"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1"  maxValue="10" value="{memoryValue}"  valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white" automationName="T"/>
              </s:TileGroup>
              <s:TileGroup width="101" paddingLeft="20" paddingRight="2">
                        <bttc:Gauge id="gauge2"
                                                      diameter="50" width="50"
                                                      verticalCenter="0" horizontalCenter="-111"
                                                      minValue="1"  maxValue="10" value="{diskValue}"  valueFormatter="{formatter}"
                                                      bigTicks="9" smallTicks="45" showMinMax="false" showValue="false" pointerColor="white"/>
              </s:TileGroup>
              <s:TileGroup width="40" paddingTop="3">
                        <s:Image source="assets/led/big/{statusImage}" />
                        <s:Label  color="white" text="{serverName}" textAlign="center"/>
              </s:TileGroup>
    </s:BorderContainer>
I want to add this component in Datagrid. I have tried a lot on net. I didn't find any help. I read books as well.
Please help me. I found somewhere on the site one liner answer : write grid renderer. I don't how to write grid renderer and pass the data values to it.
I will be more thank full someone gives me pointer to sample grid renderer or code.

Answer 1

What's the flow here?
Do you want to pop-up a JSP in a window to prompt the user for extra information before submitting the check-in form? If so, you need a custom component to override the resource that draws the "submit" button on the form.
Or, do you want to execute something like a web service during the check-in process? If so, do a validateStandard filter. See the 'DynamicPrefix' comonent in the howtocomponents:
http://www.oracle.com/technetwork/middleware/content-management/index-092832.html