Degrafa渲染DataGrid

最新推荐文章于 2021-08-31 16:55:50 发布

最新推荐文章于 2021-08-31 16:55:50 发布 · 193 阅读

文章标签：

#Adobe #XML #HTML

Flex3 专栏收录该内容

43 篇文章

订阅专栏

本文介绍了一个使用Degrafa库在DataGrid中实现视觉效果的示例。通过自定义渲染器，能够直观展示磁盘容量使用情况，包括已用和剩余空间。

在DataGrid中可以利用多种组件实现Column的渲染，这里就介绍一个Degrafa中的surface渲染Column的Demo：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    xmlns:degrafa="com.degrafa.*"
    xmlns:paint="com.degrafa.paint.*"
    xmlns:geometry="com.degrafa.geometry.*" 
    layout="absolute" 
    creationComplete="generateData()"
    backgroundColor="#FFFFFF"
    backgroundGradientColors="[#999999, #FFFFFF]" viewSourceURL="srcview/index.html">
    
    <mx:Style>
        ApplicationControlBar {
           highlightAlphas: 0.7, 0.06;
           fillAlphas: 1, 1;
           fillColors: #999999, #666666;
           cornerRadius: 0;
           dropShadowEnabled: true;
           shadowDirection: center;
        }
    </mx:Style>
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            private var dataCollection : ArrayCollection;
            
            private function generateData() : void
            {
                if ( dataCollection == null )
                    dataCollection = new ArrayCollection();
                
                dataCollection.disableAutoUpdate();
                dataCollection.removeAll();
                
                for ( var x : int = 0; x < 100; x ++ )
                {
                    var o : Object = new Object();
                    o.capacity = 500;
                    o.used = Math.random() * o.capacity;
                    o.free = o.capacity - o.used;
                    o.name = "Disk: " + x;
                    dataCollection.addItem( o );
                }
                
                dataCollection.enableAutoUpdate();
                dataCollection.refresh();
            }
        ]]>
    </mx:Script>
    
    <mx:ApplicationControlBar dock="true">
        
        <mx:Button label="Generate New Data" click="generateData()" useHandCursor="true" buttonMode="true" />
        
    </mx:ApplicationControlBar>
    
    <mx:DataGrid top="10" bottom="10" left="10" right="10" 
        dataProvider="{ dataCollection }">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="name"/>
            <mx:DataGridColumn headerText="Capacity" dataField="capacity"/>
            <mx:DataGridColumn headerText="Used" dataField="used"/>
            <mx:DataGridColumn headerText="Used" dataField="used">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Canvas>
                                
                            <degrafa:Surface>
                            
                                   <degrafa:fills>
                                    <paint:LinearGradientFill id="redGradient" angle="90">
                                        <paint:GradientStop alpha="1"  color="#FF0000"/>
                                        <paint:GradientStop alpha="1" color="#333333"/>
                                    </paint:LinearGradientFill>
                                </degrafa:fills>
                                
                                <degrafa:GeometryGroup>
                                    <geometry:RoundedRectangle 
                                        fill="{redGradient}"
                                        cornerRadius="2"
                                        width="{ width * ( data.used / data.capacity ) }"
                                        height="{ height }" />
                                </degrafa:GeometryGroup> 
                                
                                <degrafa:filters>
                                    <mx:DropShadowFilter />
                                </degrafa:filters>
                                
                            </degrafa:Surface>
                            
                        </mx:Canvas>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="Free" dataField="free"/>
            <mx:DataGridColumn headerText="Free" dataField="free">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:Canvas>
                                
                            <degrafa:Surface>
                            
                                   <degrafa:fills>
                                    <paint:LinearGradientFill id="greenGradient" angle="90">
                                        <paint:GradientStop alpha="1"  color="#00FF00"/>
                                        <paint:GradientStop alpha="1" color="#333333"/>
                                    </paint:LinearGradientFill>
                                </degrafa:fills>
                                
                                <degrafa:GeometryGroup>
                                    <geometry:RoundedRectangle 
                                        fill="{greenGradient}"
                                        cornerRadius="2"
                                        width="{ width * ( data.free / data.capacity ) }"
                                        height="{ height }" />
                                </degrafa:GeometryGroup> 
                                
                                <degrafa:filters>
                                    <mx:DropShadowFilter />
                                </degrafa:filters>
                                
                            </degrafa:Surface>
                            
                        </mx:Canvas>
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
    
    
    
</mx:Application>

原文见：http://www.insideria.com/2008/03/degrafa-datagrids-visual-displ.html