FLEX技術(shù)之二——控件和容器.ppt

1、FLEX技術(shù)之二控件和容器,康玉忠 KYZEAL 廣東科學(xué)技術(shù)職業(yè)學(xué)院,FLEX技術(shù)之二控件和容器,1Flex 3提供哪些控件 2Flex 3提供哪些容器 3如何設(shè)置組件大小 4組件定位和布局的方法 5簡(jiǎn)介數(shù)據(jù)提供程序和集合 應(yīng)用實(shí)踐,知識(shí)回顧客戶端技術(shù),B/S,SOA/RIA,Pros： 容易部署 Cons： 瀏覽器混雜 用戶體驗(yàn)差 服務(wù)器壓力大 客戶端計(jì)算資源浪費(fèi),Rich Internet Application 可以看做是基于web的C/S架構(gòu) Pros： 用戶體驗(yàn)好,帶寬加大 客戶端性能提高 對(duì)用戶體驗(yàn)的要求增加,對(duì)部署能力的需求,知識(shí)回顧什么是Flex,Flex 基于Flash F

2、lex是為程序員設(shè)計(jì)的Flash Flex的開(kāi)發(fā)語(yǔ)言：ActionScript、MXML、CSS。 可以把Flex當(dāng)作Flash Flash：專注平面動(dòng)畫(huà)、廣告設(shè)計(jì)、多媒體處理 Flex： 一種RIA解決方案，針對(duì)企業(yè)級(jí)網(wǎng)絡(luò)應(yīng)用。,- Flash for Developer,知識(shí)回顧FLEX的應(yīng)用程序框架,FLEX的應(yīng)用程序框架（一個(gè)庫(kù)、兩個(gè)語(yǔ)言） Mxml是flex的標(biāo)記語(yǔ)言，用來(lái)描述界面，同Html非常相似，而且mxml更加規(guī)范化和標(biāo)準(zhǔn)化。 Mxml最終會(huì)被編譯器解析為Action Script,然后生成flash的swf文件。,MXML,Action Script,SWF,知識(shí)回顧開(kāi)發(fā)F

3、lex應(yīng)用程序的步驟,開(kāi)發(fā)Flex應(yīng)用程序的步驟： 1。 布置組件以設(shè)計(jì)用戶界面。 2。 使用樣式和主題來(lái)增強(qiáng)視覺(jué)方面的設(shè)計(jì)。 3。 添加動(dòng)態(tài)行為（例如程序部件之間的相互作用） 。 4。 將源代碼編譯成SWF文件,知識(shí)回顧MXML,知識(shí)回顧MXML,MXML語(yǔ)言是專門用于Flex程序中，描述界面表現(xiàn)的一中XML標(biāo)記語(yǔ)言。我們可以用它來(lái)管理程序的整體布局，控制組件的樣式和外觀，也可以構(gòu)建非可視化的對(duì)象，比如XML數(shù)據(jù)、與服務(wù)器端通信的WebService、組件的數(shù)據(jù)源等。,知識(shí)回顧MXML語(yǔ)法,命名規(guī)范 MXML區(qū)分大小寫(xiě)，且文件名和變量標(biāo)示名都區(qū)分大小寫(xiě)。 MXML文件以mxml作為擴(kuò)展名，文

4、件名要遵循AS中變量的命名規(guī)則。 所有的MXML都被視為用戶自定義的組件，相當(dāng)于對(duì)象，可以使用代碼動(dòng)態(tài)創(chuàng)建。,知識(shí)回顧MXML使用控件,使用控件 定義一個(gè)按鈕控件 如果控件中未包含其他子元素可這樣寫(xiě)：,知識(shí)回顧MXML使用組件,Panel 容器包括標(biāo)題欄、標(biāo)題、邊框及其子項(xiàng)的內(nèi)容區(qū)域。通常，您使用 Panel 容器包圍頂級(jí)應(yīng)用程序模塊。它也是開(kāi)發(fā)中常用的一種容器。,知識(shí)回顧AS腳本處理,知識(shí)回顧應(yīng)用程序拓展處理P24, ,知識(shí)回顧應(yīng)用程序拓展處理P24, ,FLEX技術(shù)之二組件,Flex應(yīng)用程序的界面通常由各種各樣的組件來(lái)構(gòu)建。 例如，本應(yīng)用程序包括了Panel容器組件、按鈕組件、區(qū)域文本框組

