DGrid
2010-07-30 17:14 宝宝合凤凰 阅读(392) 评论(0) 编辑 收藏 举报在flash as3中的 datagrid中放入其它组件
日期：2009-04-29 | 分类：flash学习笔记
版权声明：转载时请以超链接形式标明文章原始出处和作者信息及本声明
http://crazyrabbit.blogbus.com/logs/38679206.html
大家都知道在flash as3中使用datagrid显示数据比较方便，但是怎么在datagrid中怎么插入其他组件呢，
本人谷歌了好长时间终于在官方网站中找到了这么一篇文章
大致是在datagrid的一个单元格中用uiloader组件显示图片，
// Import the required component classes.
import fl.controls.DataGrid;
import fl.controls.dataGridClasses.DataGridColumn;
import fl.data.DataProvider;
/* Create and populate a new DataProvider object. Note that three of the items
in the data provider refer to externally-loaded images, whereas the last two
items refer to symbol linkages in the library. */
var dp:DataProvider = new DataProvider();
dp.addItem({data:"http://www.helpexamples.com/flash/images/image1.jpg", title:"image1.jpg"});
dp.addItem({data:"http://www.helpexamples.com/flash/images/image2.jpg", title:"image2.jpg"});
dp.addItem({data:"http://www.helpexamples.com/flash/images/image3.jpg", title:"image3.jpg"});
dp.addItem({data:"Bear", title:"Bear.jpg"});
dp.addItem({data:"Lion", title:"Lion.jpg"});
// Create a new DataGridColumn object, and specify a custom cell renderer.
var dataCol:DataGridColumn = new DataGridColumn("data");
dataCol.cellRenderer = LoaderCellRenderer;
// Create a new DataGridColumn object.
var titleCol:DataGridColumn = new DataGridColumn("title");
/* Create a new DataGrid component instance, add the two DataGridColumn
objects created earlier, define the data provider and add the instance
to the display list. */
var myDataGrid:DataGrid = new DataGrid();
myDataGrid.addColumn(dataCol);
myDataGrid.addColumn(titleCol);
myDataGrid.dataProvider = dp;
myDataGrid.rowHeight = 64;
myDataGrid.width = 200;
myDataGrid.rowCount = dp.length - 1;
myDataGrid.move(10, 10);
addChild(myDataGrid);
LoaderCellRenderer类：
package {
// Import the required component classes.
import fl.containers.UILoader;
import fl.controls.listClasses.ICellRenderer;
import fl.controls.listClasses.ListData;
import fl.core.InvalidationType;
import fl.data.DataProvider;
import flash.events.Event;
/**
* This class creates a custom cell renderer which displays an image in a cell.
* Make sure the class is marked "public" and in the case of our custom cell renderer,
* extends the UILoader class and implements the ICellRenderer interface.
*/
public class LoaderCellRenderer extends UILoader implements ICellRenderer {
protected var _data:Object;
protected var _listData:ListData;
protected var _selected:Boolean;
/**
* Constructor.
*/
public function LoaderCellRenderer():void {
super();
}
/**
* Gets or sets the cell's internal _data property.
*/
public function get data():Object {
return _data;
}
/**
* @private (setter)
*/
public function set data(value:Object):void {
_data = value;
source = value.data;
}
/**
* Gets or sets the cell's internal _listData property.
*/
public function get listData():ListData {
return _listData;
}
/**
* @private (setter)
*/
public function set listData(value:ListData):void {
_listData = value;
invalidate(InvalidationType.DATA);
invalidate(InvalidationType.STATE);
}
/**
* Gets or sets the cell's internal _selected property.
*/
public function get selected():Boolean {
return _selected;
}
/**
* @private (setter)
*/
public function set selected(value:Boolean):void {
_selected = value;
invalidate(InvalidationType.STATE);
}
/**
* Sets the internal mouse state.
*/
public function setMouseState(state:String):void {
}
}
}
DataGrid组件在网络应用程序中占有重要的位置,它能够将数据库中的数据以表格的形式呈现出来,并保持原有结构.同时,充许用户在客户端对数据进行排序。更可以让他们直接修改数据。
要将数据传到DataGrid组件中，支持的数据类型有两种：
·对象数组（Array）
·Recordset对象。
DataProvider API通常是“列表”式组件支持的做法，所以，支持数组是理所当然的。
通过DataProvider API将数据传到DataGrid里，有四种做法：
一、直接利用DataProvider API。
二、XML；
三、DataHolder组件；
四、DataSet组件。
这节主要分析第一种“直接利用DataProvider API”。
拖动DataGrid组件到场景中。（Flash Professional版才有DataGrid组件），命名“my_DataGrid”。
添加AS帧：//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com/
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
//定义一个新的数组
var my_Array:Array=new Array();
my_Array.addItem({name:"Taoshaw", phone:3451245, icq:8286659, software:"Flash", member:true});
my_Array.addItem({name:"Kyle", phone:87871245, icq:660000, software:"Dreamweaver", member:true});
my_Array.addItem({name:"Gary", phone:1472583, icq:852741, software:"Director", member:true});
my_Array.addItem({name:"Elanie", phone:5451125, icq:51256, software:"Fireworks", member:false});
my_Array.addItem({name:"monty", phone:12345678, icq:100009, software:"ColdFusion", member:false});
my_Array.addItem({name:"Francis", phone:22224444, software:"Breeze", member:false});
//设置数据源
my_DataGrid.dataProvider=my_Array;
//如果要修改上面的列表标题，请添加如下代码：
var my_ArrayA:Array = ["姓名", "电话", "QQ", "使用软件", "是否会员"];
my_DataGrid.vScrollPolicy="auto";
for (var i = 0; i<my_ArrayA.length; i++) {
my_DataGrid.getColumnAt(i).headerText = my_ArrayA[i];
}
//AD
ad_text.border = 0;
ad_text.html = true;
ad_text.htmlText = "<a href='http://www.taoshaw.com',target='_blank'>淘沙网原创教程系列：http://www.taoshaw.com</a>";
//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com/
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//演示：
http://www.taoshaw.com/taoshaw/study/DataGrid/DataGrid_1.swf
文章来自: 闪无忧(http://www.5uflash.com/) 详文参考：http://www.5uflash.com/flashjiaocheng/Flashzujianxuexi/3423.html
上一章主要理解了直接运用DataProvider API将数据添加进DataGrid组件中，这节深入一下。通过加载XML来产生数据。通过XML来产生数据，有一个缺陷。就是只适合少量的，不会频繁更新的数据项目。而如果要使用一些更新频繁的数据内容是，比如学生成绩表这样的情况时，就需要使用ASP或者PHP来调用数据库，再生成XML。
在场景中添加DataGrid组件。实例为“my_DataGrid”。
新建一XML文件。
<?xml version="1.0" encoding="UTF-8" ?>
<member>
<member name="Taoshaw" phone="3451245" icq="8286659" software="Flash" member="true" />
<member name="Kyle" phone="87871245" icq="660000" software="Dreamweaver" member="true" />
<member name="Gary" phone="1472583" icq="852741" software="Director" member="true" />
<member name="Elanie" phone="5451125" icq="51256" software="Fireworks" member="false" />
<member name="monty" phone="12345678" icq="100009" software="ColdFusion" member="false" />
<member name="Francis" phone="22224444" software="Breeze" member="false" />
</member>
保存为“MY_Data.xml”。
在AS帧中添加如下代码：
//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com/
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//
System.useCodepage = true;
var my_XML:XML = new XML();
my_XML.ignoreWhite = true;
//此处加载路径，改为你自己的合适路径即可。
my_XML.load("MY_Data.xml");
my_XML.onLoad = function(ok:Boolean) {
if (ok) {
var my_Arr:Array = new Array();
var my_Len:Number = this.firstChild.childNodes.length;
var node:XMLNode;
for (var i:Number = 0; i<my_Len; i++) {
node = this.firstChild.childNodes[i];
my_Arr.addItem({name:node.attributes.name, phone:node.attributes.phone, icq:node.attributes.icq, software:node.attributes.software, member:node.attributes.member});
}
my_DataGrid.dataProvider = my_Arr;
//定义用于显示顶部标题的数组
var my_ArrayA:Array = ["姓名", "电话", "QQ", "使用软件", "是否会员"];
my_DataGrid.vScrollPolicy = "auto";
for (var i = 0; i<my_ArrayA.length; i++) {
my_DataGrid.getColumnAt(i).headerText = my_ArrayA[i];
}
} else {
}
};
//AD
ad_text.border = 0;
ad_text.html = true;
ad_text.htmlText = "<a href='http://www.taoshaw.com',target='_blank'>淘沙网原创教程系列：http://www.taoshaw.com</a>";
//================版权声明开始================//
//★淘沙网：http://www.taoshaw.com/
//★淘沙网所有教程欢迎转载。不过请转载时注明出处。谢谢合作。
//================版权声明结束================//演示：
http://www.taoshaw.com/taoshaw/study/DataGrid/DataGrid_2.swf
文章来自: 闪无忧(http://www.5uflash.com/) 详文参考：http://www.5uflash.com/flashjiaocheng/Flashzujianxuexi/3424.html
-----------------------
某些组件在用户的操作过程中，会出现一些很酷的动画效果。比如，使用TREE制作下拉菜单，或者ComboBox制作下拉菜单时，下拉列表很酷的滑出来。这种效果，主要是借助Tween类或者easing类完成的。一般的效果分为三类：
A、Open:使用组件打开子部分动画效果时，这类效果支持的组件包括：ComboBox、Accordion、Tree；
B、Popup：使用组件弹出子部分动画效果时，支持组件MenuBar；
C、Selection:当组件里的项目被选中中，出现一些颜色标示动画效果，支持组件：ComboBox、DataGrid、List、Tree。
对组件动画效果的修改也分为三类：全局修改、组件类修改、实例化修改。（随后有详细介绍）
[heart] 关于Open类动画效果，可有两个属性：
一、openDuration：动画持续时间，单位为毫秒，数值越小，动画越快。
二、openEasing:动画效果类，使用mx.transition.easing包里的类，包括Back、Bounce、Elastic、None、Regular、Strong，这些动画效果要配合Tween类，以及淡出淡入函数来实现。
[heart] 修改弹出类动画效果（Popup），只有一个属性：
poputDuration：动画持续时间，与openEasing相同。因为这类效果一般只支持MenuBar组件。所以只有下拉菜单的时候。弹出时间的长短这一属性。大家一定要记住哦。
[heart] 修改选择颜色标示（Selection）类动画效果，可以有以下两个属性：
selectionDuration：动画持续时间，跟openEasing相同；
selectionEasing：动画效果类，与openEasing相同。
例如：修改ComboBox组件下拉列表会修改动画效果，动画效果在1秒内完成：
_global.styles.ComboBox.setStyles("openDuration",1000)
//设置打开类动画效果
_global.styles.ComboBox.setStyles("openEasing",mx.transitions.easing.Elastic.easeOut);
当然，这上面的后面一段，可能有些复杂。对吧。下面就来简化一下：
import mx.transitions.easing.*;
_global.styles.ComboBox.setStyles("openDuration",1000);
_global.sytles.ComboBox.setStyles("openEasing",Elastic.easeOut);
下面，再举一个修改List组件颜色标示动画效果：
import mx.transitions.easing.*;
_global.styles.ScrollSelectList.setStyle("selectionDruation",1000);
_global.styles.ScrollSelectList.setStyle("selectionEasing",Elastic.easeOut)
备注：ComboBox、DataGrid、List、MenuBar里的Menu和Tree组件都是继承ScrooSelectList类，所以，如果要改变颜色标示动画效果。就需要直接修改ScrooSelectList的样式。不过，如果FLA里同时有几个这类的组件。全部都会受到影响的。如果只想修改List组件，就要利用组件类修改的方法。大家如果对easing类不太熟悉。下面举一个例子：
easing 包提供了的六个用于控制缓动的类：
Back 一次在一端或两端扩展到过渡范围之外以提供轻微的溢出效果。
Bounce 完全在过渡范围的一端或两端内提供弹跳效果。弹跳次数与持续时间有关：持续时间越长，弹跳次数越多。
Elastic 提供一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。
None 提供从开始到结尾的无任何减速或加速效果的相同的运动。该过渡通常也称为线性过渡。
Regular 在加速效果、减速效果或这两种效果的一端或两端提供更慢的运动。
Strong 在一端或两端提供很慢的运动。此效果类似于 Regular，但更为显著。
easing 包的三个缓动方法：
easeIn 在过渡的开始提供缓动效果。
easeOut 在过渡的结尾提供缓动效果。
easeInOut 在过渡的开始和结尾提供缓动效果。
先来看看Open这种动画效果演示：
下面看看代码：
//导入easing类
import mx.transitions.easing.*;
//设置全局组件样式
_global.styles.ComboBox.setStyle("openDuration", 2000);
_global.styles.ComboBox.setStyle("openEasing", Elastic.easeOut);
//设置个别组件样式
my_ComboBox1.setStyle("openDuration", 250);
//取消my_ComboBox1的动画效果
my_ComboBox1.setStyle("openEasing", null);
这里，就用到了全局定义，以及局定义。也就是实例修改。实例修改的时候。只需要单独将需要设置样式的组件赋加上函数。
如上面所示，实例修改的语法：
组件实例.setStyle("属性",参数)
example:
import mx.transitions.easing.*;
my_ComboBox.setStyle("openEasing",Elastic.easeOut)
大家有不明白的地方，可以留言。呵呵...写得比较简单，大家将就着看哟...
