第10章使用列表和表格ppt課件

1、第10章 運用列表和表格用戶界面中，常利用表格和列表顯示數(shù)據(jù)的條目和詳細信息。Flex設(shè)計了不同的控件來實現(xiàn)列表和表格，不僅可以將數(shù)據(jù)顯示在表格和列表中，還可以實現(xiàn)對數(shù)據(jù)進展支配、修正等更為強大的功能。由于這些控件的數(shù)據(jù)格式都需是格式化的數(shù)據(jù)，數(shù)據(jù)提供器讀取構(gòu)造化的數(shù)據(jù)，這些控件也稱之為數(shù)據(jù)驅(qū)動控件Data-driven Controls。與列表和表格相關(guān)的控件如下所示。列表控件List Control：將數(shù)據(jù)顯示在垂直的列表中。程度列表控件HorizontalList Control：與列表控件類似，程度列表控件那么是以程度的方式橫向閱讀數(shù)據(jù)。片式列表控件TileList Control：與

2、上述2種列表控件類似，片式列表中不僅可以顯示文字、數(shù)據(jù)，還可以顯示該數(shù)據(jù)相關(guān)的圖片。組合框控件ComboBox Control與其他列表式控件不同，組合框控件只需占用很少的界面控件，單擊控件中的下拉箭頭，可動態(tài)彈出列表欄選擇需求的數(shù)據(jù)選項。數(shù)據(jù)表格控件DataGrid Control對于某一類數(shù)據(jù)，往往包括很多數(shù)據(jù)項，比如一個學生的數(shù)據(jù)包括：年齡、性別、出生年月等，利用數(shù)據(jù)表格控件，可以以行和列的方式表達多個學生的詳細信息。樹形控件Tree Control：將構(gòu)造化的數(shù)據(jù)顯示到樹形的構(gòu)造中。在樹形控件中的，利用樹形的葉子節(jié)點以及葉子節(jié)點的雙親節(jié)點表示數(shù)據(jù)之間的關(guān)聯(lián)。10.1 列表和表格控件接口

3、類 上述幾種控件在Flex中，都同樣直接或間接地承繼mx.controls.listClasses.ListBase類。所以在這些控件中均承繼該類的屬性和事件。本節(jié)簡要引見ListBase類屬性和方法。10.1.1 ListBase類屬性ListBase類的屬性主要圍繞控件的行、列、數(shù)據(jù)和控件其他功能。由于屬性較多，這里只選擇常用的進展講述。ListBase類常用屬性如表所示。10.1.2 ListBase類事件ListBase類事件是運用列表和表格控件時涉及的相關(guān)事件，詳細有如下幾種：change：當控件的selectedIndex和selectedItem屬性值發(fā)生改動時，觸發(fā)該事件。da

4、taChange：在運用其他組件作為控件的條目渲染器時，利用data屬性指定在控件中顯示的內(nèi)容，當該內(nèi)容改動時觸發(fā)該事件。itemClick：當用戶單擊條目時，觸發(fā)該事件。itemDoubleClick：當用戶雙擊條目時，觸發(fā)該事件。itemRollOut：當鼠標在條目上滾動時，觸發(fā)該事件。itemRollOver：當鼠標停留在某個條目上，觸發(fā)該事件。每次鼠標停留在條目上時，控件高亮顯示該條目。10.2 列表 列表控件List Control將數(shù)據(jù)顯示在垂直的列表中。用戶在顯示的數(shù)據(jù)條目中選擇本人需求列項。假設(shè)列表數(shù)據(jù)的尺寸超出控件的尺寸時?？梢酝蟿涌丶械某潭然蛘叽怪钡臐L動條顯示。列表控件如