5、件等。 不同的組件有其特有的功能，如按鈕組件的單擊動(dòng)作和雙擊動(dòng)作。用戶可選擇不同的組件來(lái)滿足應(yīng)用程序的要求。,FLEX技術(shù)之二組件,在Flex Builder 3中為了用戶使用方便，將可見(jiàn)組件分成以下幾類： 控件：存放基礎(chǔ)的控制組件，如按鈕組件、文本組件、下接框組件。 數(shù)據(jù)控件：存放數(shù)據(jù)呈現(xiàn)組件，如網(wǎng)格組件、下拉列表組件、樹(shù)組件等。 布局：存放布局組件，如窗口組件、表單組件。 導(dǎo)航器：存放導(dǎo)航組件，如Tab條組件、按鈕條組件。 Adobe AIR（Adobe AIR組件）：存放Adobe AIR組件。 圖表：存放圖表組件。 定制：存放用戶自定義組件,FLEX中的組件,Flex的組件非常豐富，這

6、些組件在Sdk里都有例子。但是要完成企業(yè)級(jí)應(yīng)用還是需要自己去擴(kuò)展，如分頁(yè)組件。Flex SDK代碼都是開(kāi)源的，所以擴(kuò)展起來(lái)比較方便。,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,ButtonBar導(dǎo)航組件應(yīng)用 按不同的按鈕顯示不同的內(nèi)容：,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,ButtonBar導(dǎo)航組件應(yīng)用 按不同的按鈕顯示不同的內(nèi)容：,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,1.界面布局, ,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,2.ButtonBar導(dǎo)航的按鈕標(biāo)簽內(nèi)容： 3.觸發(fā)事件：, Flash Director Dreamweaver

7、Flex ,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,4.代碼：按鈕顯示不同的內(nèi)容, Flash Director Dreamweaver Flex ,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,5.完整代碼：, Flash Director Dreamweaver Flex ,FLEX技術(shù)之二實(shí)例之一ButtonBar導(dǎo)航組件,6.試一試,FLEX技術(shù)之二組件設(shè)置大小,在 Flex 應(yīng)用程序中設(shè)置組件的大小方法有三種: 自動(dòng)大小 使用屬性設(shè)置絕對(duì)值大小 使用屬性設(shè)置%相對(duì)大小,FLEX技術(shù)之二容器,布局容器和導(dǎo)航容器,容器定義 Adobe Flash Player 的繪圖表

8、面的一個(gè)矩形區(qū)域。在容器內(nèi), 可以定義希望出現(xiàn)在容器內(nèi)的組件, 包括控件和容器。在容器內(nèi)定義的組件稱為容器的子級(jí)。Adobe Flex 提供范圍廣泛的容器, 從簡(jiǎn)單的框到面板和表單, 到在子容器之間提供內(nèi)置導(dǎo)航 的元素 (如折疊式導(dǎo)航器或選項(xiàng)卡式導(dǎo)航器)。,FLEX技術(shù)之二容器,在 Flex 應(yīng)用程序中定位組件的方法有三種: 使用自動(dòng)定位 使用絕對(duì)定位 使用基于限制的布局,對(duì)于使用自動(dòng)定位的容器, 直接設(shè)置其子組件的 x 或 y 屬性或調(diào)用 move() 方法 下列屬性是最常見(jiàn)的: layout: 可能的值有 “horizontal”、 “vertical”或 “absolute”。 當(dāng)設(shè)置為

9、 “horizontal”時(shí), 容器會(huì)將其子級(jí)布局在一行內(nèi)。 當(dāng)設(shè)置為 vertical時(shí), 容器會(huì)將其子級(jí)布局在一列內(nèi)。 horizontalAlign: 可能的值有 left、 center或 right。 verticalAlign: 可能的值有 top、 middle或 bottom。,FLEX技術(shù)之二容器,在 Flex 應(yīng)用程序中定位組件的方法有三種: 使用自動(dòng)定位 使用絕對(duì)定位 使用基于限制的布局,使用絕對(duì)定位, 你通過(guò)使用其 x 和 y 屬性來(lái)指定子控件的位置, 有三個(gè)容器支持絕對(duì)定位: 如果您將 layout 屬性指定為 absolute, 則 Application 和 Pa

