5.7.在Tree控件中使用复杂数据对象

5.7.1问题
为Tree 控件传递复杂数据,并使用Tree 适当地解析它们
5.7.2解决方法
在一个类中实现ITreeDataDescriptor 接口,并该类的新数据描述符中设置一个示例对象给Tree 中dataDescriptor 属性,
5.7.3讨论
使用一个对象和Tree 一起,将对象传递给Tree 来实现ITreeDataDescriptor 以解析数据并返回与数据中的对像关系相关的正确信息,XML 数据很容易将自己达到这个目的,但是复杂数据对象可以和为Tree 定义关系的对象一起被适当的使用.

下面的这个例子, ComplexDataType,是一个典型的复杂数据类型:
+展开
-ActionScript
package oreilly.cookbook {
import flash.events.Event;
import flash.events.EventDispatcher;
import flash.events.IEventDispatcher;
public class ComplexDataType extends EventDispatcher {
public static const NAME_CHANGED:String = "nameChanged" ;
public static const OFFICE_CHANGED:String = "officeChanged" ;
public static const RECORD_CHANGED:String = "recordChanged" ;
private var _name:Name;
private var _office:Office;
private var _label:String;
public function ComplexDataType(target:IEventDispatcher=null ) {
super(target);
}
[Bindable(RECORD_CHANGED)]
public function set label(value:String):void {
_label = value;
dispatchEvent(newEvent(RECORD_CHANGED));
}
public function  get label():String { return _label; }
[Bindable(NAME_CHANGED)]
public function set name(value:Name):void {
_name = value;
dispatchEvent(newEvent(NAME_CHANGED));
}
public function get name():Name { return _name; }
[Bindable(OFFICE_CHANGED)]
public function set office(value:Office):void {
_office = value;
dispatchEvent(newEvent(OFFICE_CHANGED));
}
public function get office():Office { return _office; }
}
}


Office 和Name 对象都是由Office 对象的名字和地址组成的简单值对象,和firstName,lastName 属性的Name 对象。没有一个ITreeDataDescriptor 对象来描述ComplexDataType,Office 和Name 所有属性之间的关系,Tree 将不能完全显示这些对象的Array 和ArrayCollection,而将显示Array 中不能使扩展的两个简单对象。

ITreeDataDescriptor 接口定义了以下数据:

addChildAt(parent:Object, newChild:Object, index:int, model:Object =null):Boolean
这个方法插入了一个新的对象到结构中,并决定新加对象放在数据结构中的什么位置.

getChildren(node:Object, model:Object = null):ICollectionView

对于所有的结点,这个方法决定这个结点或对象是否有孩子结点可以显示,如果有孩子结点,该方法将它们返回到CollectionView ,如果没有,则返回空.

getData(node:Object, model:Object = null):Object
这个方法返回给定结点的所有数据.

hasChildren(node:Object, model:Object = null):Boolean
这个方法决定该结点是否有孩子结点并返回一个布尔值.

isBranch(node:Object, model:Object = null):Boolean
这个方法测试该结点是否是最终结点,并判断其孩子结点是否能被显示.

removeChildAt(parent:Object, child:Object, index:int, model:Object =null):Boolean
这个方法从结构中移除一个对象并决定数据结构中结点被移除后将会发生什么

ComplexDataType 的数据描述符正确执行如下:
+展开
-ActionScript
package oreilly.cookbook {
import mx.collections.ArrayCollection;
import mx.collections.ICollectionView;
import mx.controls.treeClasses.ITreeDataDescriptor;
public class ComplexDataCollection implements ITreeDataDescriptor {
public function getChildren(node:Object,model:Object=null):ICollectionView{
var col:ArrayCollection;
if(node is Office){
col = newArrayCollection([node.officeAddress,node.officeName]);
return col;
}
if (node is Name){
col = new ArrayCollection([node.firstName, node.lastName]);
return col;
}
if (node is ComplexDataType){
col = new ArrayCollection([node.office, node.name]);
return col;
}
return null ;
}
public function hasChildren(node:Object, model:Object=null ):Boolean {
if (node is Office){
if (node.officeAddress != "" && node.officeName != "" ){
return true ;
else {
return false ;
}
}
if (node is Name){
if (node.firstName != "" && node.firstName != "" ){
return true ;
else { return false ; }
}
if (node is ComplexDataType){
if (node.office != null && node.name != null ) {
return true ;
else { return false ; }
}
return false ;
}
public function isBranch(node:Object, model:Object=null ):Boolean {
if (node is Office){
if (node.officeAddress != "" && node.officeName != "" ){
return true ;
else {
return false ;
}
}
if (node is Name) {
if (node.firstName != "" && node.firstName != "" ){
return true ;
else {
return false ;
}
}
if (node is ComplexDataType) {
if (node.office != null && node.name != null ) {
return true ;
else { return false ;
}
}
return true ;
}
public function getData(node:Object, model:Object=null ):Object {
if (node is Office) {
return {children:{label:node.officeName, label:node.officeAddress}};
}
if (node is Name) {
return {children:{label:node.firstName, label:node.lastName}};
}
if (node is ComplexDataType){
return {children:{label:node.office, label:node.name}};
}
return null ;
}
public function addChildAt(parent:Object, newChild:Object, index:int,model:Object=null):Boolean {
return false ;}
public function removeChildAt(parent:Object, child:Object, index:int,model:Object=null):Boolean {
return false ;
}
}
}

使用数据描述符并使Tree 控件完全显示ComplexDataTypes 的数组,简单地设置一个之前代码中说到的ComplexDataCollection 类的实例给Tree 的dataDescriptor 属性:
+展开
-ActionScript
dataDescriptor="{new ComplexDataCollection()}"

完整代码如下:
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxmlwidth="400height="300creationComplete="initCmp()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
private var dataProv:ArrayCollection;
private function initCmp():void {
var compData:ComplexDataType = new ComplexDataType();
compData.label = "13";
var _name:Name = new Name();
_name.firstName = "Joe" ;
_name.lastName = "Smith" ;
compData.name = _name;
var office:Office = new Office();
office.officeAddress = "544 Happy St. Anytown NY 01092" ;
office.officeName = "Happy Town Branch" ;
compData.office = office;
var compData2:ComplexDataType = new ComplexDataType();
compData2.label = "328" ;
var _name2:Name = new Name();
_name2.firstName = "Jane" ;
_name2.lastName = "Doe" ;
compData2.name = _name2;
var office2:Office = new Office();
office2.officeAddress = "544 Happy St. Anytown NY 01092" ;
office2.officeName = "Happy Town Branch" ;
compData2.office = office2;
dataProv = new ArrayCollection([compData, compData2]);
}

]]>
</mx:Script>
<mx:Tree dataDescriptor="{new ComplexDataCollection()}"
dataProvider="{dataProv}labelField="labelwidth="300"/>

</mx:Canvas>

加支付宝好友偷能量挖...


评论(0)网络
阅读(151)喜欢(0)flash/flex/fcs/AIR