理解 Flex itemRenderer - 第 4 部分: 狀態和過渡

原文地址：http://www.adobe.com/cn/devnet/flex/articles/itemrenderers_pt4.html

 

itemRenderer 最擅長與應用程序的用戶通信。有時通信很簡單, 只是顯示一個名稱；有時會使用更精緻的顏色；有時具有交互性。

itemEditor 是真正的交互控制, 但它們不是本文的重點。在這些示例中, 我將向您展示根據數據本身或用戶操作更改可視外觀的 itemRenderer。

本系列包含以下文章:

• 第 1 部分: 內聯渲染器
• 第 2 部分: 外部渲染器
• 第 3 部分: 通信
• 第 4 部分: 狀態和過渡
• 第 5 部分: 效率

要求

爲了充分利用本文, 您需要以下軟件和文件:

Flex Builder 3

必要條件:

要從本文中受益, 您最好熟悉 Flex Builder 和 ActionScript 3.0。

狀態

Flex <mx:State> 是更改 itemRenderer 外觀的一個理想方法。狀態使用簡便, 並且與過渡結合使用時, 可以爲用戶提供反饋和愉悅的體驗。

在本例中, 您將爲列表新建一個 MXML itemRenderer（記住, 如果您願意, 完全可以使用 ActionScript 這樣做）。這個 itemRenderer 顯示圖像、書名、作者、價格以及用於購買這本書籍的 Button。

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="/2006/mxml">
 
      <mx:Image id="bookImage" source="{data.image}" />
      <mx:VBox height="115" width="100%" verticalAlign="top" verticalGap="0" paddingRight="10">
            <mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
            <mx:Label text="{data.author}" />
            <mx:HBox id="priceBox" width="100%">
                  <mx:Label text="{data.price}" width="100%"/>
                  <mx:Button label="Buy" />
            </mx:HBox>
      </mx:VBox>
</mx:HBox>

但是, 您想要實現的是, 如果書籍售空（數據包含 <instock> 節點, 它們是 yes 或 no）, 價格和“購買”Button 會消失。我爲價格和 Button 的 HBox 父代增加了一個 id 屬性, 使此處的編碼更簡單一些。這樣, 我可以通過更改 HBox 和 priceBox 的可視性來更改那些項目的可視性。

通過覆蓋 set data 函數可以這樣做, 您將會這麼做, 但不是直接更改 priceBox 的可視性, 而是使用以下狀態定義:

      <mx:states>
            <mx:State name="NoStockState">
                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
            </mx:State>
      </mx:states>

將以下內容放在根 <mx:HBox> 標記下。

這個示例有些牽強, 因爲它過於複雜, 不適合執行簡單任務, 但它說明了如何使用狀態。有兩種狀態:

• 基本狀態: 這是組件的正常狀態。不使用狀態的組件處於基本狀態。在本例中, 基本狀態的 priceBox visible 屬性爲 true（默認）。這是當 instock 爲 yes 時的情況。
• NoStockState: 這是當 instock 的值爲 no 時的狀態。處於這個狀態時, 會執行 SetProperty 指令。target 屬性決定了哪個類成員有問題, name 屬性是目標上待更改屬性的名稱, value 是該屬性的新值。

set data 函數通過查看 instock 的值決定要使用哪個狀態:

            override public function set data( value:Object ) : void
            {
                  super.data = value;
                  
                  if( data )
                  {
                        if( data.instock == "yes" ) 
                              currentState = "";
                        else
                              currentState = "NoStockState";
                  }
            }

currentState 是所有 UIComponent 控制的屬性。它決定了哪個狀態是活動狀態。在狀態之間切換時, Flex 框架從基本狀態開始, 然後應用給定狀態的規則。

注意: 請記住 itemRenderer 是循環使用的, 所以您必須始終恢復值；不要在 itemRenderer 中保留 if 而沒有 else。

如果您感覺風險較打, 可以刪除本例中的 set data 覆蓋。使用數據綁定表達式在根標記中直接設置 currentState:

<mx:HBox xmlns:mx="/2006/mxml" width="400" currentState="{data.instock == 'yes' ? '' : 'NoStockState'}" >

通過檢查與根標記內聯的 data.instock 來設置 currentState 的值－不錯的伎倆, 但是可能較難維護。

添加元素

在這個 itemRenderer 中, 僅當 instack 值爲 yes時才顯示價格和“購買”按鈕。當然不使用狀態也可以這樣做, 但是, 如果 itemRenderer 要添加或刪除更多控制, 狀態更適合, 因爲可以通過設置 itemRenderer 的 currentState 屬性對控制外觀輕鬆實現控制。

