Flex 改变树结点图标的2种方法介绍

方法一:根据是否有子结点进行改变


代码如下:

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
mx|Tree{
/*去掉默认文件夹图标*/
folderClosedIcon: Embed(source='resource/region.png');
folderOpenIcon: Embed(source='resource/region.png');
/*去掉叶子节点图标
defaultLeafIcon: ClassReference(null);
*/
/*
defaultLeafIcon 指定叶图标
disclosureClosedIcon 指定的图标旁边显示一个封闭的分支节点。默认的图标是一个黑色三角形。
disclosureOpenIcon 指定的图标旁边显示一个开放的分支节点。默认的图标是一个黑色三角形。
folderClosedIcon 关闭指定的文件夹图标的一个分支节点。
folderOpenIcon 指定打开的文件夹图标的一个分支节点。
例:三角图标修改如下代码使用即可换成自己的了:
disclosureOpenIcon:Embed(source='resource/region.png');
disclosureClosedIcon:Embed(source='resource/region.png');
*/
}
</fx:Style>

方法二:根据结点的属性,灵活改变图标


代码如下:

<?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:Script>
<![CDATA[
]]>
</fx:Script>
<fx:Declarations>
<!-- 将非可视元素(例如服务、值对象)放在此处 -->
<fx:XML id="treeData">
<root>
<node label="CI配置项" iconName="computer.png">
<node label="资源" iconName="computer.png">
<node label="硬件资源" iconName="computer.png">
<node label="硬件设备" iconName="computer.png">
</node>
<node label="硬件模块" iconName="computer.png">
<node label="端口" iconName="computer.png">
</node>
</node>
</node>
</node>
</node>
<node label="字典" iconName="dictionary.png">
</node>
</root>
</fx:XML>
</fx:Declarations>
<mx:Tree left="5" top="5" bottom="5" width="150" dataProvider="{treeData}"
id="myTree"
showRoot="false"
labelField="@label"
itemRenderer="com.flex.tree.dynamicicontree.IconTreeRenderer">
</mx:Tree>
</s:Application>
package com.flex.tree.dynamicicontree
{
import flash.xml.*;
import mx.collections.*;
import mx.controls.Image;
import mx.controls.listClasses.*;
import mx.controls.treeClasses.*;
import mx.styles.StyleManager;
/*
* ICON Tree的渲染器
*/
public class IconTreeRenderer extends TreeItemRenderer
{
protected var myImage:ImageRenderer;
private var imageWidth:Number = 16;
private var imageHeight:Number = 16;
private static var defaultImg:String = "windows.png";
public function IconTreeRenderer ()
{
super();
}
override protected function createChildren():void
{
super.createChildren();
myImage = new ImageRenderer();
myImage.source = defaultImg;
myImage.width=imageWidth;
myImage.height=imageHeight;
myImage.setStyle( "verticalAlign", "middle" );
addChild(myImage);
}
//通过覆盖data方法来动态设置tree的节点图标
override public function set data(value:Object):void
{
super.data = value;
var imageSource:String=value.@iconName.toString();
if(imageSource!="")
{
myImage.source=imageSource;
}else{
myImage.source=defaultImg;
}
}
//隐藏原有图标,并设置它的坐标
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(super.data !=null)
{
if (super.icon != null)
{
myImage.x = super.icon.x;
myImage.y = 2;
super.icon.visible=false;
}
else
{
myImage.x = super.label.x;
myImage.y = 2;
super.label.x = myImage.x + myImage.width + 17;
}
}
}
}
}
package com.flex.tree.dynamicicontree
{
import mx.controls.Image;
public class ImageRenderer extends Image
{
private var defaultURL:String = "assets/icon/";
public var iconName:String;
public function ImageRenderer()
{
super();
}
override public function set source(url:Object):void{
super.source = defaultURL + url;
iconName = url as String;
}
}
}

(0)