10、nel 控件使用絕對(duì)定位。 Canvas 容器始終使用絕對(duì)定位。 使用絕對(duì)定位是使 Flex 控件重疊的唯一方法。,FLEX技術(shù)之二容器,與CSS BOX模型類型，F(xiàn)lex容器組件有自己的BOX模型。但，區(qū)別在于Flex盒子僅有：padding，border，content。而沒(méi)有CSS盒子中的mergin,FLEX技術(shù)之二容器,在 Flex 應(yīng)用程序中定位組件的方法有三種: 使用自動(dòng)定位 使用絕對(duì)定位 使用基于限制的布局,您可以通過(guò)使用基于限制的布局同時(shí)管理子組件大小和定位子組件, 在該布局中您錨定組件 的側(cè)邊或中心以相對(duì)于組件的容器進(jìn)行定位。 您可以使用基于限制的布局來(lái)確定支持絕對(duì)定位的任

11、何容器的即時(shí)子級(jí)的位置和大小。 您通過(guò)使用子組件的 top、 bottom、 left、 right、 horizontalCenter或 verticalCenter 樣式屬性來(lái)指定限制。,Alert,Alert 控件是一個(gè)彈出對(duì)話框，可能包含消息、標(biāo)題、按鈕（“確定”、“取消”、“是”和“否”的任意組合）和圖標(biāo)。Alert 控件是模式控件，這意味著在用戶將其關(guān)閉之前，它將一直保留焦點(diǎn)。 例如： Alert.show(你喜歡FLEX嗎？,友情提示,Alert.OK | Alert.CANCEL,this,clickHandler); function clickHandler(event:C

12、loseEvent):void if (event.detail = Alert.OK) but.label=我非常喜歡FLEX!; if (event.detail = Alert.CANCEL) but.label=不，我非常不喜歡FLEX!; ,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之一ButtonBar導(dǎo)航組件 2如何設(shè)置Alert對(duì)話框 P35 3如何修改按鈕控件外觀 P40 4如何實(shí)現(xiàn)具有定時(shí)功能的按鈕 P42 5 如何實(shí)現(xiàn)字體下拉框 P45 6如何實(shí)現(xiàn)聯(lián)動(dòng)下拉框 P47,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之一ButtonBar導(dǎo)航組件 2如何設(shè)置Alert對(duì)話框 P35 3如何修改按鈕控件外觀 P40 4如何實(shí)

13、現(xiàn)具有定時(shí)功能的按鈕 P42 5 如何實(shí)現(xiàn)字體下拉框 P45 6如何實(shí)現(xiàn)聯(lián)動(dòng)下拉框 P47,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之一ButtonBar導(dǎo)航組件 2如何設(shè)置Alert對(duì)話框 P35 3如何修改按鈕控件外觀 P40 4如何實(shí)現(xiàn)具有定時(shí)功能的按鈕 P42 5 如何實(shí)現(xiàn)字體下拉框 P45 6如何實(shí)現(xiàn)聯(lián)動(dòng)下拉框 P47,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之一ButtonBar導(dǎo)航組件 2如何設(shè)置Alert對(duì)話框 P35 3如何修改按鈕控件外觀 P40 4如何實(shí)現(xiàn)具有定時(shí)功能的按鈕 P42 5 如何實(shí)現(xiàn)字體下拉框 P45 6如何實(shí)現(xiàn)聯(lián)動(dòng)下拉框 P47,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之一ButtonBar導(dǎo)航組件 2如何設(shè)置Alert對(duì)話框 P35 3如何修改按鈕控件外觀 P40 4如何實(shí)現(xiàn)具有定時(shí)功能的按鈕 P42 5 如何實(shí)現(xiàn)字體下拉框 P45 6如何實(shí)現(xiàn)聯(lián)動(dòng)下拉框 P47,實(shí)戰(zhàn)任務(wù),1完成實(shí)例之