Flex中itemRenderer使用(三)：通信相关

flex itemRenderer使用(三)：通信
文章分类:Flash编程
在本系列的第 2 部分中, 我向您展示了如何使用 MXML 和 ActionScript 创建外部 itemRenderer。在我用过的示例中, 有一个调度自定事件 BuyBookEvent 的 Button－这样应用程序可以对它作出响应。本文进一步讨论与 itemRenderer 的通信。

我坚信有一条规则是永远不能违背的: 不能抓住 itemRenderer 的实例不放, 更改它 (设置公共属性) 或调用它的公共方法。这对我而言是一个禁忌。itemRenderer 是很难弄清的, 我在第 1 部分中说到了其中的缘由: itemRenderer 是循环使用的。抓住一个会破坏 Flex 框架。

请将这条规则谨记在心, 您可以使用 itemRenderer 完成以下操作:

•itemRenderer 可以通过它的列表所有者调度事件。 (您已经看到过冒泡; 这个做法更好, 接下来您就会看到。)
•itemRenderer 可以使用静态类成员。其中包括 Application.application。如果您的值“全局”存储在应用程序对象中, 您可以通过这种方式获得它们。
•itemRenderer 可以使用拥有它的列表的公共成员。接下来您就会看到。
•itemRenderer 可以使用数据记录中的任何内容。例如, 记录中的某个项目不用于直接显示, 但它却影响 itemRenderer 的行为方式。

以下是上一篇文章中用于 TileList 的 MXML itemRenderer。我将使它对外部源 (我将这个文件称为 BookItemRenderer.mxml) 的更改作出反应, 从而使它更生动:

Java代码

   1. <?xml version="1.0" encoding="utf-8"?> 
   2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="115" > 
   3.      
   4.     <mx:Script> 
   5.     <![CDATA[         
   6.     ]]> 
   7.     </mx:Script> 
   8.      
   9.     <mx:Image id="bookImage" source="{data.image}" /> 
  10.     <mx:VBox height="115" verticalAlign="top" verticalGap="0"> 
  11.         <mx:Text text="{data.title}" fontWeight="bold" width="100%"/> 
  12.         <mx:Spacer height="20" /> 
  13.         <mx:Label text="{data.author}" /> 
  14.         <mx:Label text="Available {data.date}" /> 
  15.         <mx:Spacer height="100%" /> 
  16.         <mx:HBox width="100%" horizontalAlign="right"> 
  17.             <mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]"> 
  18.                 <mx:click> 
  19.                 <![CDATA[ 
  20.                     var e:BuyBookEvent = new BuyBookEvent(); 
  21.                     e.bookData = data; 
  22.                     dispatchEvent(e); 
  23.                 ]]> 
  24.                 </mx:click> 
  25.             </mx:Button> 
  26.         </mx:HBox> 
  27.     </mx:VBox> 
  28. </mx:HBox> 

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="250" height="115" >

<mx:Script>
<![CDATA[
]]>
</mx:Script>

<mx:Image id="bookImage" source="{data.image}" />
<mx:VBox height="115" verticalAlign="top" verticalGap="0">
<mx:Text text="{data.title}" fontWeight="bold" width="100%"/>
<mx:Spacer height="20" />
<mx:Label text="{data.author}" />
<mx:Label text="Available {data.date}" />
<mx:Spacer height="100%" />
<mx:HBox width="100%" horizontalAlign="right">
<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
<mx:click>
<![CDATA[
var e:BuyBookEvent = new BuyBookEvent();
e.bookData = data;
dispatchEvent(e);
]]>
</mx:click>
</mx:Button>
</mx:HBox>
</mx:VBox>
</mx:HBox>



假设您在 TileList 中显示一个商品目录。您还有一个 Slider (不属于 itemRenderer), 它允许用户给出一个价格范围; 在此范围之外的所有商品应变灰 (itemRenderer 的 alpha 值应改变)。您需要告知所有 itemRenderer 标准已改变, 这样它们可以修改自己的 alpha 值。

覆盖 set data 可能如下:

Java代码

   1. override public function set data( value:Object ) : void 
   2. { 
   3.     super.data = value; 
   4.     if( data.price < criteria ) alpha = 0.4; 
   5.     else alpha = 1; 
   6. } 

override public function set data( value:Object ) : void
{
    super.data = value;
    if( data.price < criteria ) alpha = 0.4;
else alpha = 1;
}



问题是: 如何更改标准值？itemRenderer 的“最佳做法”是始终让它们处理为自己手头的数据。在本例中, 将测试标准作为数据的一部分不可能也不切实际。所以这在数据外留下了一个位置。您有两个选择:

