0 Replies Latest reply on Oct 7, 2011 1:45 PM by KamleshAhire

    Adding Visual custom component in spark DataGrid

    KamleshAhire

      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.