flex 提供許多控制, 它們可以按不同方式顯示大量資料。list 控制自己、datagrid、tree 以及包括圖表和 advanceddatagrid 在內的可視類。預設情況下, flex 列表控制將提供的資料顯示為簡單文字。但 flex 的能耐遠不止此, 列表控制提供了一種使用 itemrenderer 對其內容進行自定的方式。通過允許您使用 itemrenderer 完全控制列表每行 (或單元格) 的內容, flex 使您能夠編寫出更引人注目、更具創意、更實用的應用程式。
本系列討論 flex itemrenderer 以及如何高效、有效地使用它們。本系列的第一部分側重於內聯 itemrenderer, 它們寫入描述 list 控制的 mxml 標記中。之後的文章討論使用 mxml 和 actionscript 且更為複雜的 itemrenderer。
人們經常嘗試從列表外訪問 itemrenderer。例如, 由於您剛從伺服器那裡收到新資料, 您可能要將 datagrid 中第五行的第四列變為綠色。獲取那個 itemrenderer 例項並在外部修改它對於 flex 框架和元件模型而言是乙個大工程。
要理解 itemrenderer, 您必須理解它們為何變成現在這樣以及我們當初設計它們時的目的。在此, 當我用到「我們」時, 我指的是 adobe flex 設計小組。我與它沒有關係。言歸正傳, 假設您要顯示 1,000 條記錄。如果您認為列表控制會建立 1,000 個 itemrenderer, 您就錯了。如果列表只顯示 10 行, 它會建立約 12 個 itemrenderer－這些足以顯示各個可見行, 多出的幾個則用於緩衝和效能。列表最初顯示行 1–10。當使用者滾動這個列表時, 它現在可能顯示行 3-12。但那 12 個 itemrenderer 仍在那裡: 及時滾動列表後, 也不會新建任何 itemrenderer。
以下是 flex 執行的操作。滾動列表時, 那些依然顯示相同資料 (行 3-10) 的 itemrenderer 將向上移動。它們並未發生任何變化, 只是移到了新位置。之前顯示行 1 和 行 2 資料的 itemrenderer 現在移到行 10 的 itemrendere 下。然後, 為那些 itemrenderer 提供行 11 和 行 12 的資料。換言之, 除非您調整列表大小, 否則將重用/迴圈使用那些相同的 itemrenderer－它們只是移到新位置並且現在顯示新資料。
flex 的這一行為在特定程式設計環境中使情況變得更複雜。例如, 如果要更改第五行的第四列中某個單元格的背景色, 請注意如果使用者滾動了該列表, 則該單元格的 itemrenderer 現在可能顯示第二十一行的內容。
那麼怎樣進行這類更改呢？
itemrenderer 必須根據給它們顯示的資料更改自己。如果列表的 itemrenderer 要根據資料值更改其顏色, 它必須檢視獲得的資料並更改自己。
我將在所有示例中使用相同的資料: 一組書籍相關資訊－作者、書名、出版日期和縮覽圖影象等。每個記錄是一段 xml **, 如下:
我將從使用控制的乙個簡單 itemrenderer 開始。這裡將列出作者, 後跟書名。
xml**
<
mx:list
x = "29"
y = "67"
dataprovider = ""
width = "286"
height = "190"
>
<
mx:itemrenderer
>
<
mx:component
>
<
mx:label
text = ": "
/>
mx:component
>
mx:itemrenderer
>
mx:list
>
這個 itemrenderer 太簡單了, 可能使用 labelfunction 會更好, 但它至少允許您專注於重要部分。首先, 內聯 itemrenderer 使用
您在標記中定義 itemrenderer。對於本例, 它是乙個並且文字字段設定為乙個資料繫結表示式::。這點很重要。list 控制通過設定 itemrenderer 的data屬性, 為每個 itemrenderer 例項提供 dataprovider 的記錄。對於上述**, 它意味著對於任何給定列表行, 內聯 itemrenderer 例項將自己的data屬性設定為xml 節點 (如以上節點)。當您滾動列表時,data屬性也會更改, 因為 itemrenderer 被迴圈用於新行。
換言之, 行 1 的 itemrenderer 例項現在可能將其data.author設定為「peter f. hamilton」, 但當它滾出檢視時, itemrenderer 被迴圈使用並且 (該 itemrenderer) 的data屬性現在可能將其data.author設定為「j.k. rowling」。滾動列表時, 所有這一切都會自動進行－您不必操心。
以下是複雜一些的內聯 itemrenderer, 它還是使用控制:
xml**
<
mx:list
x = "372"
y = "67"
width = "351"
height = "190"
variablerowheight = "true"
dataprovider = ""
>
<
mx:itemrenderer
>
<
mx:component
>
<
mx:hbox
>
<
mx:image
source = ""
width = "50"
height = "50"
scalecontent = "true"
/>
<
mx:label
text = ""
width = "125"
/>
<
mx:text
text = ""
width = "100%"
/>
mx:hbox
>
mx:component
>
mx:itemrenderer
>
mx:list
>
確實區別不大。這次不是
內聯渲染器上
flex 提供許多控制,它們可以按不同方式顯示大量資料。list 控制自己 datagrid tree 以及包括圖表和 advanceddatagrid 在內的可視類。預設情況下,flex 列表控制將提供的資料顯示為簡單文字。但 flex 的能耐遠不止此,列表控制提供了一種使用 itemrender...
外部渲染器上
您應該還記得我說過,應該將內聯 itemrenderer 視作單獨的類。事實上,flex 編譯器提取這些內聯 並為您建立類。內聯 itemrenderer 的優勢在於 與列表位於同一位置,但是如果 itemrenderer 變得複雜時,這又變成了劣勢。本文中我將向您展示如何自己建立類。將 itemr...
flex 渲染機制 之外部渲染器
itemrenderer 這種 itemrenderer 的 mxml 標記和 actionscript 與使用該 itemrenderer 的列表位於同一檔案中。與檔案中的其餘 內聯。將 itemrenderer 提取到乙個外部檔案有幾個優勢 itemrenderer 可輕鬆用於多個列表中 更容易...