Датчик или объект пользовательского интерфейса визуализируются в Datagrid или AdvancedDataGrid в flex 4.5 или flex 4

Question

Я работаю с Flex 4.5. Я хочу создать калибровочный компонент Datagrid.

Я использую открытый исходный код com.betterthant Saturday.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>

Надеюсь, это поможет.

Answer 2

Взгляните на этот урок http://help.adobe.com/en_US/flex/using/WS03d33b8076db57b9-1c32bcb9124deadc3e9-8000.html, поскольку он точно описывает, что вы пытаетесь сделать.Я думаю, все, что вам нужно сделать, это иметь компонент, основанный на: MXDataGridItemRenderer компонент.