•列表本身的一部分。即, 您的列表 (List、DataGrid、TileList 或其他) 可以是扩展列表控制并且将这个标准作为公共成员的类。
•作为全局数据的应用程序的一部分。
我选择第一个: 扩展一个类并将这个标准作为该类的一部分。毕竟, 这个类将用于显示数据, 而标准是显示内容的一部分。对于本例, 我将扩展 TileList 并将标准作为公共数据成员。

Java代码

   1. package 
   2. { 
   3.      
   4.     import mx.controls.TileList; 
   5.      
   6.     public class CatalogList extends TileList 
   7.     { 
   8.         public function CatalogList() 
   9.         { 
  10.             super(); 
  11.         } 
  12.          
  13.         private var _criteria:Number = 10; 
  14.          
  15.         public function get critera() : Number 
  16.         { 
  17.             return _criteria; 
  18.         } 
  19.          
  20.         public function set criteria( value:Number ) : void 
  21.         { 
  22.             _criteria = value; 
  23.         }        
  24.     } 
  25. } 

package
{

import mx.controls.TileList;

public class CatalogList extends TileList
{
public function CatalogList()
{
super();
}

private var _criteria:Number = 10;

public function get critera() : Number
{
return _criteria;
}

public function set criteria( value:Number ) : void
{
_criteria = value;
}
}
}



这个办法是, itemRenderer 外的控制可以通过更改列表控制上的这个属性来修改标准。

itemRenderer 可以访问另一块数据: 列表本身的相关信息以及它们渲染哪个行哪个列 (如果在面向列的控制中)。这称为 listData, 在 BookItemRenderer.mxml itemRenderer 示例中可以这样使用它:

Java代码

   1. override public function set data( value:Object ) : void 
   2. { 
   3.     super.data = value; 
   4.     var criteria:Number = (listData.owner as MyTileList).criteria; 
   5.     if( data.price < criteria ) alpha = 0.4; 
   6. else alpha = 1; 
   7. } 

override public function set data( value:Object ) : void
{
    super.data = value;
    var criteria:Number = (listData.owner as MyTileList).criteria;
    if( data.price < criteria ) alpha = 0.4;
else alpha = 1;
}




将这个代码放入上述示例 BooktItemRenderer.mxml 代码的 <mx:Script> 块中。

itemRenderer 的 listData property 有一个 owner 字段, 它是 itemRenderer 所属的控制。在本例中, 所有者是 MyTileList 控制－我的 TileList 扩展。将所有者字段转换为 MyTileList 即可取走标准。

IDropInListItemRenderer
当 itemRenderer 类实施 IDropInListItemRenderer 接口时, 即可访问 listData。不幸的是, UI 容器组件不实施提供 listData 访问权的接口。Button 和 Label 等控制组件提供这一访问权, 但对于容器, 您必须自己实施接口。

实施这个接口很简单, 您可以在 Flex 文档中找到说明。您必须为 BookItemRenderer 类执行以下操作:

1.由类实施接口。

Java代码

   1. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" ... 
   2. implements="mx.controls.listClasses.IDropInListItemRenderer"> 

<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" ...
implements="mx.controls.listClasses.IDropInListItemRenderer">



2.将 set 和 get 函数添加到 itemRenderer 文件的 <mx:Script> 块。

Java代码

   1. import mx.controls.listClasses.BaseListData; 
   2.  
   3.     private var _listData:BaseListData; 
   4.     public function get listData() : BaseListData 
   5.     { 
   6.     return _listData; 
   7.     } 
   8.     public function set listData( value:BaseListData ) : void 
   9.     { 
  10.     _listData = value; 
  11.     } 

import mx.controls.listClasses.BaseListData;

    private var _listData:BaseListData;
    public function get listData() : BaseListData
    {
    return _listData;
    }
    public function set listData( value:BaseListData ) : void
    {
    _listData = value;
    }



Java代码

   1. 当列表控制看到 itemRenderer 实施 IDropInListItemRenderer 接口时, 它将创建一个 listData 项目并将它指派到每个 itemRenderer 实例。  
   2.  
   3. invalidateList() 
   4. 在我的类中设置这个标准并不像指派值这么简单。那样做无法告知 Flex 框架数据已更改。标准更改必须触发一个事件。以下是对 set criteria() 函数的修改内容: 

当列表控制看到 itemRenderer 实施 IDropInListItemRenderer 接口时, 它将创建一个 listData 项目并将它指派到每个 itemRenderer 实例。

invalidateList()
在我的类中设置这个标准并不像指派值这么简单。那样做无法告知 Flex 框架数据已更改。标准更改必须触发一个事件。以下是对 set criteria() 函数的修改内容:




Java代码

   1. public function set criteria( value:Number ) : void 
   2.         { 
   3.             _criteria = value; 
   4.              
   5.             invalidateList(); 
   6.         } 

