`
牧羊人
  • 浏览: 213565 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flex 异步 tree

    博客分类:
  • flex
阅读更多
例子一
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    
    <mx:Script>
        <![CDATA[
            import flash.utils.Dictionary;
            
            import mx.events.TreeEvent;
            import mx.rpc.AsyncToken;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;
            
            private var dictionary:Dictionary = new Dictionary();
            
            private function itemOpenHandler(event:TreeEvent):void
            {
                var item:Object = event.item;
                if (item && item.@loadFlag == "false")
                {
                    service.url = item.@url;
                    var token:AsyncToken = service.send();
                    dictionary[token] = item;
                }
            }
            
            private function resultHandler(event:ResultEvent):void
            {
                var channel:XML = XML(dictionary[event.token]);
                var result:XML = XML(event.result);
                var items:XMLList = result..item;
                var item:XML = null;
                var node:XML = null;
                channel.@loadFlag = "true";
                delete channel.*;
                for each (item in items)
                {
                    node = <node/>;
                    node.@label = item.title;
                    channel.appendChild(node);
                }
            }
            
            private function faultHandler(event:FaultEvent):void
            {
                var channel:XML = XML(dictionary[event.token]);
                channel.@loadFlag = "true";
                delete channel.*;
            }
            
            private function getLabel(item:Object):String
            {
                var node:XML = XML(item);
                if (node.name().toString() == "item")
                    return node.title;
                else
                    return node.@label;
            }
        ]]>
    </mx:Script>
    
    <mx:XML id="blog">
        <root label="新浪博客">
            <channel label="文化" url="http://rss.sina.com.cn/blog/index/cul.xml" loadFlag="false">
                <node label="加载中..." />
            </channel>
            <channel label="八卦" url="http://rss.sina.com.cn/blog/index/ent.xml" loadFlag="false">
                <node label="加载中..." />
            </channel>
            <channel label="情感" url="http://rss.sina.com.cn/blog/index/feel.xml" loadFlag="false">
                <node label="加载中..." />
            </channel>
            <channel label="观点" url="http://rss.sina.com.cn/blog/index/other.xml" loadFlag="false">
                <node label="加载中..." />
            </channel>
            <channel label="财经" url="http://rss.sina.com.cn/blog/index/stocks.xml" loadFlag="false">
                <node label="加载中..." />
            </channel>
        </root>
    </mx:XML>
    
    <mx:HTTPService id="service" concurrency="multiple" resultFormat="xml" 
        result="resultHandler(event)" fault="faultHandler(event)" />
    
    <mx:Tree id="tree" width="400" height="500" 
        dataProvider="{blog}" labelField="@label" 
        itemOpen="itemOpenHandler(event)" />
    
</mx:Application>


例子二
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%"
	 backgroundColor="#FFFFFF" creationComplete="vsstree.send();initEvent()">
 	<mx:HTTPService id="vsstree" showBusyCursor="true" method="POST" url="xml/tree.xml" useProxy="false" result="httpResult(event)" resultFormat="e4x">
    </mx:HTTPService>
	
	<mx:Script>
		<![CDATA[
			import action.myevent.EventNames;
			import action.myevent.CustomEvent;
			import mx.modules.IModuleInfo;
			import mx.modules.Module;
			import mx.modules.ModuleManager;
			import model.loginsuccess;
			import mx.core.Application;
			import mx.controls.Text;
			import mx.events.TreeEvent;
			import mx.collections.ArrayCollection;
			import mx.collections.ICollectionView;
			import mx.controls.Alert;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
		    private var listtree:XML;
		    private var selectedNode:XML;
		    private var catalogsid:String;
		    private function httpResult(event:ResultEvent):void
		    {
		        listtree= event.result as XML;
		    }
		    
		    //点击树触发事件:1、右侧显示当前目录人员权限情况。2、可能要找出下级目录
		    private function treeChange(e:Event):void{
		    	selectedNode = Tree(e.target).selectedItem as XML;
		    	catalogsid = selectedNode.attribute("id");
		    	CustomEvent.dispatcher.dispatchEvent(new CustomEvent(EventNames.CATALOGROW,catalogsid));
		    }
		    
		    //点击树项目取到其下一级子目录
		    private function initEvent():void{
				CustomEvent.dispatcher.addEventListener(EventNames.CATALOGROW,gettree);
			}
		    
		    private function gettree(e:CustomEvent):void{
				catalogsid = e.data as String;
				remotetree.getTree(catalogsid);
			}
		    
		    private function getResult(e:ResultEvent):void{
		    	//得到后台返回的XML字符串
                var str:String = e.result as String;
		    	if(str!=null&&str!=""){
		    		var child:XML = new XML(str);
		    	/**
		    	 * 没点击过的需要appendChild,否则不需要。不然每点一次都会增加子目录
		    	 * ??????????????碰到的问题:selectedNode.appendChild(child)增加的时候本级目录下面会多出一级(跟本级目录一样)!!!
		    	 * ??????????????因为后台返回的是一个符合XML对象的字符串,一定要包含根节点(就是本级目录),要想办法把这个本级目录去掉或者不显示
		    	 * >>>>>>>>>>>>>>解决的办法:将返回的XML对象加在本级目录的父级目录上,再把本级目录删掉就OK了
		    	 * 名词解释:本级目录-->点击的目录,目录-->节点
		    	 */
			    	if(selectedNode.children()==null||selectedNode.children().length()==0){
			    		//点击不是root目录的目录
			    		if(selectedNode.parent()!=null){
			    			/**
			    			 * 在本级目录的上级添加后台返回的数据,此时效果相当于本级目录的同级增加了一个目录(后台返回的数据)
			    			 * addChildAt参数说明:
			    			 * 1、要增加子目录的位置,即子目录放在哪个目录下面	类型:Object
			    			 * 2、要增加的子目录	类型:XML
			    			 * 3、增加的子目录在父目录中的位置索引		类型:int
			    			 * 4、包含此节点的整个集合  		类型:Object
			    			 */
			    			mytree.dataDescriptor.addChildAt(selectedNode.parent(),child,selectedNode.childIndex(),null);
			    			//把点击的目录删掉
			    			delete selectedNode.parent().children()[selectedNode.childIndex()];
			    		}else{
			    			//点击root目录,直接appendChild然后不显示root就达到我们想要的效果了
			    			selectedNode.appendChild(child);
			    			mytree.showRoot = false;
			    		}
			    	}
		    	}
            }
		    
		    //树上显示其有几个子目录
		    private function tree_labelFunc(item:XML):String { 
                var children:ICollectionView; 
                var suffix:String = ""; 
                if (mytree.dataDescriptor.isBranch(item)) { 
                    children = mytree.dataDescriptor.getChildren(item); 
                    suffix = " (" + children.length + ")"; 
                } 
                return item[mytree.labelField] + suffix; 
            }
            
		]]>
	</mx:Script>
	<mx:RemoteObject id="remotetree" destination="Tree" result="getResult(event)"/>
	<mx:Canvas dropShadowEnabled="false" width="100%" height="100%">
		<mx:Tree id="mytree" width="100%" height="100%" 
					dataProvider="{listtree}" 
					change="treeChange(event)"
				    labelField="@label"
				    labelFunction="tree_labelFunc"
				    folderClosedIcon="@Embed('assets/image/foldericon.gif')"
				    folderOpenIcon="@Embed('assets/image/openfoldericon.gif')"
				    defaultLeafIcon="@Embed('assets/image/foldericon.gif')"/> 
	</mx:Canvas>
	
</mx:Canvas>
分享到:
评论

相关推荐

    flex 异步加载tree

    根据给定的信息,我们可以深入探讨Flex中的异步加载Tree组件的相关知识点。 ### 一、Flex与AsyncTree组件 #### 1. Flex简介 Flex是一种开源的框架,用于构建跨平台的桌面应用程序和移动应用程序。它提供了强大的...

    flex tree 教程二

    Flex Tree是Adobe Flex框架中的一个组件,用于展示层次结构数据,如文件系统、组织结构或任何其他具有层级关系的数据。本教程将深入讲解Flex Tree组件的使用方法和关键概念,帮助开发者更好地理解和应用这一功能强大...

    Flex Tree 异步加载数据及分屏小工具

    综上所述,"Flex Tree 异步加载数据及分屏小工具"涉及的技术点主要包括Flex组件的使用、异步加载机制、数据提供者管理、事件驱动编程、分页策略以及源码分析和优化。这些知识对于构建高效、响应式的Flex应用程序至关...

    flex4Tree组件分层显示数据示例

    在Flex4中,Tree组件还支持异步数据加载,这对于处理大量数据非常有用。通过实现`IHierarchicalData`接口和` IHierarchicaldataProvider`接口,可以在需要时动态加载子节点,提高应用性能。 在提供的源码中,你可能...

    flex tree控件

    此外,通过缓存节点状态和异步加载子节点,也可以提高Tree控件的性能。 7. 样式和主题: Flex允许开发者通过CSS样式表自定义Tree控件的外观,包括字体、颜色、背景等。此外,可以使用预定义的主题或创建自定义主题...

    flex tree的简单使用

    在Flex编程中,Tree组件是一种常用的用户界面元素,它用于展示层次结构的数据。"flex tree的简单使用"这个主题将引导我们了解如何在Flex应用程序中有效地利用Tree组件来展示和操作树状数据。 首先,我们要知道Tree...

    FLEX ——完美的 TREE

    这个标题“FLEX ——完美的 TREE”提到了FLEX在实现一个特定功能——TREE组件方面的卓越表现。TREE组件是FLEX中用于展示层次结构数据的关键元素,它允许用户以树形结构查看和操作数据,这在许多场景下都非常有用,...

    flex Tree 相册 json格式数据

    在IT行业中,`Flex Tree`通常指的是Adobe Flex框架中的一个组件,它用于显示层次结构的数据,比如文件系统、组织结构等。在这个场景中,我们提到的`Flex Tree`与`相册`结合,可能是在讨论如何用树形结构来展示照片...

    flex 动态树,异步树

    动态树和异步树是Flex在构建用户界面时经常会用到的数据结构,特别是在处理大量数据时,以提高性能和用户体验。以下是对这两个概念的详细解释: 1. Flex中的动态树(Dynamic Tree): 动态树是一种可以实时更新和...

    动态绑定XML,实现flex树控件的绑定

    首先,让我们了解Flex中的树控件(Tree)和XML数据源。在Flex中,Tree控件用于显示层次结构的数据,它可以是多级别的,非常适合用来展示目录结构或组织结构等。而XML作为一种轻量级的数据交换格式,能够简洁地表示...

    自己写的 flex 的异步树和分页grid组件。

    解析数据用了flex的JSON包。 这段代码放在要显示树的canvas下 rootLable="根节点" //树的根节点名 destination="flexService" //remoteObject 的destination remoteServer="true" id="asyntree1" ...

    向Tree空间添加删除XML数据节点_Flex4

    本篇文章将重点讲解如何在Flex4中向Tree组件添加和删除XML数据节点。 Flex4是一款强大的开发工具,它基于ActionScript 3.0和Flash Player或Adobe AIR运行时,用于创建富互联网应用程序(RIA)。Tree组件是Flex中...

    Flex从入门到实践——源代码(2,5,6,7章)

    此章节深入讲解了Flex中的组件库,包括基本组件如Button、Label、TextInput,以及更复杂的组件如DataGrid、Tree等。你会学习如何在界面中添加、布局组件,以及如何自定义组件以满足特定需求。此外,还会涉及数据绑定...

    flex的组织结构图组件

    在Flex中,这种组件通常通过Tree或HierarchicalData类来实现,可以自定义节点的样式和交互行为。 描述中的“flex的组织结构图组件”进一步强调了这个组件是Flex框架的一个重要部分,它允许开发者创建可视化表示层次...

    从头开发Flex树遇到的问题

    在开发Flex应用程序时,我们经常会遇到构建自定义组件,如“树形结构”(Tree)的问题。这篇博客文章“从头开发Flex树遇到的问题”很可能讲述了作者在创建自定义Flex Tree组件时所面临的挑战和解决方案。Flex是Adobe...

    flex demos

    在“flex demos”这个压缩包中,我们能看到一系列针对不同应用场景的示例,如Alarm Demos、Network Demos和Tree Demos,这些都是开发者学习Flex编程的宝贵资源。 1. **Alarm Demos**: Alarm Demos通常涉及到时间...

    Flex从入门到精通

    1. **HTTP服务**:使用Flex的HTTPService类可以轻松实现与服务器的异步数据交换。 2. **Web服务**:Flex也支持与SOAP Web服务进行交互。 3. **RESTful API**:随着RESTful API的流行,Flex同样提供了相应的支持,...

    Flex开发实例.pdf

    - 通过Ajax技术实现Flex应用与服务器的异步数据交换,提升用户体验。 综上所述,Flex不仅是一种功能强大的Web开发框架,还支持广泛的UI组件和高级功能,如GIS集成等。开发者可以根据实际需求灵活运用这些技术和...

Global site tag (gtag.js) - Google Analytics