第二講_flex控件.ppt

1、flex控件,魏濤,本章內(nèi)容,基本控件 容器控件 數(shù)據(jù)驗證控件 特效控件 報表控件,基本控件,Alert控件 DateChooser控件 Menu控件 MenuBar控件 PopUpMenuButton控件,Alert,Alert 控件是一個彈出對話框，可能包含消息、標(biāo)題、按鈕（“確定”、“取消”、“是”和“否”的任意組合）和圖標(biāo)。Alert 控件是模式控件，這意味著在用戶將其關(guān)閉之前，它將一直保留焦點。 例如： Alert.show(你喜歡FLEX嗎？,友情提示,Alert.OK | Alert.CANCEL,this,clickHandler); function clickHandler

2、(event:CloseEvent):void if (event.detail = Alert.OK) but.label=我非常喜歡FLEX!; if (event.detail = Alert.CANCEL) but.label=不，我非常不喜歡FLEX!; ,DateChooser,DateChooser控件通常結(jié)合DateField一起使用。DateChooser是日歷面板，可以選取時間， DateField是將所選取的日期字符串顯示在輸入框中。 比較兩個時間，例如： var d1:Number = Date.parse(start_date.selectedDate); var d

3、2:Number = Date.parse(end_date.selectedDate); if(d1 d2) Alert.show(結(jié)束時間必須在開始時間以后,ERROR); ,Menu,Menu 控件創(chuàng)建可分別選擇的選項的彈出菜單，此彈出菜單類似于大多數(shù)軟件應(yīng)用程序中的“文件”或“編輯”菜單。彈出菜單可以具有所需的任何數(shù)目的子菜單級別。打開 Menu 控件后，此控件將一直可見，直到通過下列任一操作將其關(guān)閉： 調(diào)用 Menu.hide() 方法。 用戶選擇已啟用的菜單項。 用戶在 Menu 控件外部單擊。 用戶選擇該應(yīng)用程序中的其它組件。,Menu,首先需要數(shù)據(jù)源，例如： ,MenuBar,

4、MenuBar 控件的頂級菜單欄始終可見。此控件不適合用作彈出菜單。當(dāng)用戶使用鼠標(biāo)或鍵盤進行選擇時，將彈出相應(yīng)的子菜單。如果選擇了某個菜單項，或者用戶通過在菜單外單擊取消了該菜單，打開的子菜單將會消失。,PopUpMenuButton,PopUpMenuButton 控件可創(chuàng)建一個 PopUpButton 控件，帶有一個主子按鈕和一個輔助子按鈕。單擊輔助（右）子按鈕會下拉一個菜單，可通過 dataProvider 屬性對其填充。與 Menu 和 MenuBar 控件不同，PopUpMenuButton 控件僅支持單級菜單。這就意味著此菜單不能包含級聯(lián)子菜單。,PopUpMenuButton,也

5、可以采用Array賦值方式，例如： var dp:Array = label:Flash動畫王, data:id_001, label:Flash開發(fā)王,data:id_001, label:Flex開發(fā)王, data:id_001 ; pmb.dataProvider = dp; pmb.addEventListener(itemClick, showitem);,本章內(nèi)容,基本控件 容器控件 數(shù)據(jù)驗證控件 特效控件 報表控件,容器控件,VBox, HBox容器 Grid容器 Panel容器 ApplicationControlBar容器,了解盒子容器,與CSS BOX模型類型，F(xiàn)lex容器

6、組件有自己的BOX模型。但，區(qū)別在于Flex盒子僅有：padding，border，content。而沒有CSS盒子中的mergin,VBox, HBox,VBox 容器將其子項放在同一垂直列上 HBox 容器在單個水平行中布置其子容器 使用clipContent屬性 如果容器組建的clipContent屬性被設(shè)置為false，超出容器幅面大小的部分會溢出，并不會顯示滾動條,Grid,Grid 容器與html表格功能類似，它允許您按單元格的行和列來排列子項，這與 HTML 表相似。Grid 容器包含一行或多行，并且每行可以包含一個或多個單元格或項目。您應(yīng)使用下列標(biāo)簽來定義 Grid 控件： 標(biāo)