public function set criteria( value:Number ) : void
{
_criteria = value;

invalidateList();
}



注意, 一旦设置 _criteria 值, 它会调用 invalidateList()。这将使用 dataProvider 的值重置所有 itemRenderer 并调用它们的 set data 函数。

随后的流程如下:

1.itemRenderer 在它的列表所有者中查找要使用的标准, 以帮助它决定如何渲染数据。
2.列表所有者类是某个 Flex 列表类的扩展, 它包含 itemRenderer 读取以及外部代码－另一个控制或 ActionScript 代码 (可能是从远程调用接收数据产生的) 设置的公共属性。
3.设置列表属性时, 它调用列表的 invalidateList() 方法。这触发了 itemRenderer 刷新, 使它们重置自己的数据 (并返回第 1 步)。




刚刚我向您展示了如何借助事件冒泡使 itemRenderer 与应用程序的其余部分通信。我认为这相当快。但我认为还有更好的方法, 它符合 itemRenderer 负责展示数据、控制负责处理数据的想法。

MyTileList 控制的构思是, 它是可售书籍目录的可见视图。当用户选中一本书籍并要购买它时, 列表控制应当将这个信息发送给应用程序。换言之:

Java代码

   1. <CatalogList bookBuy="addToCart(event)" /> 

<CatalogList bookBuy="addToCart(event)" />



万事俱备, 事件冒泡并跳过 MyTileList。冒泡方法没有将事件 (bookBuy) 与列表控制 (MyTileList) 关联在一起, 允许您将控制移到应用程序的其他部分。例如, 如果您在主 Application 中写入 bookBuy 的事件侦听器, 您无法将列表控制移到应用程序的其他部分。如果要移动, 您还得移动那个事件处理函数。另一方面, 如果您将事件与控制关联在一起, 只是移动控制。

我们这样看: 假设 Button 上的单击事件并不是 Button 调度的事件, 但由于按钮中的某个内容而冒泡。您将无法使用: <mx:Button click="doLogin()" label="Log in" />; 您必须将 doLogin() 函数放在其他位置, 这会使应用程序更难使用。

希望我已经说服您, 以下是如何将这个示例从冒泡更改为从列表控制调度。

1.将元数据添加到 CatalogList 控制, 告知编译器控制负责调度事件:

Java代码

   1. import events.BuyBookEvent; 
   2.     import mx.controls.TileList; 
   3.  
   4.     [Event(name="buyBook",type="events.BuyBookEvent")] 
   5.      
   6.     public class CatalogList extends TileList 
   7.     { 

import events.BuyBookEvent;
import mx.controls.TileList;

[Event(name="buyBook",type="events.BuyBookEvent")]

public class CatalogList extends TileList
{



2.将一个函数添加到 CatalogList 进行事件调度。itemRenderer 实例将调用这个函数:

Java代码

   1. public function dispatchBuyEvent( item:Object ) : void 
   2.         { 
   3.             var event:BuyBookEvent = new BuyBookEvent(); 
   4.             event.bookData = item; 
   5.             dispatchEvent( event ); 
   6.         } 
   7.          
   8.     } 

public function dispatchBuyEvent( item:Object ) : void
{
var event:BuyBookEvent = new BuyBookEvent();
event.bookData = item;
dispatchEvent( event );
}

}



3.将 itemRenderer 中的 Buy 按钮代码更改为调用该函数:

Java代码

   1. <mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]"> 
   2.     <mx:click> 
   3.     <![CDATA[ 
   4.         (listData.owner as CatalogList).dispatchBuyEvent(data); 
   5.     ]]> 
   6.     </mx:click> 
   7.     </mx:Button> 

<mx:Button label="Buy" fillColors="[0x99ff99,0x99ff99]">
    <mx:click>
    <![CDATA[
        (listData.owner as CatalogList).dispatchBuyEvent(data);
    ]]>
    </mx:click>
    </mx:Button>




现在, itemRenderer 中的 Button 可以使用记录数据 (或适合此操作的其他任何内容) 轻松调用列表控制中的函数, 并将与应用程序其余部分协调的职责转交给列表控制。

本例中的列表控制使用数据调度事件。应用程序可以使用 ActionScript 为这个事件添加事件侦听器, 也可以使用 MXML (因为 CatalogList.as 文件中的 [Event] 元数据) ; 使用 [Event] 元数据使开发人员能更轻松地使用您的代码。


总结：
itemRenderer 应使用事件进行任何操作通信。自定事件允许您将信息随事件传递, 这样事件使用者无需再通过 itemRenderer 获取数据。

itemRenderers 应通过覆盖它们的 set data 函数对数据更改作出“反应”。在该函数中, 它们可以访问其 listData.owner 中的值。它们还可以访问存储在静态类或通过 Application.application 存储在主应用程序中的数据。