5、下圖。10.2.1 列表控件標簽 在Flex中運用標簽創(chuàng)建列表控件。同時列表控件的外觀及事件都是由控件的屬性定義。列表控件的屬性除集成ListBase類的屬性外，還包括如表所示的常用屬性。10.2.2 列表控件事件列表控件的事件除承繼ListBase類的事件外還包括條目編輯時的事件。條目編輯事件如下所示：itemEditBegin：當對條目進展編輯，即editedItemPosition屬性被賦值時，觸發(fā)該事件。該事件闡明條目處于預備被編輯的形狀。itemEditBeginning：用戶單擊條目時進入itemEditBegin形狀，在用戶釋放鼠標時，觸發(fā)該事件，進入條目編輯形狀。itemEdi

6、tEnd：完成條目編輯。當編輯后的數(shù)據(jù)從條目編輯器中保管到數(shù)據(jù)提供器中時，觸發(fā)該事件。itemFocusIn：當鼠標焦點停留在條目渲染器時，觸發(fā)該事件。itemFocusOut：當條目渲染器失去鼠標焦點時，觸發(fā)該事件。scroll：假設(shè)控件中出現(xiàn)滾動條，那么拖動滾動條時觸發(fā)該事件。上述幾個事件的事件對象類型均為mx.events.ListEvent。10.2.3 創(chuàng)建列表控件 創(chuàng)建列表控件運用的是標簽。經(jīng)過為列表控件設(shè)置不同的屬性和事件滿足不同的需求。為了更清楚的講述如何創(chuàng)建控件，如何運用控件的事件和更復雜的屬性。這里采用由淺至深的順序，首先從最簡單的例子講述。10.2.4 列表控件事件定義列

7、表控件事件是為與列表控件相關(guān)的事件創(chuàng)建事件處置函數(shù)。上面的兩個例子為簡單的列表控件例子，只顯示需求的數(shù)據(jù)標簽，而無其他功能。但是在實踐需求中，在用單擊相應(yīng)條目時，或者當鼠標在各條目上滾動時，都需求與用戶進展交互。下面的這個例子顯示了，當鼠標在列表條目上滾動時顯示條目的data值，在單擊條目時，彈出對話框顯示用戶選中條目內(nèi)容。圖為鼠標在條目上滾動的效果，圖為單擊相應(yīng)數(shù)據(jù)條目時，顯示彈出對話框。10.3 列表控件中操作 在運用列表控件的過程還可以對列表控件相應(yīng)的操作，主要包括顯式提示、運用圖標、編輯列表條目中數(shù)據(jù)。下面逐一引見這些操作。10.3.1 運用數(shù)據(jù)提示在運用列表過程中，當鼠標停留在條目上

8、時，可以顯示該條目的相關(guān)數(shù)據(jù)提示。當利用滾動條時，可以顯示滾動條的相關(guān)提示。在列表控件中運用showDataTips和showScrollTips屬性指明能否顯示條目提示和滾動條提示。當showDataTips為true時，鼠標在每行的條目上停留時，都會顯示該條目的提示。默許情況下顯示的是數(shù)據(jù)label屬性中的內(nèi)容。假設(shè)需求讀取數(shù)據(jù)中其他屬性的內(nèi)容，可以運用dataTipField屬性指定顯示的內(nèi)容。假設(shè)上述2種依然不能滿足要求，可以運用dataTipFunction屬性指明定義顯示內(nèi)容的方法，dataTipFunction屬性方法的格式如下所示。myDataTipFunction(item:

9、Object):String /定義方法的內(nèi)容Return 顯示的內(nèi)容 10.3.2 在列表控件中運用圖標上面的例子都是在列表的條目中顯示單一的文字，假設(shè)能為數(shù)據(jù)配上圖標，那么就可以更籠統(tǒng)表達數(shù)據(jù)。而列表控件提供了為數(shù)據(jù)項顯式圖標的功能。在列表控件中，可以運用iconField和iconFunction屬性定義圖標相關(guān)的屬性以及方法。iconField屬性指明在數(shù)據(jù)中圖標文件的地址是由哪項數(shù)據(jù)提供的。圖為一個在列表控件中顯示數(shù)據(jù)項圖標的例子。10.3.3 編輯列表條目中數(shù)據(jù)編輯列表中的數(shù)據(jù)時，需求將editable屬性設(shè)為true。在編輯數(shù)據(jù)的時候也觸發(fā)相應(yīng)的事件。圖是一個編輯數(shù)據(jù)的例子，當鼠

