在List組件中使用渲染器

　　 

　　在網上看過很多人轉載darronschall的LabelCellRenderer例子，其中有個錯誤，把myList.cellRenderer=LabelCellRenderer;這行代碼放到了注釋里面去了，但是到處轉載的依然沒有修正（其實原文是正確的）。其實看了這個我們并沒有求甚解，要知道授人予魚，不如授人予漁。

我們再來看下為什么通過cellrenderer可以給List、DataGrid、Tree和Menu 組件以及其它列表組件增強單元格內容顯示。我們首先要從List組件開始分析，List類至關重要。DataGrid、Tree 和Menu 組件是 List類的擴展。List類由行構成。這些行顯示滑過和選區突出顯示，用作行選區的點擊狀態，并在滾動中扮演重要的角色。除了選區突出顯示和圖標（如節點圖標和Tree組件的展開箭頭）之外，行還包含一個單元格（或者，如果是DataGrid，則包含多個單元格）。在默認情況下，這些單元格是實現CellRenderer API 的 TextField對象。但是，您可以讓 List使用不同的組件類作為每一行的單元格。唯一的要求是該類必須實現 List 用于與單元格通信的CellRenderer API。List類使用一種非常復雜的算法進行滾動。一個列表只會列出它一次能顯示的最多行數，超出rowCount屬性的值的項目根本不會獲得行。在列表滾動時，它會將所有行上下移動（取決于滾動方向）。然后，列表將重復使用滾出視圖的行；列表會重新初始化這些行，并使用它們作為正在滾入視圖的新行，方法是將舊行的值設置為視圖中的新行，然后將舊行移到新項目滾入視圖的位置。要使用CellRendererAPI，您必須編寫包含下面四個方法的類

　　CellRenderer.getPreferredborder=1Height()返回單元格的首選高度

　　CellRenderer.getPreferredWidth()返回單元格的首選寬度

　　CellRenderer.setSize() 設置單元格的寬度和高度

　　CellRenderer.setValue()設置要顯示在單元格中的內容基于列表的組件將使用該類與單元格通信。這就是我們看到的darronschall定義的LabelCellRenderer類。系統將為單元格自動指定兩個方法和一個屬性

　　CellRenderer.getCellIndex()返回包含單元格渲染器數據字段的名稱的字符串

　　CellRenderer.getDataLabel()返回包含兩個字段（columnIndex和 rowIndex）的對象，這兩個字段指明單元格的位置

　　CellRenderer.listOwner指向包含單元格的列表的引用以便允許它與基于列表的組件通信。例如，假設單元格內包含一個復選框，該復選框導致行在單擊時被選中。單元格渲染器需要引用包含它的基于列表的組件，以便調用基于列表的組件的selectedIndex屬性。同時，單元格需要知道它當前正在渲染的項目索引，以便能夠將 selectedIndex設置為正確的編號；單元格可以使用CellRenderer.listOwner 和CellRenderer.getCellIndex()達到此目的。您不需要實現這些API；在將單元格放到基于列表的組件內時，單元格將自動接收這些API。我們來看下LabelCellRenderer類實現的這幾個方法代碼：functioncreateChildren(Void): Void

　　label = createObject(Label, label, 1,styleName:this,owner:this );

　　label.html = true;

　　size();// setSize is implemented by UIComponent and callssize(),after setting// __width and __border=1 Heightfunctionsize(Void) : Void

　　label.setSize(__width, __border=1 Height);

　　// make sure the label field is in the top-center corner

　　// of the row

　　label._x = 0;

　　label._y = 0;function setValue(str:String,item:Object,sel:Boolean) : Void

　　// hide the label if no data to display

　　label._visible = (item!=undefined);

　　// this line actually sets htmlText

　　label.text = item.label;function getPreferredborder=1Height(Void) :Number

　　// this is the border=1 Height with the default font, youmight

　　// need to adjust this to suit your needs

　　return 18;function getPreferredWidth(Void) : Number

　　// default to the width of the listbox

　　return__width;其中用來顯示html標記的就是setValue方法了。我們定義了這個類后，剩下就是對List組件來設置新的單元格渲染器了。使用下面的代碼：1://LabelCellRenderer就是指定單元格渲染的連接ID2 : myList.cellRenderer=LabelCellRenderer;也許看完這些，你可以做出更好效果的渲染器來。要注意的是，只有flashMX2004的List組件才支持。

　　作者：Liu21st

原文轉自：http://www.kjueaiud.com