`

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

 

分享到:
评论

相关推荐

    关于DEGRAFA的简介

    DEGRAFA的核心是SVG解析器和渲染引擎,能够将SVG的XML格式描述转化为实际的2D图形。SVG是一种开放标准的矢量图形语言,支持动态交互和动画,具有跨平台性,能够在多种浏览器和操作系统上显示高质量的图形。通过...

    Degrafa3.1源码

    Degrafa 是一个基于Adobe Flex的图形渲染框架,它允许开发者利用ActionScript 3.0的强大功能来构建矢量图形。它的核心功能包括路径操作、图形组合、形状变形以及复杂的动画效果。通过 Degrafa,开发者可以创建出...

    Degrafa帮助文档

    Degrafa 是一个开源库,它扩展了 Flex 框架,提供了高级图形渲染和编辑功能。它的设计目标是简化矢量图形的编程,让开发者可以像使用传统绘图软件一样自由地创建和操作矢量图形,但这一切都是通过编程来完成的。 2...

    关于Degrafa's Fills简介

    Degrafa's Fills是一个在Flex开发中用于图形渲染的开源库,它为开发者提供了丰富的图形填充效果。这篇博文的作者分享了如何将 Degrafa 的填充功能集成到其他Flex项目中的方法,通过一个名为“sign05.mxml”的示例...

    degrafa 的帮助文档

    flex开发的画图框架Degrafa 近来需在flex画些简单的图形,根据朋友推荐使用了Degrafa,但是官方没有提供离线的文档下载,于是自己制作了一下。 文档的所有版权均属http://www.degrafa.com 详细情况请查看degrafa的...

    Degrafa画矢量曲线

    Degrafa是一款强大的图形绘制库,专用于在JavaFX平台上创建复杂的矢量图形。它提供了一个灵活的声明式模型,使开发者能够轻松地定义和操纵矢量图形,类似于SVG(可缩放矢量图形)标准。这篇博文"Degrafa画矢量曲线...

    Degrafa.CHM

    flex开发的画图框架Degrafa 近来需在flex画些简单的图形,根据朋友推荐使用了Degrafa,但是官方没有提供离线的文档下载,于是自己制作了一下。 文档的所有版权均属http://www.degrafa.com 详细情况请查看degrafa的...

    SvgToDegrafa.rar_SvgToDegrafa_degrafa_flex

    本项目“SvgToDegrafa.rar”是一个将SVG图形转换为 Degrafa 框架可以理解并渲染的示例。 Degrafa 是一个基于Flex的图形库,它扩展了Flex的图形能力,提供了更强大的矢量图形处理和动画功能。通过使用 Degrafa,...

    Degrafa学习一,(含SDK4.0兼容版本及源码,略微有所修改)

    Degrafa是一个图形化开发框架,它主要用于创建2D图形应用程序,特别是在Swing或JavaFX平台上。这个资源包包括了SDK的4.0兼容版本,这意味着你可以利用这个框架来开发与Java SDK 4.0相适应的应用。"含SDK4.0兼容版本...

    degrafa绘图工具 svg操作

    DeGrafa是一款强大的开源绘图工具,专为创建和编辑SVG(Scalable Vector Graphics)图形而设计。SVG是一种基于XML的矢量图像格式,它允许开发者创建清晰、高质量的图形,无论放大多少倍都不会失真,广泛应用于网页...

    Degrafa(Beta3)

    Degrafa是一款强大的图形化开发框架,主要用于创建2D矢量图形和交互式应用程序。它在Beta3版本中提供了一些先进的特性和改进,为开发者带来了更丰富的功能和更好的用户体验。这款开源工具允许开发者通过编程方式设计...

    深入SVG路径~~~在DEGRAFA中使用PATH

    在DEGRAFA中,SVG路径的使用是一个重要的主题,DEGRAFA是一个ActionScript 3.0库,专门用于图形渲染和矢量图形操作。 SVG路径由一系列命令和参数构成,这些命令指示浏览器如何绘制路径。主要的命令包括M(移动到)...

    degrafa源代码

    Degrafa扩展就是在FLEX中增加了对矢量数据的动态处理,包括动态添加,删除和修改,并支持SVG的路径格式数据, 因此只需要对现有的SVG数据进行一些必要的转换(以后会有工具支持,但现在只能手工完成),就可以将SVG...

    一个隐藏式的登录窗口

    使用了“shade”和“degrafa”,这两个是ActionScript和Flex开发中的图形库和框架。 “shade”是一个图形效果库,它提供了丰富的视觉特效,如阴影、渐变、模糊等,可以用来增强用户界面的立体感和动态效果,使登录...

    degrafaFlex4.SWC

    基于Actionscript3.0,强大的矢量图形绘制类库

    flex图形报表控件源代码

    这里是源代码,但需要借助另外的开源框架Degrafa。我用的是Degrafaflex4.swf。 这里我直接将degrafaflex4.swf和birdeye本身自己写的vis打成一个swf文件。即birdeyelib.swf。 做图形报表框架直接用birdeyelib.swf即可...

    JBPM-Side流程设计器架构说明

    Component 视图组件使用了 degrafa 来渲染表现形式。目前缺少一个属性弹出框组件,职责展现和修改节点/连接线属性。 三、Model 模型组件 Model 模型组件是 Xml 流程定义文件解析的结果,本地建模和 jBPM4 的 PVM ...

Global site tag (gtag.js) - Google Analytics