10、標單擊條目時，觸發(fā)itemEditBeginning事件條目顯示為一個文本輸入控件，在控件中可以修正文字。當修正終了后，鼠標單擊條目之外的區(qū)域時觸發(fā)itemEditEnd事件，條目顯示為編輯后的文字。單擊該條目，在控件下方的文本區(qū)域顯示當前條目的標簽，如下圖10.4 程度列表程度列表控件HorizontalList Control與列表控件的不同點在于，列表控件以垂直的方式顯示數(shù)據(jù)條目，程度列表控件運用程度方向顯示數(shù)據(jù)條目。假設(shè)只在列表中運用文字，那么程度列表與列表控件的創(chuàng)建方式一樣的。但在實踐的運用中，程度列表控件較常用來表示圖片，例如相冊中圖片的顯示、產(chǎn)品圖片的展現(xiàn)等。在程度斜砜丶校蓯譴幼

11、蟮接蟻允咎蹌康摹假設(shè)列表項超出控件的范圍，可以利用滾動條查看剩余的條目。圖是一個展現(xiàn)手機圖片的程度列表控件。10.4.1 程度列表控件標簽 程度列表控件對應(yīng)的MXML標簽為，該控件的屬性承繼ListBase類的屬性。屬性和事件都可以參照列表控件的屬性。10.4.2 創(chuàng)建程度列表控件在創(chuàng)建程度列表控件時，只需插入控件的標簽，定義相應(yīng)的屬性和事件即可。下面以圖為例引見簡單的程度列表創(chuàng)建。圖片的顯示是借助圖片控件Image Control實現(xiàn)的。程度列表控件利用條目渲染器將圖片控件嵌入其中。圖的代碼如下所示。 10.4.3 運用條目渲染器 上面的例子采用在條目中完全顯示圖片的方式.有時，也需求為圖片

12、配上闡明文字。假設(shè)要實現(xiàn)圖片和文字同時顯示，也需求運用條目渲染器。由于需求將文字和圖片顯示在同一區(qū)域內(nèi)，只能本人定制組件，再將組件嵌入到控件中，效果如下圖。10.5 瓦片式列表 瓦片式列表控件TileList Control的外觀與程度列表控件的外觀類似。程度列表控件常用于在條目中同時顯示圖片和文字，而瓦片式列表控件中每個條目像瓦片一樣陳列中控件區(qū)域中。瓦片式控件的可以多行顯示，而與程度列表控件只能單行顯示。圖為瓦片式列表控件的一個例子。10.5.1 瓦片列表控件標簽 瓦片列表控件對應(yīng)的標簽為，控件的屬性和事件可以運用列表控件的屬性和事件設(shè)定。該控件默許的條目渲染器為TileListItemR

13、enderer。10.5.2 創(chuàng)建瓦片列表控件創(chuàng)建該控件時，方法與創(chuàng)建程度列表控件類似。在運用圖形和文字時可以運用默許的條目渲染器，也可以根據(jù)需求本人定義條目渲染器。首先引見默許的條目渲染器TileListItemRenderer。它包括兩個屬性：icon和text。icon屬性定義條目渲染器中的圖標，text屬性定義了條目渲染器中的文字。在圖中運用了默許的條目渲染器時圖標在上，文字在圖標下方。在運用默許條目渲染器時，TileListItemRenderer自動讀取數(shù)據(jù)中text和icon屬性值。10.6 數(shù)據(jù)表格利用表格中行和列表示數(shù)據(jù)也是用戶常用的界面元素。在Flex中，運用數(shù)據(jù)表格控件D

