Flex学习笔记_06 使用组件处理数据和交互_01常用组件（下）

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（上）

Flex学习笔记_06 使用组件处理数据和交互_01常用组件（中）

 

1.9 Tree 一个使用XML作为Tree组件数据源的小例子

树型组件，是List 变异后的产物。在显示数据时保留了层级结构，每个元素都是一个分支或者叶子，分支包含其他分支或叶子，叶子不可再分。

结构和XML一样，所以用XML 作为Tree的数据源再适合不过了。

 

tree的事件：

change 在选中列改变时触发。

itemClick 点击某一列时被触发。

itemOpen 、itemClose 在节点展开和关闭时触发。

 

属性：

labeField 表示显示的文本所对应的XML字段，这里的值为@label ，

@ 符号表示后面的名字是XML节点的属性名，是AS3 中的XML数据的专用表达方式。

@label 指得是folder 节点中的label 属性。

 

change="treeChanged(event) 节点改变事件

在treeChanged 监听函数中，通过Tree 的selectedItem 属性得到当前被选中节点的XML 数据。

Tree(event.target) 强制将 event.target 转换成 Tree 类型。event.target 代表的就是Tree。

as 操作符 是类型转换符，用来将selectedItem 的值转换为XML 类型。如果类型匹配返回该类型的值，否则返回null 。

 

itemClick="clickItem(event)" 单击节点事件

其实itemClick 事件包括了change 事件，因此treeChanged 并不会被执行。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" fontSize="12">	<mx:Script>
        <![CDATA[
        	import mx.events.TreeEvent;
        	import mx.events.ListEvent
        	
            public var selectedNode:XML;
            //
            public function treeChanged(event:Event):void {
                selectedNode=Tree(event.target).selectedItem as XML;                
                //res_txt.text = "选择的文件夹："+selectedNode.@label
            }
            internal function clickItem(evt:ListEvent):void{
            	res_txt.text = "点击的节点："+evt.rowIndex
            }
            internal function openItem(evt:TreeEvent):void{
            	res_txt.text = "带开的节点："+evt.item
            }
            internal function closeItem(evt:TreeEvent):void{
            	res_txt.text = "关闭的节点："+evt.item
            }
        ]]>
    </mx:Script>
    <mx:XMLList id="files">
        <folder label="C:">
            <folder label="My Documents">
                <folder label="Adobe"/>
            </folder>
            <folder label="Windows">
                <folder label="soft"/>
                <folder label="drive"/>
            </folder>
            <folder label="Image"/>
            <folder label="Music"/>
        </folder>    
    </mx:XMLList>
    <mx:Tree id="myTree" width="165" height="265" labelField="@label" itemRenderer="nodeItem"
                showRoot="true" dataProvider="{files}" itemClick="clickItem(event)" itemOpen="openItem(event)" itemClose="closeItem(event)" change="treeChanged(event)" x="38" y="40"/>
    <mx:TextArea id="res_txt" x="211" y="40" height="197"/> 
</mx:Application>

 

Tree 默认采用的itemRenderer是 mx.controls.treeClasses 包中的TreeItemRenderer 类。接着我们来扩展使用它。

data 方法是 itemRenderer 获得数据的核心方法，重写这个方法，并简单修改了节点文字的颜色。

package
{
 	import mx.controls.treeClasses.*;
    import mx.collections.*;
    

	public class nodeItem extends TreeItemRenderer
	{
		//       
        public function nodeItem() {
            super();
        }
        //这是接收外部数据的核心方法       
        override public function set data(value:Object):void {
            super.data = value;
            //判断是否还有子节点，采用不同的颜色和字样
            if(TreeListData(super.listData).hasChildren)
            {
                setStyle("color", 0x006699);
                setStyle("fontWeight", 'bold');
            }
            else
            {
                setStyle("color", 0x000000);
                setStyle("fontWeight", 'normal');
            }  
        }
	}
}

 

1.10 TileList 和 HorizontalList

TileList 和 容器Tile 没有联系，不过两者实现的效果基本相似，都是采用块的形式布局。TileList = Tile + List

columnCount 属性用来设定每行显示的元素个数，组件根据每行的个数自动计算出元素的位置。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:Style source ="style.css"/>
	<mx:Model id="images">
      <image>
        <item label="图片1" data="images/Baby01.gif"/>
        <item label="图片2" data="images/Baby02.gif"/>
        <item label="图片3" data="images/Baby03.gif"/>
        <item label="图片4" data="images/Baby04.gif"/>
        <item label="图片5" data="images/Baby01.gif"/>
        <item label="图片6" data="images/Baby02.gif"/>
        <item label="图片7" data="images/Baby03.gif"/>
        <item label="图片8" data="images/Baby04.gif"/>
      </image>
    </mx:Model>
	<mx:TileList itemRenderer="ImageItem" x="29" y="49" height="196" columnCount="3" dataProvider="{images.item}">
	</mx:TileList>	
