JavaCrazyer
- 浏览: 3009216 次
- 性别:
- 来自: 河南
-
文章分类
- 全部博客 (340)
- Java综合 (26)
- 程序人生 (53)
- RIA-ExtJS专栏 (18)
- RIA-mxGraph专栏 (4)
- RIA-Flex4专栏 (43)
- 框架-Spring专栏 (16)
- 框架-持久化专栏 (22)
- 框架-Struts2专栏 (11)
- 框架-Struts专栏 (12)
- SQL/NOSQL (12)
- 报表/图表 (2)
- 工作流 (5)
- XML专栏 (4)
- 日常报错解决方案 (5)
- Web前端-综合 (12)
- Web/JSP (14)
- Web前端-ajax专栏 (14)
- Web前端-JQuery专栏 (9)
- IDE技巧 (6)
- FILE/IO (14)
- 远程服务调用 (2)
- SSO单点登录 (2)
- 资源分享 (22)
- 云计算 (1)
- 项目管理 (3)
- php专栏 (1)
- Python专栏 (2)
- Linux (1)
- 缓存系统 (1)
- 队列服务器 (1)
- 网络编程 (0)
- Node.js (1)
最新评论
-
hui1989106a：
我的也不能解压，360和好压都试了，都不行
《Spring in Action》完整中文版分享下载 -
temotemo：
这些example有些过时了，官方建议使用HBase-1.0 ...
Java操作Hbase进行建表、删表以及对数据进行增删改查，条件查询 -
zy8102：
非常感谢~
HeadFirst系列之七：《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102：
重命名了一下搞定了
HeadFirst系列之七：《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102：
为什么下载以后老解压不了呢？
HeadFirst系列之七：《深入浅出SQL》原版高清PDF电子书分享下载
这次要说的是Flex的树组件的拖动效果，从树组件拖动到其他组件如List,DataGrid或者从其他组件拖动到Tree组件中,其实主要就是处理drag相关事件
第一：从Tree到List
示例一
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XML id="myData">
<data>
<item label="ActionScript">
<item label="Flash" />
<item label="Flex" />
</item>
<item label="Mirage">
</item>
<item label="JavaScript"/>
</data>
</fx:XML>
<fx:XML id="copyData">
<data>
<item label="JavaScript"/>
</data>
</fx:XML>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Button;
import mx.core.IUIComponent;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
//拖动对象进入时
private function onDragOver( event:DragEvent ) : void
{
var dropTarget:Tree = Tree(event.currentTarget);
var r:int = dropTarget.calculateDropIndex(event);
lbl.text = '当前位置：'+r.toString();//哪一个节点在鼠标下并给出相应信息
tree2.selectedIndex = r; //显示位置
var node:XML = sourceTree.selectedItem as XML;
lbl2.text = '当前的拖动对象是:'+node.@label;//拖动对象的名字
if( node.@label == "ActionScript" ) {
DragManager.showFeedback(DragManager.NONE);
return;
}
// 键盘控制
if (event.ctrlKey)
DragManager.showFeedback(DragManager.COPY);//复制
else if (event.shiftKey)
DragManager.showFeedback(DragManager.LINK);//剪切
else {
DragManager.showFeedback(DragManager.MOVE);//移动
}
}
//拖动对象被抛出后
private function onDragDrop( event:DragEvent ) : void
{
// var ds:DragSource = event.dragSource;
var dropTarget:Tree = Tree(event.currentTarget);
// retrieve the data associated with the "items" format.
//var items:Array = ds.dataForFormat("items") as Array;
var r:int = tree2.calculateDropIndex(event);
tree2.selectedIndex = r;//当拖放完成后选定相应的节点
var node:XML = tree2.selectedItem as XML;
var p:*;
//tree2.dataDescriptor.hasChildren(node)判断有没有子节点,如果有就返回true
if( tree2.dataDescriptor.hasChildren(node) ) {
p = node;
r = 0;
trace('有子节点');
} else {
p = node.parent();
trace('没有子节点');
}
// taking all of the items in the DragSouce, insert them into the
// tree using parent p.
// for(var i:Number=0; i < items.length; i++) {
// var insert:XML = <node/>;
// insert.@label = items[i];
// insert.@type = "restaurant";
// tree2.dataDescriptor.addChildAt(p, insert, r+i);
// }
}
private function onDragComplete(event:DragEvent) : void
{
trace('stop');
tree2.selectedIndex = 0;
}
]]>
</fx:Script>
<mx:Label text="Label" id="lbl" x="439" y="120"/>
<mx:Tree dropEnabled="true" dragEnabled="true" allowMultipleSelection="true" id="sourceTree"
dataProvider="{myData.item}" labelField="@label" x="114" y="146"/>
<mx:Tree dropEnabled="true" id="tree2" dataProvider="{copyData.item}" labelField="@label"
dragOver="onDragOver(event)" dragDrop="onDragDrop(event)" dragComplete="onDragComplete(event)" x="382" y="146"/>
<mx:Label x="382" y="94" text="Label" width="274" id="lbl2" height="29"/>
<mx:Label x="218" y="62" text="Tree与Tree之间的拖动" width="139" height="19"/>
</s:Application>
示例二
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<!-- 这里定义班组树的结构和内容 -->
<fx:XMLList id="treeData">
<node label="Mail Box">
<node label="工区1">
<node label="工地1">
<node label="班组1.1" data="111"/>
<node label="班组1.2"/>
</node>
<node label="工地2">
<node label="班组2.1"/>
<node label="班组2.2"/>
</node>
<node label="工地3">
<node label="班组3.1"/>
<node label="班组3.2"/>
</node>
</node>
<node label="工区2">
<node label="Professional"/>
<node label="Personal"/>
</node>
</node>
</fx:XMLList>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Label;
import mx.core.IUIComponent;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
[Bindable]
public var list:ArrayCollection=new ArrayCollection();
//拖动初始器
private function dragSource(e:MouseEvent,format:String):void
{
var iu:IUIComponent = e.currentTarget as IUIComponent;
var ds:DragSource=new DragSource();
ds.addData(myTree.selectedItem,format);//为myTree设置一个标号forma
var lbl:Label=new Label();
lbl.text="开始拖动";
lbl.x = e.stageX;
lbl.y = e.stageY;
//lbl拖动的影子，默认为自己doDrag（拖动的对象，拖动器，事件，拖动影子，x,y）
DragManager.doDrag(iu,ds,e,lbl,e.stageX,e.stageY);//开始拖动这个物体
}
//当拖进去时
private function doDragEnter(e:DragEvent,format:String):void
{
var len:int=(mylist.dataProvider as ArrayCollection).length;//判断list中有多少个数据
var selectnode:XML = myTree.selectedItem as XML;//选择的节点名
for(var i:int=0;i<len;i++)
{
if(validateIsEqual((mylist.dataProvider as ArrayCollection).getItemAt(i),selectnode))
{
Alert.show("该班组已经存在！");
}
}
if(e.dragSource.hasFormat(format)){//如果标号为format则接受拖来的物体
DragManager.acceptDragDrop(IUIComponent(e.target));
}
}
//当拖完成时
private function onDragDrop(e:DragEvent,format:String):void{
var row:Object=e.dragSource.dataForFormat(format);
list.addItem(row);//list的数据源添加数据
}
//判断选中的节点是否和List中的内容一样
private function validateIsEqual(obj1:Object,obj2:Object):Boolean
{
if(obj1==obj2)//条件未判断
{
return true;
}
else
{
return false;
}
}
]]>
</fx:Script>
<mx:Tree id="myTree" labelField="@label" dragEnabled="true" mouseDown="dragSource(event,'stringFormat')"
showRoot="true" dataProvider="{treeData}" height="331" horizontalCenter="-120" verticalCenter="7" width="190"/>
<mx:List height="331" labelField="@label" dragEnter="doDragEnter(event,'stringFormat')"
dataProvider="{list}" dragDrop="onDragDrop(event,'stringFormat')" width="162" id="mylist" horizontalCenter="114" verticalCenter="7"></mx:List>
<mx:Label x="282.5" y="97" text="Tree与list的拖动" width="152"/>
</s:Application>
第二：从Tree到DataGrid
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XML id="treeData" xmlns="">
<root>
<node label="Massachusetts" type="state" data="MA">
<node label="Boston" type="city" >
<node label="Smoke House Grill" type="restaurant" />
<node label="Equator" type="restaurant" />
<node label="Aquataine" type="restaurant" />
<node label="Grill 23" type="restaurant" />
</node>
<node label="Provincetown" type="city" >
<node label="Lobster Pot" type="restaurant" />
<node label="The Mews" type="restaurant" />
</node>
</node>
<node label="California" type="state" data="CA">
<node label="San Francisco" type="city" >
<node label="Frog Lane" type="restaurant" />
</node>
</node>
</root>
</fx:XML>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
import mx.controls.Label;
import mx.controls.List;
import mx.collections.ArrayCollection;
import mx.core.DragSource;
import mx.controls.Tree;
import mx.controls.DataGrid;
import mx.controls.listClasses.ListBase;
import mx.events.DragEvent;
import mx.containers.Canvas;
import mx.managers.DragManager;
import mx.core.UIComponent;
[Bindable]
private var dataGridProvider:ArrayCollection = new ArrayCollection();
/**
* Handles the dragEnter event on the DataGrid control.
* If the dragInitiator is the Tree control, then only nodes of type "restaurant"
* are permitted to be dropped.
* Here you can see that by examining the dragSource you can determine if
* the control should accept the drop. The DataGrid control would not
* know how to treat a branch+children from the Tree control, so only leaf (restaurant)
* nodes are accepted.
*/
private function onDragEnter( event:DragEvent ) : void
{
if( event.dragInitiator is Tree ) {
var ds:DragSource = event.dragSource;
if( !ds.hasFormat("treeItems") ) return; // no useful data
var items:Array = ds.dataForFormat("treeItems") as Array;
for(var i:Number=0; i < items.length; i++) {
var item:XML = XML(items[i]);
if( item.@type != "restaurant" ) return; // not what we want
}
}
// If the Tree control passes or the dragInitiator is not a Tree control,
// accept the drop.
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
/**
* Handles the dragOver event on the DataGrid control.
* If the dragInitiator is the Tree control, only copy is allowed. Otherwise, a move
* or link can take place from the List control.
*/
private function onDragOver( event:DragEvent ) : void
{
if( event.dragInitiator is Tree ) {
DragManager.showFeedback(DragManager.COPY);
} else {
if (event.ctrlKey)
DragManager.showFeedback(DragManager.COPY);
else if (event.shiftKey)
DragManager.showFeedback(DragManager.LINK);
else {
DragManager.showFeedback(DragManager.MOVE);
}
}
}
/**
* Handles the dragExit event on the drop target and just hides the
* the drop feedback.
*/
private function onDragExit( event:DragEvent ) : void
{
var dropTarget:ListBase=ListBase(event.currentTarget);
dropTarget.hideDropFeedback(event);
}
/**
* Handles the dragDrop event on the DataGrid when the
* drag proxy is released.
*/
private function onGridDragDrop( event:DragEvent ) : void
{
var ds:DragSource = event.dragSource;
var dropTarget:DataGrid = DataGrid(event.currentTarget);
var arr:Array;
if( ds.hasFormat("items") ) {
arr = ds.dataForFormat("items") as Array;
} else if( ds.hasFormat("treeItems") ) {
arr = ds.dataForFormat("treeItems") as Array;
}
for(var i:Number=0; i < arr.length; i++) {
var node:XML = XML(arr[i]);
var item:Object = new Object();
item.label = node.@label;
item.type = node.@type;
dataGridProvider.addItem(item);
}
onDragExit(event);
}
/**
* Intercepts the dragComplete event on the Tree control
* and prevents the default behavior from happening. This is necessary
* if the item being dragged from the Tree control is dropped on a non-Tree
* object, such as the DataGrid.
*/
private function onTreeDragComplete(event:DragEvent):void {
event.preventDefault();
}
/**
* Selects all of the items in the List if Ctrl+A is picked when the List control
* has focus.
*/
private function selectAllMaybe( event:KeyboardEvent ) : void
{
if( event.ctrlKey && event.keyCode == 65 ) {
var l:List = List(event.currentTarget);
var allItems:Array = new Array(l.dataProvider.length);
for(var i:Number=0; i < allItems.length; i++) {
allItems[i] = i;
}
l.selectedIndices = allItems;
}
}
]]>
</fx:Script>
<mx:Label x="34" y="40" text="Drag items from this Tree"/>
<mx:Label x="34" y="55" text="(items are copied)"/>
<mx:Tree x="34" y="81" width="181" height="189"
dataProvider="{treeData.node}"
labelField="@label"
dropEnabled="false"
dragEnabled="true"
dragComplete="onTreeDragComplete(event)"
dragMoveEnabled="false"
/>
<mx:Label x="291" y="55" text="Drop items from Tree here"/>
<mx:DataGrid x="291" y="81" height="189"
dragEnabled="true"
dataProvider="{dataGridProvider}"
dragEnter="onDragEnter(event)"
dragOver="onDragOver(event)"
dragDrop="onGridDragDrop(event)"
dragExit="onDragExit(event)">
<mx:columns>
<mx:DataGridColumn headerText="Label" dataField="label"/>
<mx:DataGridColumn headerText="Type" dataField="type"/>
</mx:columns>
</mx:DataGrid>
</s:Application>
第三：从List到Tree
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
<fx:XML id="treeData" xmlns="">
<root>
<node label="Massachusetts" type="state" data="MA">
<node label="Boston" type="city" >
<node label="Smoke House Grill" type="restaurant" />
<node label="Equator" type="restaurant" />
<node label="Aquataine" type="restaurant" />
<node label="Grill 23" type="restaurant" />
</node>
<node label="Provincetown" type="city" >
<node label="Lobster Pot" type="restaurant" />
<node label="The Mews" type="restaurant" />
</node>
</node>
<node label="California" type="state" data="CA">
<node label="San Francisco" type="city" >
<node label="Frog Lane" type="restaurant" />
</node>
</node>
</root>
</fx:XML>
<fx:Array id="listData">
<fx:String>Johnny Rocket's</fx:String>
<fx:String>Jet Pizza</fx:String>
<fx:String>Steve's Greek</fx:String>
<fx:String>Sonsie</fx:String>
<fx:String>The Border Cafe</fx:String>
</fx:Array>
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.events.DragEvent;
import mx.managers.DragManager;
import mx.core.DragSource;
import mx.core.UIComponent;
import mx.controls.Tree;
/**
* Called as soon as the dragProxy enters the target. You can add logic
* to determine if the target will accept the drop based on the
* dragInitiator, the data available in the dragSource.
* Here the drop is blindly accepted.
*/
private function onDragEnter( event:DragEvent ) : void
{
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
/**
* Called while the dragProxy is over the drop target. You can
* use this function to determine the type of feedback to show.
* Since the List is set to allow MOVE (the item is deleted
* once dropped), different feedback possibilities are given.
*
* Also, for this application, the Tree control node the dragProxy is
* over is selected. As the dragProxy moves, the Tree control's
* selection changes.
*
* For a bit more complication, the drop is being allowed
* only over nodes whose type is NOT 'state'.
* The feedback is removed.
*/
private function onDragOver( event:DragEvent ) : void
{
var dropTarget:Tree = Tree(event.currentTarget);
var r:int = dropTarget.calculateDropIndex(event);
tree.selectedIndex = r;
var node:XML = tree.selectedItem as XML;
if( node.@type == "state" ) {
DragManager.showFeedback(DragManager.NONE);
return;
}
if (event.ctrlKey)
DragManager.showFeedback(DragManager.COPY);
else if (event.shiftKey)
DragManager.showFeedback(DragManager.LINK);
else {
DragManager.showFeedback(DragManager.MOVE);
}
}
/**
* Called when the dragProxy is released
* over the drop target. The information in the dragSource
* is extracted and processed.
*
* The target node is determined and
* all of the data selected (the List has allowMultipleSection
* set) is added.
*/
private function onDragDrop( event:DragEvent ) : void
{
var ds:DragSource = event.dragSource;
var dropTarget:Tree = Tree(event.currentTarget);
var items:Array = ds.dataForFormat("items") as Array;
var r:int = tree.calculateDropIndex(event);
tree.selectedIndex = r;
var node:XML = tree.selectedItem as XML;
var p:*;
// if the selected node has children (it is type==city),
// then add the items at the beginning
if( tree.dataDescriptor.hasChildren(node) ) {
p = node;
r = 0;
} else {
p = node.parent();
}
for(var i:Number=0; i < items.length; i++) {
var insert:XML = <node />;
insert.@label = items[i];
insert.@type = "restaurant";
tree.dataDescriptor.addChildAt(p, insert, r+i);
}
}
/**
* Called when the drag operation completes, whether
* successfully or not. The tree is cleared of its
* selection.
*/
private function onDragComplete( event:DragEvent ) : void
{
tree.selectedIndex = -1;
}
]]>
</fx:Script>
<mx:Panel x="48" y="125" width="447" height="351" layout="absolute" title="Drag onto Tree">
<mx:Tree width="186" left="10" top="10" bottom="10" id="tree"
labelField="@label"
dataProvider="{treeData.node}"
dropEnabled="false"
dragMoveEnabled="false"
dragEnter="onDragEnter(event)"
dragOver="onDragOver(event)"
dragDrop="onDragDrop(event)">
</mx:Tree>
<mx:List width="188" height="206" right="10" bottom="10" id="list"
allowMultipleSelection="true"
dataProvider="{listData}"
dragEnabled="true"
dragMoveEnabled="true"
dragComplete="onDragComplete(event)">
</mx:List>
<mx:Text x="229" y="10" text="Drag from the list below to the tree" width="188" height="39"/>
<mx:Label x="229" y="69" text="restaurants"/>
</mx:Panel>
</s:Application>
第四：Tree 到Tree及综合拖动示例
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:com="com.*">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.listClasses.ListBase;
import mx.core.UIComponent;
import mx.controls.Tree;
import mx.collections.ArrayCollection;
import mx.core.DragSource;
import mx.managers.DragManager;
import mx.events.DragEvent;
import mx.events.TreeEvent;
import flash.events.KeyboardEvent;
import flash.events.MouseEvent;
import flash.events.Event;
import mx.utils.ObjectUtil;
[Bindable]
public var selectedNode:Object;
[Bindable]
public var description:String = "Directions:\n\nTo see the effect of the Spring Loaded Folders select " +
"an item in the tree and drag the item over the folders wait, hovering over the folder and " +
"it'll open.\n\nIf a folder opens and you did not want it to open move the mouse out of " +
"the tree, and it'll restore the original state. \n\nPlay around with the delay to get a " +
"desired delay.Hitting spacebar while dragging over a closed folder will open it immediately.";
public function treeChanged(event:Event):void {
selectedNode=event.currentTarget.selectedItem;
}
private function onDragOver(event:DragEvent):void{
try{
if( event.dragInitiator is ListBase ){
var list:ListBase = event.dragInitiator as ListBase;
if( event.currentTarget != event.dragInitiator){
//do what?
//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
}
if(list.indexToItemRenderer(list.calculateDropIndex(event)) != null){
var currTree:Tree = Tree(event.currentTarget);
var currNodeOver:Object;
var rowIndex:int = currTree.calculateDropIndex(event);
var hoverTarget:Object = currTree.indexToItemRenderer(rowIndex).data;
var parent:Object = currTree.getParentItem(hoverTarget);
var tattlerStr:String = new String();
var halfRow:int = currTree.rowHeight/2;
var certerRowY:int = (rowIndex*currTree.rowHeight)+halfRow;
var bottomRowY:int = (rowIndex+1)*currTree.rowHeight;
currNodeOver = currTree.indexToItemRenderer(rowIndex).data;
DragManager.showFeedback(DragManager.MOVE);
currTree.showDropFeedback(event);
//trace(ObjectUtil.toString(parent));
if( parent != null )
trace('[currTree is a tree]');
//parent.label = 'currTree is a tree';
//parentObject = currTree.getParentItem(hoverTarget);
else
trace('[currTree is a tree]');
//parent.label = 'currTree is not a tree';
//parentObject.label = 'currTree is not a tree';
tattlerStr = "Selected Item: " + selectedNode + "\n" + "Over Target: " + hoverTarget.level
+ "\n" + "Target Parent: " + 'test'//parent.label
+ "\n"
+ "calculateDropIndex " + rowIndex
+ "\n"
+ "halfRow " + halfRow.toString()
+ "\n"
+ "certerRowY " + certerRowY.toString()
+ "\n"
+ "bottomRowY " + bottomRowY.toString()
+ "\n"
+ "mouseY " + currTree.mouseY.toString()
+ "\n"
+ "isItemOpen " + currTree.isItemOpen(currNodeOver).toString()
+ "\n" + "\n";
tattler.text = tattlerStr;
}else{
tattler.text = "No Drop Buddy";
}
}
}catch(err:Error){
trace('[error]'+err);
}
}
private function onDragDrop(event:DragEvent):void{
try{
var target:Tree = Tree(event.currentTarget);
var list:ListBase = event.dragInitiator as ListBase;
var ds:DragSource = event.dragSource;
var rowIndex:int = target.calculateDropIndex(event);
var hoverTarget:Object = target.indexToItemRenderer(rowIndex).data;
var parent:Object = target.getParentItem(hoverTarget);
var items:Array = ds.dataForFormat("items") as Array;
var i:int;
//trace(event.dragInitiator);
if( event.dragInitiator is DataGrid ){
//do what?
//trace(mx.utils.ObjectUtil.toString('[currentTarget]'+event.currentTarget));
for (i=0; i < items.length; i++){
var tempObj:Object = {};
tempObj = items[i];
parent.children.addItem(tempObj);
}
event.preventDefault();
}
}catch(err:Error){
trace('[onDragDropError]'+err);
}
}
private function onDragEnter(event:DragEvent):void{
DragManager.acceptDragDrop(UIComponent(event.currentTarget));
}
[Bindable]
private var treeData:ArrayCollection = new ArrayCollection(
[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
[ {label:"cert1", level:"Cert", children:new ArrayCollection(
[{label:"c1", level:"Course", type:"prereq"},
{label:"c2", level:"Course", type:"prereq"}
])}
])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
[ {label:"cert1", level:"Cert", children:new ArrayCollection(
[{label:"c1", level:"Course", type:"prereq"},
{label:"c2", level:"Course", type:"prereq"}
])}
])}
]);
[Bindable]
private var secondTreeData:ArrayCollection = new ArrayCollection(
[ {label:"Curriculum", level:"Curr", children:new ArrayCollection(
[ {label:"cert1", level:"Cert", children:new ArrayCollection(
[{label:"c1", level:"Course", type:"prereq"},
{label:"c2", level:"Course", type:"prereq"}
])}
])},{label:"Curriculum", level:"Curr", children:new ArrayCollection(
[ {label:"cert1", level:"Cert", children:new ArrayCollection(
[{label:"c1", level:"Course", type:"prereq"},
{label:"c2", level:"Course", type:"prereq"}
])}
])}
]);
[Bindable]
private var gridDP:ArrayCollection = new ArrayCollection(
[{label:"c5", level:"Course", type:"prereq"},
{label:"c6", level:"Course", type:"prereq"},
{label:"c7", level:"Course", type:"prereq"}]);
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<mx:VBox width="100%" height="100%">
<mx:Canvas backgroundColor="#f3d7ab" borderColor="#000000" borderStyle="outset" width="100%" x="10" height="50%" y="10" horizontalScrollPolicy="off" verticalScrollPolicy="off">
<mx:HBox width="100%" height="100%" >
<com:SpringLoadedTree id="tree1" width="35%" height="100%"
autoCloseOpenNodes="{autoCloseOpenNodes.selected}"
autoCloseOnDrop="{autoCloseOnDrop.selected}"
autoOpenTimerMS="{DelayOpen.value}"
autoCloseTimerMS="{DelayClose.value}"
showOpeningIndication="{showOpenIdication.selected}"
autoCloseOnExit="{autoCloseOnExit.selected}"
dataProvider="{treeData}"
mouseDown="treeChanged(event)"
fontWeight="bold" color="#000000"
dragEnabled="true"
dragOver="onDragOver(event)"
dragMoveEnabled="true"
dropEnabled="true"
labelField="label" wordWrap="true"
fontSize="8" variableRowHeight="true"
x="41" y="20"/>
<com:SpringLoadedTree id="tree2" width="35%" height="100%"
autoCloseOpenNodes="{autoCloseOpenNodes.selected}"
autoCloseOnDrop="{autoCloseOnDrop.selected}"
autoOpenTimerMS="{DelayOpen.value}"
autoCloseTimerMS="{DelayClose.value}"
showOpeningIndication="{showOpenIdication.selected}"
autoCloseOnExit="{autoCloseOnExit.selected}"
dataProvider="{secondTreeData}"
mouseDown="treeChanged(event)"
fontWeight="bold" color="#000000"
dragEnabled="true"
showRoot="false"
dragDrop="onDragDrop(event)"
dragEnter="onDragEnter(event)"
dragOver="onDragOver(event)"
dragMoveEnabled="true"
dropEnabled="true"
labelField="label" wordWrap="true"
fontSize="8" variableRowHeight="true"
x="41" y="20"/>
<mx:DataGrid dataProvider="{gridDP}" id="grid1"
dragEnabled="true"
dragMoveEnabled="true" height="100%">
</mx:DataGrid>
<mx:Text text="{description}" id="Directions" enabled="true" height="100%" width="30%"/>
</mx:HBox>
</mx:Canvas>
<mx:HBox width="100%" height="50%">
<mx:TextArea x="10" y="368" width="50%" height="100%" id="tattler"/>
<mx:Canvas width="50%" height="100%" y="446" x="470">
<mx:CheckBox id="autoCloseOnDrop" selected="true" label="Return to original state on drop" left="10" right="10" bottom="96"/>
<mx:HSlider value="1000" tickInterval="200" snapInterval="200" maximum="2000" allowTrackClick="true" minimum="200" id="DelayOpen" left="255" bottom="174" width="190"/>
<mx:Label text="Folder auto open delay ms:{DelayOpen.value}" left="10" bottom="174" textAlign="left" width="248"/>
<mx:CheckBox id="showOpenIdication" selected="true" label="Show opening indication" left="10" right="10" bottom="122"/>
<mx:HSlider value="200" tickInterval="100" snapInterval="100" maximum="1000" allowTrackClick="true" minimum="100" id="DelayClose" bottom="200" width="190" left="255"/>
<mx:Label text="Folder auto close delay ms:{DelayClose.value}" left="10" bottom="200" textAlign="left" width="248"/>
<mx:CheckBox id="autoCloseOpenNodes" selected="true" label="Auto open/close folders on drag over/out" left="10" right="10" bottom="148"/>
<mx:CheckBox id="autoCloseOnExit" selected="true" label="Auto close folders on tree exit" left="10" right="10" bottom="70"/>
</mx:Canvas>
</mx:HBox>
</mx:VBox>
</s:Application>
11
顶
顶
1
踩
踩
分享到：
发表评论
-
10条寒冷的冷笑话【心情不好的人，进来看看吧】
2010-08-27 12:24 25881、小明：我说话从来不说第2遍小华：什么?小明：我说话从来不说 ... -
Flex4之事件详解
2010-08-26 15:39 9813第一、Flex事件简介事 ... -
Flex4之DataGrid增删改同步数据库及页面数据示例总结
2010-08-20 10:35 10488有关Flex的DataGrid文章的确不少，都是零零碎碎的，目 ... -
全面认识Flex六大要素
2010-08-19 15:25 2147在学习Flex应用程序的 ... -
Flex4之将Sprite控件添加到FLEX UI中
2010-08-13 09:24 6008在Flex的帮助文档 ... -
Flex4之元数据标签使用
2010-08-09 16:04 4694Flex 元数据标签 1、[ArrayElementTy ... -
Flex4之关于Embed外部资源的使用方法总结
2010-08-09 14:20 8355Flex软件中经常需要使用一些外部的资源，如图片、声音、S ... -
Flex4之使用ActionScript构建组件
2010-08-09 13:37 4272因为是专门针对ActionScript来写的 ... -
Flex4之获取各种颜色RGB值的例子
2010-08-09 10:03 4441接下来的例子演示了Flex中如何将颜色的值转化为字符串，根据R ... -
Flex4之简单菜单制作
2010-08-04 11:45 3657首先呢说明一下，我写的这个菜单呢，为了符合我的项目需要没有用到 ... -
Flex4之关于循环注册事件问题
2010-08-03 15:02 2076首先呢，标题说的有些 ... -
关于FLEX特效的几个网址
2010-07-27 13:01 8188在Tourde FLEX的Data Visualization ... -
FLEX4之内存释放优化原则
2010-07-27 10:17 23141. 被删除对象在外部的所有引用一定要被删除干净才能被系统当成 ... -
Flex4之Filters的用法【模糊，炽热，阴影、齿条】
2010-07-23 14:51 5572先上效果图 具体代码 <?xml versio ... -
Flex4之四种事件处理方式
2010-07-23 14:36 2575首先我这个示例是针对按钮来说的，其实其他的组件大致也都一样 ... -
Flex4之皮肤定制【Skin类和Skin类】
2010-07-23 10:01 22335第一、关于spark.skin.SparkSkin类的 ... -
Flex4之为ToolTip设置旋转特效及字体
2010-07-22 16:21 5192没想到ToolTip一个提示标签也可以加上动画，看来Flex真 ... -
Flex4之在Aert提示框中加入超链接
2010-07-22 16:02 2297闲话不说，贴上代码 <?xml version=&qu ... -
Flex4之在button上显示HTML内容
2010-07-22 15:28 2766HTMLButton.as package myas { ... -
Flex4之添加插件实现代码格式化
2010-07-22 15:13 4384首先到http://sourceforge.net/proje ...
相关推荐
总的来说，掌握Flex Tree组件的使用对于开发具有层级结构数据展示的Flex应用至关重要。理解数据模型、数据绑定、事件处理以及自定义节点渲染等核心概念，可以帮助开发者构建出功能丰富且用户友好的界面。通过不断...
在Flex CheckboxTree中，每个树节点都有一个与之关联的复选框。当用户点击复选框时，相应的树节点会被选中或取消选中。开发者可以通过监听CheckBoxTree的事件来处理这些变化，例如，当节点的选中状态改变时，更新...
Flex Tree组件是Adobe Flex框架中的一个关键元素，用于在用户界面上展示层次结构的数据。它在各种应用程序中广泛使用，特别是在需要展现具有嵌套结构的数据时，如文件系统、组织结构或者复杂的分类信息。让我们深入...
在Flex编程环境中，Tree组件是一种常用的用户界面元素，它用于展示层次结构的数据。在这个特定的场景中，我们关注的是在Flex Tree中集成复选框功能，这为用户提供了一种直观的方式来选择或操作树形结构中的多个节点...
在IT行业中，Flex Tree是一种常用于数据展示和交互的组件，尤其在构建用户界面时，它能够以树形结构清晰地展示层次数据。配合Checkbox（复选框）功能，可以提供用户选择或过滤数据的便利操作。"Flex Tree + Checkbox...
4. **Tree组件**： Tree组件是Flex中用于展示层次结构数据的一种UI组件。它可以自动根据数据模型构建树形视图，支持展开、折叠等交互操作。在这个例子中，Tree组件的数据提供者是通过HTTPService获取的XML数据，...
Flex是一种开源的、基于ActionScript的框架，用于构建富互联网应用程序（RIA），它由Adobe Systems开发。时间轴组件是Flex中一种强大的可视化工具，通常用于展示和操作一系列按时间顺序排列的事件或数据。 标题中的...
总结来说，"flex tree icon"是Flex开发中的一个重要概念，涉及到如何在树形组件中添加和管理图标。通过阅读相关博客、理解源码、使用开发工具以及研究示例项目，开发者可以熟练掌握这一技能，从而提升Flex应用的用户...
4. 插件实现：本压缩包提供的插件可能是对Flex Tree组件的一个扩展，添加了Checkbox功能。可能包括以下关键部分： - TreeNode类的扩展：可能扩展了默认的TreeNode类，添加了Checkbox属性和相关的事件处理。 - ...
Flex Tree 是一种基于 Adobe Flex 技术实现的可交互树形数据结构组件，它允许用户以图形化的方式查看和操作层次结构数据。在 Flex 应用中，Tree 控件经常用于展示具有层级关系的数据，例如文件系统、组织结构或者...
开发过程中，开发者可能会使用Adobe Flex Builder或Flash Builder这样的集成开发环境，它们提供了图形化的界面来设计和调试Flex应用。此外，对于源码的调试和优化，还可能需要用到如Flex SDK和Flex Profiler等工具...
4. 应用自定义渲染器：在Tree组件的mxml代码中，通过`<mx:Tree itemRenderer>`属性，指定我们刚刚创建的自定义TreeItemRenderer类。 5. 测试与优化：最后，运行应用并检查效果。可能需要根据实际情况调整线条的位置...
在Flex应用开发过程中，我们常常需要用到树形结构（Tree）来展示分层数据。为了使数据呈现更加灵活且高效，通常会采用XML作为数据交换格式，这是因为XML具备良好的可读性和扩展性，能够方便地被解析与处理。 #### ...
1. **Flex Tree组件**: Flex Tree是基于ActionScript或Flex SDK开发的组件，它允许用户以图形化的方式展示层次数据。它通常包含可展开/折叠的节点，以及连接节点的线条来展示层级关系。 2. **连接线样式**：在Flex ...
综上所述，实现"flex的combBox添加tree"涉及了Flex组件使用、ActionScript编程、数据处理、事件驱动等多个方面的知识，需要一定的Flex开发经验。通过这个过程，你可以创建出一个功能强大的用户界面，为用户提供更加...
插件是自己开写的，插件JS文档里附有说明！希望提宝贵意见.小插件主要是WEB开发显示一棵树结构...只要根据规定的数据格式XML传入便可生成一棵美观的树，可以选择是否要显示CHECKBOX组件，里边有开发中常用的回调方法。
根据提供的文件信息，本文将对“Flex Tree 源码”进行详细解析，重点解读如何通过 Flex、Java 和 Tree 代码结合 XMLList 来生成 XML 文件，并构建树形数据结构。 ### 一、理解 Flex、Java 和 Tree 代码 #### 1.1 ...
在Flex 4.5开发中，拖放（Drag & Drop）功能是一项常用且重要的交互设计技术，它允许用户通过鼠标操作将元素从一个位置移动到另一个位置，这在构建用户界面时大大提升了用户体验。本教程将详细介绍如何在Flex 4.5中...
在Flex开发中，Tree组件是一种常用的用户界面元素，用于展示层次结构的数据。它通常用于文件系统、组织结构或任何有层级关系的数据展示。本篇将详细介绍如何为Flex中的Tree组件设置不同的数据源，包括XML、Array和...
在Flex中，右键菜单是用户交互的重要组成部分，特别是在数据可视化和树形结构的数据展示中，如Flex Tree组件。本文将深入探讨如何在Flex中实现右键菜单，并结合提供的源码进行分析。 1. Flex右键菜单： Flex中的...