7、簽定義 Grid 容器。 標(biāo)簽定義網(wǎng)格行，其中包含一個或多個單元格。網(wǎng)格行必須是 標(biāo)簽的子項。 標(biāo)簽定義網(wǎng)格單元格，該標(biāo)簽必須是 標(biāo)簽的子項。 標(biāo)簽可以包含任意數(shù)目的子項。,Panel,Panel 容器包括標(biāo)題欄、標(biāo)題、邊框及其子項的內(nèi)容區(qū)域。通常，您使用 Panel 容器包圍頂級應(yīng)用程序模塊。它也是開發(fā)中常用的一種容器。,ApplicationControlBar,ApplicationControlBar 容器包含提供全局導(dǎo)航和應(yīng)用程序命令的組件。例如，編輯器的 ApplicationControlBar 可以包括用于設(shè)置字體權(quán)重的 Button 控件、用于選擇字體的 ComboBox 控

8、件和用于選擇編輯模式的 MenuBar 控件。 通常將 ApplicationControlBar 容器放置在應(yīng)用程序的頂部。,本章內(nèi)容,基本控件 容器控件 數(shù)據(jù)驗證控件 特效控件 報表控件,了解驗證控件,一般情況下，程序都必須首先對用戶輸入的數(shù)據(jù)是否符合要求進行檢驗，F(xiàn)lex中也提供了這樣一組驗證器。 所有驗證器都有這兩個事件： invalid：當(dāng)驗證失敗時觸發(fā) valid：當(dāng)驗證成功時觸發(fā) 我們也可以通過控件的內(nèi)部方法完成驗證失敗后的提示消息輸出,委托按鈕觸發(fā)驗證,在傳統(tǒng)中，驗證的觸發(fā)是在失去焦點時觸發(fā)。但有些時候，針對一個表單提交，想點擊按鈕時，在驗證應(yīng)該這么做呢？ ,數(shù)據(jù)驗證控件,Nu

9、mberValidator控件 CurrencyValidator控件 PhoneNumberValidator控件 StringValidator控件 ZipCodeValidator控件 DateValidator控件 EmailValidator控件,EmailValidator,任何驗證屬性，請不要用腦力記憶，請參考文檔！,為消息添加樣式,默認情況下，輸出結(jié)果文字太小(9號)，可以采用以下方法改變輸出文字大小。 .errorTip fontSize:12px; ,本章內(nèi)容,基本控件 容器控件 數(shù)據(jù)驗證控件 特效控件 報表控件,特效控件,Flex作為一種前臺交互技術(shù)，應(yīng)用領(lǐng)域非常廣泛，連

10、QQ農(nóng)場類是的在線游戲，完成都不費吹灰之力。 在定義動畫中，行為（dehavior）則由一個觸發(fā)器和一個動畫效果組成。,在MXML組件中定義行為,定義方式共有四種，在這里不一一介紹，我們只用掌握最直觀的二種。 1：屬性綁定 2：代碼綁定 function initApp():void but.setStyle(mouseDownEffect, wl); ,動畫播放事件,所有的效果都繼承自mx.effects.Effect類，它定義了以下幾種方法來控制動畫的播放流程。 play()開始播放 end()結(jié)束播放 pause()暫停播放 resume()當(dāng)暫停時，從當(dāng)前位置繼續(xù)播放 reverse(

11、)逆向播放 stop()停止播放,可觸發(fā)的屬性,內(nèi)建動畫效果,并發(fā)、順序效果,順序效果：動畫效果按某種順序運行，有先后次序 并發(fā)效果：動畫效果同步運行，沒有先后次序 它們可以通過使用和標(biāo)簽引發(fā)并行和順序播放的次序。,為數(shù)據(jù)添加效果, Flex J2EE ,本章內(nèi)容,基本控件 容器控件 數(shù)據(jù)驗證控件 特效控件 報表控件,報表控件,PieChart columnChart,PieChart,PieChart 控件使用標(biāo)準(zhǔn)的餅圖來表示數(shù)據(jù)系列。數(shù)據(jù)提供程序的數(shù)據(jù)確定餅圖中每個楔子相對于其它楔子的大小?？墒褂?PieSeries 類創(chuàng)建標(biāo)準(zhǔn)的餅圖、環(huán)形圖或堆疊的餅圖。 PieChart 控件要求其 series 屬性包含