您使用狀態添加一個標籤, 告訴用戶該商品已售空, 而不是簡單地刪除價格和 Button。以下是修改後的狀態:

      <mx:states>
            <mx:State name="NoStockState">
                  <mx:SetProperty target="{priceBox}" name="visible" value="false"/>
                  <mx:AddChild relativeTo="{priceBox}" position="before">
                        <mx:Label text="-- currently not in stock --" color="#73DAF0"/>
                  </mx:AddChild>
            </mx:State>
      </mx:states>

<mx:AddChild> 標記指明將 Label 添加到 priceBox 中。除了將 priceBox 的 visible 屬性設置爲 false, 再使用一條友好的消息替換它。

再次, 您可以將這個標籤添加到 set data 函數中－或按原樣添加它, 只需將它的可視性設置爲 false 並在 set data 函數中將它更改爲 true。但我認爲您可以看到狀態的值: 如果 instock 變爲 no 條件的要求變得更復雜, 您只需調整 NoStockState；切換狀態的 ActionScript 代碼保持不變。

注意: 可以在 Flex Builder 的“設計”視圖中修改狀態。

擴展列表項目

本例不太適合 List 控制, 但十分適合 VBox 和 Repeater。當必須滾動列表時, 這個擴展適當位置項目的問題變得有些冒險。想象一下: 列表中的項目高度相同。現在擴展項目 2 的高度。目前進展順利: 項目 2 比其他可見項目高。關鍵在這裏: visible 項目。現在滾動列表。記住 itemRenderer 是循環使用的。所以當項目 2 滾出視圖時, 它的 itemRenderer 將移到列表底部。必須重置它的高度。沒問題, 這個相當簡單。現在滾動列表, 使項目 2 重新回到視圖中。它應該是擴展後的高度。itemRenderer 怎麼知道要這樣做? 通過之前的文章, 您知道信息來自數據本身或某些外部源。

我認爲調整大小的 itemRenderer 太複雜, 並不值得這樣做。我相信使用 VBox 和 Repeater 能以更好的方式做到這一點。但是, Repeater 的關鍵在於將創建每個子代。如果您有 1000 個記錄並使用 Repeater, 您會獲得 itemRenderer 的 1000 個實例。

對於本例, 您依然編寫一個 itemRenderer, 但將它用作 VBox 的子代。列表元素看上去相當簡單: 一本書籍的名稱及其作者。但是單擊 itemRenderer, 它會擴展到位。我們使用兩種戰術做到這一點:

• itemRenderer 有一種包含附加信息的狀態。
• itemRenderer 使用一種 Resize 過渡, 爲 itemRenderer 提供更平滑的擴展和收縮。

itemRenderer 的基本狀態相當簡單:

      <mx:HBox width="100%">
            <mx:Label text="{data.author}" fontWeight="bold"/>
            <mx:Text  text="{data.title}" width="100%" fontSize="12" selectable="false"/>
      </mx:HBox>

ExpandedState 添加其他元素, 它們用於 itemRenderer 的高度:

      <mx:states>
            <mx:State name="ExpandedState">
                  <mx:AddChild position="lastChild">
                        <mx:HBox width="100%">
                              <mx:Image source="{data.image}"/>
                              <mx:Spacer width="100%"/>
                              <mx:Label text="{data.price}"/>
                              <mx:Button label="Buy"/>
                        </mx:HBox>
                  </mx:AddChild>
            </mx:State>
      </mx:states>

使用 itemRenderer 更改大小就像添加過渡一樣簡單:

      <mx:transitions>
            <mx:Transition fromState="*" toState="*">
                  <mx:Resize target="{this}" />
            </mx:Transition>
      </mx:transitions>

將它放在 <mx:states> 標記下。

每當狀態更改時應用過渡, 因爲狀態的 fromState 和 toState 屬性是通配符。現在您只需添加用於單擊 itemRenderer（將一個 click 事件添加到根標記）的事件處理函數並更改狀態:

      <mx:Script>
      <!--[CDATA[
            
            private function expandItem() : void
            {     
                  if( currentState == "ExpandedState" )
                        currentState = "";
                  else
                        currentState = "ExpandedState";
            }
      ]]-->
      </mx:Script>

後續工作

狀態是對 itemRenderer 的可視外觀進行大量修改的好方法。您可以將多個更改歸入一個 State, 然後設置 itemRenderer 的 currentState 屬性就可以全部完成。

在下一篇文章中, 我們將討論如何通過擴展 UIComponent 編寫更高效的 itemRenderer。

關於作者

Peter Ent 是 Adobe 的一名計算機科學家，目前正在進行 Genesis 項目。在此之前，Peter 擔任過 Adobe 客戶關懷的 Flex 支持工程師以及技術客戶經理。加入 Adobe 之前，Peter 曾在 State Street and Fidelity Investments 的金融服務行業工作。他還在兩家新成立的公司構建過用於成像和分子建模的軟件應用程序。Peter 獲得美國雪城大學的計算機科學理科學士學位。訪問 Peter 的博客*。