14、ataGrid Control可以實如今表格中顯式數(shù)據(jù)的功能。數(shù)據(jù)表格控件可以看做運用多列條目的列表來表示數(shù)據(jù)。實踐上，在表格控件中是利用行和列來確定數(shù)據(jù)中的元素。數(shù)據(jù)表格控件也是建立在列表控件根底上，所以列表控件中的許多特性可在數(shù)據(jù)表格控件上表達。除此之外，數(shù)據(jù)表格控件還具有其他功能，如下所示。編輯表格中的數(shù)據(jù)元素。在運轉(zhuǎn)時對表格中的數(shù)據(jù)進展排序。單擊表頭改動數(shù)據(jù)的陳列順序。支持自定義的表格列表。10.6.1 數(shù)據(jù)表格控件標簽 數(shù)據(jù)表格控件對應(yīng)的MXML標簽為。該控件的屬性除承繼ListBase類的屬性外，還包括一些常用屬性，如表所示。10.6.2 數(shù)據(jù)表格列項 由于在數(shù)據(jù)表格中添加了列項C

15、olumns來表達數(shù)據(jù)，所以控件需添加相應(yīng)的屬性來描畫列以及列數(shù)據(jù)上發(fā)生的事件。 在Flex中，數(shù)據(jù)表格列項也是作為一種控件出現(xiàn)的。它對應(yīng)的MXML標簽為，在該標簽內(nèi)可以定義與該列相關(guān)的內(nèi)容，如該列表頭元素的標簽等。它的一部分于屬性與數(shù)據(jù)列表控件中的是一致的，如editable屬性。數(shù)據(jù)表格控件中的editable屬性為全局屬性。只需該屬性為true時，在列項控件中定義editable屬性為true或者false時才有效。10.6.3 數(shù)據(jù)列表控件事件數(shù)據(jù)列表控件中的事件除承繼ListBase類中的事件外，還包括如下幾個事件：columnStretch：用戶改動某一行的高度時，觸發(fā)該事件。假設(shè)

16、控件不允許運用滾動條，在改動某一行高度的同時，其他行也進展收縮，以顯示在控件區(qū)域內(nèi)。headerRelease：在用戶單擊表頭對表項排序后，釋放鼠標按鍵時，觸發(fā)該事件。只需控件允許排序，該事件才處于可觸發(fā)的形狀。headerShift：當單擊表頭排序后，表中的行移至其他位置，順序發(fā)生改動時觸發(fā)該事件。itemEditBegin：當對于條目進展編輯，即editedItemPosition屬性被賦值時，觸發(fā)該事件。itemEditBeginning：用戶單擊條目時進入itemEditBegin形狀，在用戶釋放鼠標時，觸發(fā)該事件。itemEditEnd：完成條目編輯。當編輯后的數(shù)據(jù)從條目編輯器中保管

17、到數(shù)據(jù)提供器中時，觸發(fā)該事件。itemFocusIn：鼠標焦點停留在條目渲染器時，觸發(fā)該事件。itemFocusOut：條目渲染器失去鼠標焦點時，觸發(fā)該事件。10.6.4 創(chuàng)建數(shù)據(jù)列表控件 創(chuàng)建數(shù)據(jù)列表時，在代碼中插入標簽，定義標簽的屬性和控件的事件后，還需定義每列數(shù)據(jù)顯示的詳細信息。下面以圖為例引見創(chuàng)建列表控件的過程。該例運用XMLList格式的數(shù)據(jù)。在數(shù)據(jù)列表控件中也可以運用其他的層次化數(shù)據(jù)格式，詳細情況可以查看數(shù)據(jù)篇中的相應(yīng)內(nèi)容。10.6.5 定義數(shù)據(jù)表格控件事件 在數(shù)據(jù)表格中顯示數(shù)據(jù)后，往往需求對用戶在表格上的操作做出呼應(yīng)。常用的事件為單擊表格項ItemClick事件。在圖中當用戶單擊

