Flex中itemRenderer使用(四)：状态和过渡

itemRenderer 最擅长与应用程序的用户通信。有时通信很简单, 只是显示一个名称；有时会使用更精致的颜色；有时具有交互性。

itemEditor 是真正的交互控制, 但它们不是本文的重点。在这些示例中, 我将向您展示根据数据本身或用户操作更改可视外观的 itemRenderer。

Flex <mx:State> 是更改 itemRenderer 外观的一个理想方法。状态使用简便, 并且与过渡结合使用时, 可以为用户提供反馈和愉悦的体验。

在本例中, 您将为列表新建一个 MXML itemRenderer（记住, 如果您愿意, 完全可以使用 ActionScript 这样做）。这个 itemRenderer 显示图像、书名、作者、价格以及用于购买这本书籍的 Button。

Java代码

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

<?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 的可视性, 而是使用以下状态定义:

Java代码

   1. <mx:states> 
   2.             <mx:State name="NoStockState"> 
   3.                   <mx:SetProperty target="{priceBox}" name="visible" value="false"/> 
   4.             </mx:State> 
   5.       </mx:states> 

<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 的值决定要使用哪个状态:

Java代码

   1. override public function set data( value:Object ) : void 
   2.             { 
   3.                   super.data = value; 
   4.                    
   5.                   if( data ) 
   6.                   { 
   7.                         if( data.instock == "yes" )  
   8.                               currentState = ""; 
   9.                         else 
  10.                               currentState = "NoStockState"; 
  11.                   } 
  12.             } 

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:

Java代码

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

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



通过检查与根标记内联的 data.instock 来设置 currentState 的值－不错的伎俩, 但是可能较难维护。
在这个 itemRenderer 中, 仅当 instack 值为 yes时才显示价格和“购买”按钮。当然不使用状态也可以这样做, 但是, 如果 itemRenderer 要添加或删除更多控制, 状态更适合, 因为可以通过设置 itemRenderer 的 currentState 属性对控制外观轻松实现控制。

您使用状态添加一个标签, 告诉用户该商品已售空, 而不是简单地删除价格和 Button。以下是修改后的状态:
Java代码

   1. <mx:states> 
   2.             <mx:State name="NoStockState"> 
   3.                   <mx:SetProperty target="{priceBox}" name="visible" value="false"/> 
   4.                   <mx:AddChild relativeTo="{priceBox}" position="before"> 
   5.                         <mx:Label text="-- currently not in stock --" color="#73DAF0"/> 
   6.                   </mx:AddChild> 
   7.             </mx:State> 
   8.       </mx:states> 

<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 的基本状态相当简单

Java代码

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

<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 的高度:
Java代码

   1. <mx:states> 
   2.             <mx:State name="ExpandedState"> 
   3.                   <mx:AddChild position="lastChild"> 
   4.                         <mx:HBox width="100%"> 
   5.                               <mx:Image source="{data.image}"/> 
   6.                               <mx:Spacer width="100%"/> 
   7.                               <mx:Label text="{data.price}"/> 
   8.                               <mx:Button label="Buy"/> 
   9.                         </mx:HBox> 
  10.                   </mx:AddChild> 
  11.             </mx:State> 
  12.       </mx:states> 

<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 更改大小就像添加过渡一样简单:

Java代码

   1. <mx:transitions> 
   2.             <mx:Transition fromState="*" toState="*"> 
   3.                   <mx:Resize target="{this}" /> 
   4.             </mx:Transition> 
   5.       </mx:transitions> 

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



将它放在 <mx:states> 标记下。

每当状态更改时应用过渡, 因为状态的 fromState 和 toState 属性是通配符。现在您只需添加用于单击 itemRenderer（将一个 click 事件添加到根标记）的事件处理函数并更改状态:
Java代码

   1. <mx:Script> 
   2.       <![CDATA[ 
   3.              
   4.             private function expandItem() : void 
   5.             {      
   6.                   if( currentState == "ExpandedState" ) 
   7.                         currentState = ""; 
   8.                   else 
   9.                         currentState = "ExpandedState"; 
  10.             } 
  11.       ]]> 
  12.       </mx:Script> 

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



状态是对 itemRenderer 的可视外观进行大量修改的好方法。您可以将多个更改归入一个 State, 然后设置 itemRenderer 的 currentState 属性就可以全部完成。

在下一篇文章中, 我们将讨论如何通过扩展 UIComponent 编写更高效的 itemRenderer。