相关推荐

  • Flex 改变树结点图标的2种方法介绍

    方法一:根据是否有子结点进行改变 复制代码 代码如下: <fx:Style> @namespace s "library://ns.adobe.com/flex/spark"; @namespace mx "library://ns.adobe.com/flex/mx"; mx|Tree{ /*去掉默认文件夹图标*/ folderClosedIcon: Embed(source='resource/region.png'); folderOpenIcon

  • JS原生实现轮播图的几种方法

    轮播图 主要思想就是: 在大的容器里,装着一个很长的表,表是容器宽度的整数倍. 然后通过更改列表样式里的left属性来实现左右滑动. 本文旨在控制滑动五张图片,但在html中使用了七张图片,第一张和最后一张是有重复的,至于原因会在下面解释. 通过给容器设定overflow:hidden属性来保证只显示容器视口大小的一张图片. <body> <div id="container"> /*容器*/ <div id="wrap" style=

  • JS Input里添加小图标的两种方法

    我们在做网页的时候,经常需要在input里面添加小图标,那么这里就介绍比较常见的两种方法. 方法一 将小图标当做input的背景来插入,直接上代码吧: <style type="text/css"> *{ margin: 0; padding: 0; } input{ border: none; } .box{ height: 50px; background: yellow; } .box input{ width: 200px; height: 30px; border

  • Python实现平行坐标图的两种方法小结

    平行坐标图,一种数据可视化的方式.以多个垂直平行的坐标轴表示多个维度,以维度上的刻度表示在该属性上对应值,相连而得的一个折线表示一个样本,以不同颜色区分类别. 但是很可惜,才疏学浅,没办法在Python里实现不同颜色来区分不同的类别.如果对此比较在意的大神可以不要往下看了......... 上图是一个基于iris数据集所画的一个平行坐标图. 隔开隔开.......................................隔开隔开 不多扯了,下面正式上代码 方法一.基于pyecharts第三

  • Matlab制作视频并转换成gif动态图的两种方法

    一.第一个方法比较简单,就是使用movie(f)直接取生成AVI视频文件. %% f(t)-->f(4*t+12) 并且验证%% function Signal_change() tic%记录程序运行时间 figure n = 0; t = -2*pi:0.01:2*pi; y = sin(t);%周期为2*pi y_result = sin(4*t); plot(t,y,'b'); xlabel('t'); ylabel('Amplitude'); n = n+1; F(n) = getfra

  • docker-修改容器挂载目录的3种方法小结

    方式一:修改配置文件(需停止docker服务) 1.停止docker服务 systemctl stop docker.service(关键,修改之前必须停止docker服务) 2.vim /var/lib/docker/containers/container-ID/config.v2.json 修改配置文件中的目录位置,然后保存退出 "MountPoints":{"/home":{"Source":"/docker",&qu

  • Java编程求二叉树的镜像两种方法介绍

    给出一棵二叉树,求它的镜像,如下图:右边是二叉树是左边二叉树的镜像. 仔细分析这两棵树的特点,看看能不能总结出求镜像的步骤.这两棵树的根节点相同,但他们的左右两个子节点交换了位置.因此我们不妨先在树中交换根节点的两个子节点,就得到了下面一幅图中的第二颗树 解法1(递归) 思路1:如果当前节点为空,返回,否则交换该节点的左右节点,递归的对其左右节点进行交换处理. /*class TreeNode{ int val; TreeNode left=null; TreeNode right=null;

  • Android 拍照后返回缩略图的两种方法介绍

    目录 前言: 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 二.第二种方法 总结 前言: 如果简单地拍照片并非您应用的主要目标,那么您可能希望从相机应用中获取图片并对该图片执行一些操作. 一.这就是第一种方法,比较简单,不用将图片保存到手机本地存储下来. 下面我们看具体代码: 1.首先是布局文件activity_photothumbnail.xml <?xml version="1.0" encoding="utf-8"?> <

  • Java中获取键盘输入值的三种方法介绍

    程序开发过程中,需要从键盘获取输入值是常有的事,但Java它偏偏就没有像c语言给我们提供的scanf(),C++给我们提供的cin()获取键盘输入值的现成函数!Java没有提供这样的函数也不代表遇到这种情况我们就束手无策,请你看以下三种解决方法吧: 以下将列出几种方法: 方法一:从控制台接收一个字符,然后将其打印出来 public static void main(String [] args) throws IOException{ System.out.print("Enter a char

  • java中List分页的几种方法介绍

    目录 1.根据入参带分页参数进行sql查询分页 2.对所有list根据分页参数分页 3.PageHelper分页 1.根据入参带分页参数进行sql查询分页 Criteria criteria = new Criteria(); //将dataAuto转成 factoryId brandId seriesId 等查询条件 String dataAuth = ""; TypeCaseHelper.dataAuto(criteria, dataAuth); // 设置分页信息 ExtPage

随机推荐