第3篇?组件篇
2013.11.30
CH14?使用组件构建FLEX界面
14.1?FLEX?组件概述
FLEX?组件是指用MXML标准和AS3.0?代码定义的一种可重用的控件，包括属性、方法、事件、样式。
组件根据是否由adobe公司提供，可分为基础组件和自定义组件。
组件根据是否可见，又可分为可见组件和非可见组件。非可见组件在应用程序中是不可显示的，如<mx:script>组件用于插入AS3.0代码，<mx:binding>组件用于绑定数据。
14.2?Flex可见组件
FB4中将可见组件分成以下几类：
?定制：用户自定义组件
?控件：基础的控制组件，如按钮、文本、列表
?数据控件：数据呈现组件，如网格、下拉列表、树；
?布局：如窗口、表单
?导航器：如TAB条、按钮条
?AIR组件：可嵌套HTML组件，打开本地文件系统的FileSystem
?图表：
14.4?全新的标签设计
14.4.1?Decalrations?标签
可以把非可视化组件放在Declarations标签内，如效果组件、数据组件（包括XML、XMLList、Array）、Model模型组件、数据验证组件等。同时也可以在自定义的组件中，通过Declarations标签来定义属性。
14.4.2?Library?和?Definition
Definition?标签可以定义一组FXG格式的图形。Definition标签通常被定义在library标签内。
14.4.3?private?标签
定义在private标签的元素，在编译的时候会被忽略。并且private标签必须放在文档的最后。
?
14.5?FLEX?常用组件
14.5.1?按钮组件button
<s:button?id=""?label=""?click=""?/>
14.5.2?下拉框?组件?comboBox
<mx:comboBox?id=""?dataProvider=""?/》
14.5.3?图像组件?image
<mx:image?id=""?source=""?width=""?height=""/>
14.5.4?标签组件?label
<s:label?id=""?text=""?/>
14.5.5?多行文本组件?textArea
<s:textArea?id=""?text=""/>
14.5.6?输入框组件?textInput
<s:textInput?id=""?text="/>
14.5.7?文本编辑组件?RichTextEditor
<mx:RichTextEditor?id="?"?text=""/>
?
CH15?界面设计实战
15.1?登录框实例
15.1.3?校验码
//生成随机码。生成四次随机数。若随机数是偶数则转换为一个数字，若随机数是奇数，则转换为一个字母
private?function?GenerateCheckCode():string
{
?//初始化
?var?ran:number;
?var?number:number;
?var?code:string;
?var?checkCode:string?="";
?//四位生成随机数
?for(var?i:int=0;i<4;?i++)
?{
??ran=Math.random();
??number=math.round(ran*10000)
??if(number%2==0)
???//0的ASCII码为48
???code=string.fromCharCode(48+(number%10));
??else
???//A的ASCII码为65
???code=string.fromCharCode(65+(number%26));
??checkCode?+=?code;
?}
?return?checkCode;
}
15.1.5?合法用户进入主程序
FLEX中的状态（state）类似于FLASH中的场景概念。在新状态里用户可以全部或部分地移除之前的组件，也可以加入新的组件。
currentState="";
15.2?菜单导航
15.3?柱状图实例
15.4?文件目录浏览器?（AIR）
15.5?AIR程序集成网页实例
15.6?文本编辑器（AIR）
15.7?组件数据拖拽实例
CH16?增强用户界面设计
美化界面不仅包括组件静态外观，也包括组件的动态效果。本章讲解FLEX4.0中如何自定义效果美化界面。
CH17?CSS?美化界面
17.8?使用<fx:style>组件定义CSS
CH18?美化应用CH17中介绍了使用CSS美化界面的用法，本章介绍更多的美化应用，如自定义字体、自定义光标等。
