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.
Just Check if this helps you. Instead of using your custom component for putting all the three gauges together you can have them in separate coloumns and provide appropriate data provider. You can achieve exactly what you want to also but then you have to handle the data you pass as the data provider accordingly in your component. The following approach seems simpler.
The other way is pass your entire component as the item renderer taking cues from above:
One more point to make here is if your data provider assigned to the dataGrid has all the values then inside your component you can access them like data.variableName:
in which case you can pass in your component as an item renderer as follows :
Hope this is of some help.