第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美化界面的用法，本章介紹更多的美化應用，如自定義字體、自定義光標等。