Flex Tree 之 TreeItemRenderer
来源:互联网 发布:淘宝网培训学校 编辑:程序博客网 时间:2024/06/08 10:02
package{import flash.events.MouseEvent;import flash.xml.*;import mx.collections.*;import mx.controls.CheckBox;import mx.controls.Image;import mx.controls.Tree;import mx.controls.listClasses.*;import mx.controls.treeClasses.*;public class CheckTreeRenderer extends TreeItemRenderer { protected var myImage:Image; // set image properties private var imageWidth:Number = 10; private var imageHeight:Number = 10; private var inner:String = "assets/manager.png";protected var myCheckBox:CheckBox;static private var STATE_SCHRODINGER:String = "schrodinger";static private var STATE_CHECKED:String = "checked";static private var STATE_UNCHECKED:String = "unchecked"; public function CheckTreeRenderer () {super();mouseEnabled = false;}/** *创建组件的子对象。此方法是一种高级方法,可在创建 UIComponent 的子类时覆盖。 *可在自身内部创建其它组件或对象的组件称为复合组件。例如,Flex ComboBox 控件实际上包含一个 TextInput 控件(用于定义 ComboBox 的文本区域)和一个 Button 控件(用于定义 ComboBox 箭头)。 *组件实现 createChildren() 方法以在其内部创建子对象(如其它组件)。 *在 createChildren() 方法的覆盖内部,您可以调用 addChild() 方法来添加各个子对象。 *您无需直接调用此方法,Flex 会调用 createChildren() 方法来响应对 addChild() 方法的调用,用以将组件添加到其父项。 */override protected function createChildren():void {super.createChildren();myCheckBox = new CheckBox();//垂直对齐容器中的子项。可能值包括 "top"、"middle" 和 "bottom"。默认值为 "top",myCheckBox.setStyle("verticalAlign", "middle");myCheckBox.addEventListener( MouseEvent.CLICK, checkBoxToggleHandler );addChild(myCheckBox);myImage = new Image(); myImage.source = inner;myImage.addEventListener(MouseEvent.CLICK, imageToggleHandler);myImage.setStyle( "verticalAlign", "middle" );addChild(myImage); } /*** *TreeItemRenderer的data方法实现IDataRenderer 接口用于为具有 data 属性的组件定义接口。 *系统使用 data 属性将要呈现或编辑的数据传递给以下组件:在 list 控件(如 List、HorizontalList、TileList、DataGrid 和 Tree 控件)中的项目渲染器或项目编辑器中使用的组件,或者用作图表中渲染器的组件。 *组件必须实现 IDataRenderer,以便主机组件可以传递此信息。所有 Flex 容器和许多 Flex 组件都实现 IDataRenderer 和 data 属性。 **/override public function set data(value:Object):void {super.data = value;setCheckState (myCheckBox, value, value.@state);if(TreeListData(super.listData).item.@type == 'dimension') { setStyle("fontStyle", 'italic');} else {if (this.parent != null) {//指定叶项目的默认图标。在 MXML 中,可以使用以下语法设置此属性:defaultLeafIcon="@Embed(source='c.jpg');"Tree(this.parent.parent).setStyle("defaultLeafIcon", null); }setStyle("fontStyle", 'normal');} }/** * 绘制对象和/或设置其子项的大小和位置。此方法是一种高级方法,可在创建 UIComponent 的子类时覆盖。 * 您无需直接调用此方法,使用 addChild() 方法将组件添加到容器时,以及调用组件的 invalidateDisplayList() 方法时,Flex 将调用 updateDisplayList() 方法。 **/ override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {super.updateDisplayList(unscaledWidth, unscaledHeight);//super.data是为父组件提供的数据(dataProvider),根据data设置各个组件和图标的横纵坐标 if(super.data) { if (super.icon != null) { myCheckBox.x = super.icon.x; myCheckBox.y = 8; super.icon.x = myCheckBox.x + myCheckBox.width + 17; super.label.x = super.icon.x + super.icon.width + 3;} else { myCheckBox.x = super.label.x; myCheckBox.y = 8; super.label.x = myCheckBox.x + myCheckBox.width + 17;} if (data.@state == STATE_SCHRODINGER) { myImage.x = myCheckBox.x + 3; myImage.y = myCheckBox.y + 4;myImage.width = imageWidth;myImage.height = imageHeight; } else { myImage.x = 0; myImage.y = 0;myImage.width = 0;myImage.height = 0; }} }//设置父节点的状态private function toggleParents (item:Object, tree:Tree, state:String):void {if (item == null) {return;} else {item.@state = state;toggleParents(tree.getParentItem(item), tree, getState(tree, tree.getParentItem(item)));}}//设置子节点的状态private function toggleChildren(item:Object, tree:Tree, state:String):void{if (item == null) {return;} else {//设置项目的选中状态item.@state = state;//ITreeDataDescriptor:提供用于对 Tree 控件显示的数据集合执行分析和添加节点操作的方法的接口。var treeData:ITreeDataDescriptor = tree.dataDescriptor;if (treeData.hasChildren(item)){//ICollectionView: 是数据集合的视图。可以修改该视图以显示根据各种条件排序的数据,或显示在不修改基本数据的情况下经过滤镜筛选后的数据。//通过 IViewCursor,可以访问集合中的项目。可使用 IViewCursor 接口 insert() 和 remove() 方法修改该集合。 //getChildren :提供对子节点的访问,并返回子节点的集合视图var children:ICollectionView = treeData.getChildren(item);//IViewCursor: 定义双向枚举集合视图的接口。此光标提供查找、搜索和标记为书签的功能,还提供修改方法插入和删除。//首次从视图检索光标(通常使用 ICollectionViewcreateCursor() 方法)时,current 属性的值应是该视图中的第一个项目,除非视图为空。 var cursor:IViewCursor = children.createCursor();//遍历集合视图,且递归设置子节点的状态while (!cursor.afterLast) {toggleChildren(cursor.current, tree, state);//将光标移动到集合中的下一个项目。只有成功更新 current 属性,才能引用此新位置上的对象。如果生成的 current 属性有效,则返回 true,否则返回 false(属性值为 afterLast)。 cursor.moveNext();}}}}/** * 获得父节点的当前状态 **/private function getState(tree:Tree, parent:Object):String {//选中、没选中项目的个数,和父节点图片的显示个数var noChecks:int = 0, noUnChecks:int = 0,noCats:int = 0;if (parent != null){var treeData:ITreeDataDescriptor = tree.dataDescriptor;var cursor:IViewCursor = treeData.getChildren(parent).createCursor();while (!cursor.afterLast) {//IViewCursor-->current(): 可以访问位于此光标引用的源集合中的位置的对象。if (cursor.current.@state == STATE_CHECKED){noChecks++;} else if (cursor.current.@state == STATE_UNCHECKED) {noUnChecks++} else {noCats++;}cursor.moveNext();}}if ((noChecks > 0 && noUnChecks > 0) || (noCats > 0)) {//如果有若干子节点被选中,或有图片提示,则设置图片提示return STATE_SCHRODINGER;} else if (noChecks > 0) {//如果所有的子节点都被选中,则父节点为选中状态return STATE_CHECKED;} else {//如果所有的子节点都未被选中,则父节点为未选中状态return STATE_UNCHECKED;}}private function imageToggleHandler(event:MouseEvent):void {myCheckBox.selected = !myCheckBox.selected;checkBoxToggleHandler(event);}//checkBox点击出发的事件处理函数private function checkBoxToggleHandler(event:MouseEvent):void {if (data) {//TreeListData 类定义 listData 属性的数据类型,此属性由 Tree 控件的嵌入式项目渲染器或嵌入式项目编辑器实现。所有嵌入式项目渲染器和嵌入式项目编辑器必须实现 IDropInListItemRenderer 接口,此接口定义了 listData 属性。 var myListData:TreeListData = TreeListData(this.listData);//被点击项目及子项目的数据(此处是xml片段)var selectedNode:Object = myListData.item;//触发事件的目标树var tree:Tree = Tree(myListData.owner);var toggle:Boolean = myCheckBox.selected;//根据父节点设置子节点的选中状态if (toggle){toggleChildren(data, tree, STATE_CHECKED);} else {toggleChildren(data, tree, STATE_UNCHECKED);}//被点击项目及父项目的数据(此处是xml片段)var parent:Object = tree.getParentItem(data);toggleParents(parent, tree, getState(tree, parent));}}/** * 根据数据设置CheckBox的选中状态,在初始化和data被改变时调用 */private function setCheckState (checkBox:CheckBox, value:Object, state:String):void{if (state == STATE_CHECKED){checkBox.selected = true;} else if (state == STATE_UNCHECKED) {checkBox.selected = false;} else if (state == STATE_SCHRODINGER) {checkBox.selected = false;}} }}
xml数据:
<><folder state="unchecked" label="Marketing Collateral" isBranch="true"> <folder state="unchecked" isBranch="true" label="Media, PR, and Communications" > <folder state="unchecked" isBranch="false" label="Article Reprint Disclaimers" /> <folder state="unchecked" isBranch="false" label="Articles Reprints" /> <folder state="unchecked" isBranch="false" label="Interviews and Transcripts" /> <folder state="unchecked" isBranch="false" label="Press Kits" /> <folder state="unchecked" isBranch="false" label="Press Releases" /> <folder state="unchecked" isBranch="false" label="Quick Hits" /> <folder state="unchecked" isBranch="false" label="Rep Talking Points" /> <folder state="unchecked" isBranch="false" label="Special Updates" /> <folder state="unchecked" isBranch="false" label="White Papers" /> </folder> <folder state="unchecked" isBranch="true" label="Forms and Applications" > <folder state="unchecked" isBranch="false" label="Applications" /> <folder state="unchecked" isBranch="false" label="Forms" /> </folder></folder></>
- Flex Tree 之 TreeItemRenderer
- 【Flex CookBook】TEXT组件添加到一个定制的TreeItemRenderer
- flex基础之tree组件的使用
- Flex Tree
- Flex tree
- Flex之DataGrid和Tree控件的数据源XML格式
- Flex之Tree组件(修改图标,加复选框)
- flex Tree中的拖放
- Flex - Tab Tree
- flex tree icons
- Flex Tree组件Demo
- flex tree 默认展开
- Flex tree ItemRender
- FLEX TREE实现
- flex tree 正则 搜索
- flex 实现Tree
- flex tree操作
- flex tree的拖拉
- R525 安装 rhel5.4
- 112
- css中的valign和vertical-align
- 关于域名解析的问题--对话
- Ubuntu建立PHP服务器(apache+php+mysql)
- Flex Tree 之 TreeItemRenderer
- oracle游标的使用
- Use ContentProvider Get Contacts
- 感动那件小事!
- 如何修改FLASH动画
- 【DP】饥饿的牛
- Ext树级联选中父节点和子节点
- PowerPoint2007不能输入中文的问题
- poj 1018