</mx:Application>

 

创建itemRenderer 来定义每个元素的界面。

data.data对应数据源中item.data

data.label对应数据源中item.label

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="98" height="64" horizontalAlign="center">
	<mx:Image width="32" height="32" source="{data.data}"/>
	<mx:Button x="38" y="40" label="{data.label}"/>	
</mx:VBox>

 

1.11 文本处理

文本处理组件：

Text： 可以使用HTML不过要借助htmlText 标签或 htmlText 属性。插入HTML代码时需要使用CDATA标签。

TextArea： editable属性为true时，相当于一个支持多行的TextInput。支持HTML和内置滚动条。

TextInput 和 RichTextEditor 以及 Label

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	
	<mx:Style>
		Application{
			fontSize:12;	
			backgroundGradientColors: #c0c0c0, #c0c0c0;
		}
	</mx:Style>

	<mx:Text x="51" y="56" width="253" height="23" text="简单文本"/>
	
	<mx:TextArea x="51" y="96" text="文本区" editable="false" width="172" height="48"/>
	<mx:TextInput x="51" y="171" text="输入框" displayAsPassword="true"/>

	<mx:Text width="253" height="96" x="51" y="226">
		<mx:htmlText>
			<![CDATA[<font color="#0000FF">HTML文本</font> <u>支持html标签</u><img src="images/Baby01.gif"/>...	]]>
		</mx:htmlText>
	</mx:Text>
</mx:Application>

 

1.12 一个强有力的组件 -- RichTextEditor

它实现了HTML所有功能。

是一个集成了文本处理功能的Panel组件，主要包括：TextArea 文本区 和 控制文字格式的容器。

在容器中包括了其他的组件，如 字体选择的ComboBox 、选择文本颜色的 ColorPicker 、选择文本对齐方式的ToggleButtonBar 等等。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="442" height="420">
	<mx:RichTextEditor x="10" y="10" width="403" height="281" id="myRich">
	</mx:RichTextEditor>
	<mx:TextArea id="output_txt" x="10" y="309" width="330" height="101"/>
	
	<mx:Button x="348" y="308" label="查看文本" click="output_txt.text= myRich.text"/>
	<mx:Button x="348" y="388" label="HTML代码" width="70" click="output_txt.text= myRich.htmlText"/>
	
</mx:Application>

 

1.13 设备字体和嵌入字体的应用实例

设备字体：用户机器上所有字体都最大可能地模拟其外观，保持文本的样式不会出现较大变化。支持三种设备字体：_sans, _serif, _typewriter。

设备字体必须使用引号""包含。

 

嵌入字体：将字体文件编译进SWF文件中或者运行时加载到SWF文件中，供SWF文件使用。并使文本具有抗锯齿特性，边缘更平滑，同时文本可以设置透明度，还可以旋转。缺点就是增加程序的文件大小，字体小于10时就很难辨认。

<mx:Style>
		@font-face {
			src:local("Arial"); //嵌入字体local,表示本机系统中的字体
			src:url("./Arial.swf"); //指定的字体文件地址，将字体房子SWF文件中，然后加载它。
			fontFamily: myFont; //字体的别名，必须定义
			fontStyle: normal;  //可选项，默认normal 正常，italic 斜体 oblique 倾斜
			fontWeight: normal; //可选项，默认normal 正常，bold 粗体 heavy 加倍粗体
			flashType: true;  //可选项，默认true，添加文本的额外信息，使得文本抗锯齿，平滑显示

                       //限制嵌入的字符。字符编码必须采用Unicode标准。
                       unicodeRange:
				U+0041-U+005A, //大写字母A-Z
				U+0061-U+007A, //小写字母a-z
				U+0030-U+0039, //数字0-9
				U+002E-U+002E, //点.
		}

</mx:Style>

 

定义字符的方法也可以在Flex SDK 2\frameworks\flex-config.xml中添加相关信息。

在@font-face中就可以这样使用：unicodeRange:"englishRange"

<fonts>
        <languages>
          <language-range>
            <lang>englishRange</lang>
            <range>U+0020-U+007E</range>
          </language-range>
        </languages>
</fonts>  

 

flash-unicode-table.xml列出了绝大部分语言的Unicode的字符范围。可以参考并将copy到flex-config.xml中。

评论

2 楼 273289658 2009-02-18  

我在学Flex   支持了

1 楼 enboga 2008-11-05  

Xiaoyu64814361 写道

大哥··你的东西每次总是缺胳膊少腿的，本人又想学，不看你的我心里又不舒服，看了一半想试试，一粘贴你的代码就报错。大哥既然是教程就搞点示例代码提供下载吧··

不好意思. 因为是学习笔记, 所以是在我自己的基础上去写的. 可能有些地方让人看不懂
最近比较忙都没有更新. 现在我开始重新更新. 我会贴一些别人弄的实例