apache-flex - 在 flex 4.5 或 flex 4 中的 Datagrid 或 AdvancedDataGrid 中呈现仪表或 UI 对象

Question

我正在使用 flex 4.5。我想创建 Gauge 组件 Datagrid。

我正在使用开源 com.betterthantomorrow.components。我创建了这样的自定义组件

<?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>

我想在 Datagrid 中添加这个组件。我在网上尝试了很多。我没有找到任何帮助。我也看书。

请帮帮我。我在网站某处找到了一个线性答案:编写网格渲染器。我不知道如何编写网格渲染器并将数据值传递给它。

我将更加感谢有人给我指向示例网格渲染器或代码的指针。

Answer 1

请检查这是否对您有帮助。您可以将它们放在不同的列中，并提供适当的数据提供程序，而不是使用您的自定义组件将所有三个仪表放在一起。您也可以完全实现您想要的，但是您必须在组件中相应地处理您作为数据提供者传递的数据。以下方法似乎更简单。

<mx:DataGrid id="yourGrid"
             height="388" width="663"
             dataProvider="{yourDP}"

             >
    <mx:columns>
        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge1"  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" automationName="T"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge2"  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"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <bttc:Gauge id="gauge3"  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" automationName="T"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>

        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <s:Image source="assets/led/big/{statusImage}" />
                    <s:Label  color="white" text="{serverName}" textAlign="center"/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>


    </mx:columns> 
</mx:DataGrid>

另一种方法是将整个组件作为项目渲染器从上方获取提示:

<mx:DataGrid id="yourGrid"
             height="388" width="663"
             dataProvider="{yourDP}"

             >
    <mx:columns>
        <mx:DataGridColumn headerText="Type" width="80">
            <mx:itemRenderer>
                <mx:Component>
                    <someNameSpace:YourComponent cpuvalue={cpuValue} diskValue={diskValue}/>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>



    </mx:columns> 
</mx:DataGrid>

这里还有一点要说明的是，如果分配给 dataGrid 的数据提供者具有所有值，那么在您的组件中您可以像访问 data.variableName 一样访问它们:

<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="{data.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="{data.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="{data.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="{data.serverName}" textAlign="center"/>
</s:TileGroup>  

在这种情况下，您可以按如下方式将组件作为项目渲染器传递:

<mx:DataGrid  dataProvider="{yourDP}" >
        <mx:columns>
            <mx:DataGridColumn itemRenderer="com.somePath.yourComponent"/>
        </mx:columns>
</mx:DataGrid>

希望对您有所帮助。