第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 图像组件 p_w_picpath
<mx:p_w_picpath 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美化界面的用法，本章介绍更多的美化应用，如自定义字体、自定义光标等。