18、數(shù)據(jù)項，在控件下方的文本區(qū)域顯示詳細信息。10.6.6 編輯數(shù)據(jù)表格中的數(shù)據(jù)項編輯數(shù)據(jù)表格中的數(shù)據(jù)項，需求將控件的editable屬性設(shè)為true。假設(shè)在中將屬性設(shè)為true，整個控件的數(shù)據(jù)都可以進展編輯。但有些時候，有的條目是不能被更改的，如員工的姓名等。對于不能更改的條目，在內(nèi)將editable屬性設(shè)為false。圖中允許對表格內(nèi)數(shù)據(jù)編輯，但是制止對姓名和性別進展編輯。10.6.7 對數(shù)據(jù)表格控件中數(shù)據(jù)排序?qū)?shù)據(jù)表格控件中數(shù)據(jù)排序是經(jīng)過單擊數(shù)據(jù)項的表頭實現(xiàn)的。默以為升序或者降序陳列該表頭下的內(nèi)容。排序的過程實踐上只是改動數(shù)據(jù)在控件中的外部表現(xiàn)，并沒有改動其在原始數(shù)據(jù)文件中的位置。陳列的順序

19、根據(jù)表格控件中相應(yīng)的屬性進展。在數(shù)據(jù)表格控件中sortableColumns屬性指明能否允許排序，默許值為true。在列項控件中運用sortable定義該列的數(shù)據(jù)能否參與排序。設(shè)定sortable屬性后，該列的排序運用默許的排序方式。假設(shè)需求自定義排序方式，可以運用sortCompareFunction指定排序的方法，編寫該方法時采用固定的構(gòu)造，如下所示。mySortCompareFunction(obj1:Object, obj2:Object):int /定義排序的方式return 序號10.7 樹形控件樹形控件用來表示構(gòu)造化的數(shù)據(jù)。在樹形構(gòu)造中包括葉子Leaf節(jié)點和樹枝Branch節(jié)點。

20、其中樹枝節(jié)點還可以包含葉子節(jié)點，而葉子節(jié)點不可以再分解。在樹形控件中，葉子節(jié)點用文本圖標進展標識，而樹枝節(jié)點運用文件夾圖標，類似于Windows中的文件夾圖標。圖是一個樹形控件，它顯示了某個文件的目錄。10.7.1 樹形控件標簽 樹形控件對應(yīng)的MXML標簽為，該控件的屬性除承繼ListBase類的屬性外，常用屬性如表所示。10.7.2 樹形控件事件 在樹形控件中，除發(fā)生change之類ListBase中的事件外，單擊翻開樹枝節(jié)點、封鎖樹枝節(jié)點等都會觸發(fā)相應(yīng)的事件。常用的事件如下。 itemClose：當閉合樹枝節(jié)點時，觸發(fā)該事件。 itemOpen：當樹枝節(jié)點翻開或者展開時，觸發(fā)該事件。 it

21、emOpening：當初始化樹枝節(jié)點展開和閉合時，觸發(fā)該事件。 上述事件的類型均為mx.events.TreeEvent。 在編輯控件中節(jié)點的內(nèi)容時，觸發(fā)的編輯事件與列表控件一致，可以參考列表控件。10.7.3 樹形控件類的方法在編寫樹形控件的事件處置中，常需求獲得節(jié)點的雙親等屬性以及對控件進展動態(tài)操作，例如展開某個節(jié)點，可以經(jīng)過樹形控件類的方法獲得。常用的方法如下。expandChildrenOf()：展開或者封鎖節(jié)點下一切的子節(jié)點。方法有兩個參數(shù)：第一個是操作的節(jié)點，類型為Object；第二個是操作的類型，true為展開，false為封鎖。expandItem()：展開或封鎖節(jié)點。當展開或

22、封鎖節(jié)點時，控件保管子節(jié)點的形狀。該方法包含4個參數(shù)：第一個是支配的節(jié)點，類型為Object；第二個是操作形狀，true為展開，false為封鎖；第三個能否激活轉(zhuǎn)換，默以為false，當節(jié)點的孩子超越20個時，當節(jié)點第一次翻開時，不進展轉(zhuǎn)換；第四個展開或者封鎖節(jié)點時能否觸發(fā)事件。getParentItem()：獲得當前節(jié)點的雙親節(jié)點。setItemIcon()：設(shè)置控件中的圖標。該方法包含3個參數(shù)：第一個要更改的節(jié)點，第二個是葉子節(jié)點或者閉合樹枝節(jié)點的圖標，第三個是樹枝節(jié)點翻開狀的圖標。10.7.4 創(chuàng)建樹形控件創(chuàng)建樹形控件，經(jīng)過定義控件的數(shù)據(jù)，插入控件的標簽，定義控件的屬性和事件即可。下面以

23、圖10.20為例引見簡單樹形控件的創(chuàng)建。在圖10.20中，只對數(shù)據(jù)進展展現(xiàn)，未添加其他功能，其代碼如下。 10.7.5 樹形控件事件處置 在用戶單擊樹形控件中的節(jié)點時，常需求對的事件進展處置。圖是一個單擊節(jié)點后判別能否為文件夾節(jié)點的例子。10.7.6 展開樹形控件中的節(jié)點 默許情況下，在控件初始化時，總是顯示閉合狀的根節(jié)點，如下圖。假設(shè)希望節(jié)點呈展開狀，可以運用expandItem()方法。10.7.7 改動控件中的圖標有時為了更加籠統(tǒng)地表達數(shù)據(jù)，需求改動樹形控件中不同節(jié)點的圖標。在樹形控件中可以經(jīng)過3種方式設(shè)定圖標。運用folderOpenIcon、folderClosedIcon和defa

24、ultLeafIcon屬性設(shè)定圖標。運用控件數(shù)據(jù)中的icon屬性為每個節(jié)點定義圖標。經(jīng)過setItemIcon()方法動態(tài)改動圖標。運用folderOpenIcon、folderClosedIcon和defaultLeafIcon定義圖表示只需為相應(yīng)的屬性賦值即可，這里不再詳述，只引見后2種方式。圖運用icon字段定義圖標。圖的根底上，經(jīng)過單擊【改動圖標】按鈕再次改動圖標。10.8 渲染條目在列表類的控件中，如何顯示列表都是由控件的條目渲染器ItemRenderer實現(xiàn)的。條目渲染器在Flex 1.5以及ActionScript中都被稱之為單元渲染器CellRenderer。Flex 2將單元

25、渲染器進展修訂更名為條目渲染器，更加靈敏的定制條目顯示。在每個控件中都有默許的條目渲染器。同時這些控件也提供相應(yīng)的屬性以及方法，去運用其他組件或者自定義組件作為控件的條目渲染器。在本章前面的控件引見中曾經(jīng)講述過條目渲染器的運用，如程度列表控件和瓦片式列表控件。運用條目渲染器有多種方式。例如運用列表類控件中內(nèi)置的渲染器和編輯器、運用其他控件定義、自定義組件，本節(jié)將從這幾個方面引見如何運用條目渲染器。10.8.1 運用默許的條目渲染器在列表類控件中，每個控件都擁有本人的默許的條目渲染器。如在數(shù)據(jù)表格中運用DataGridItemRenderer。DataGridItemRenderer運用文本控件

26、表示數(shù)據(jù)表格中的條目。而其他幾種默許的條目渲染器，如ListItemRenderer、MenuItemRenderer、MenuBarItem、TileListItemRenderer和TreeItemRenderer都運用文本和圖片組合的方式表示條目。在前面講述列表控件時，為列表項添加圖標就運用了ListItemRenderer。圖是一個運用默許條目渲染器的例如。10.8.2 運用其他控件作為條目渲染器在Flex中，有很多控件可以作為列表類控件的條目渲染器，如按鈕控件、復選框控件、日期選擇控件、圖片控件、標簽控件、數(shù)字步進器控件文本控件和文本區(qū)控件文本輸入控件。在運用這些控件時，在組件的itemRenderer屬性后填寫相應(yīng)組件的類名即可。例如運用按鈕控件時的代碼如下。itemRenderer=“mx.controls.Button下面的例子在數(shù)據(jù)表格的第一列和最后一列分別運用了圖片和數(shù)字步進器控件作為條目渲染器。如下圖。10.8.3 自定義組件作為條目渲染器 上面的例子中運用Flex中的控件作為