首页 > 设计 > WEB开发 > 正文

7.3.访问设置自己渲染器的组件

2023-08-02 23:09:33
字体:
来源:转载
供稿:网友
7.3.1. 问题
item renderer 需要访问它的父组件的一些数据。
7.3.2. 解决办法
实现IDropInListItemRenderer,通过drop-in renderer 访问它的父组件.
7.3.3. 讨论
实现了IDropInListItemRenderer 的renderer 不但能访问data 等一些传入的数据,还能通过BaseListData类型的一个属性访问renderer 的父组件(如List 或DataGridColumn)。

mx.controls.listClasses.BaseListData 有如下属性:
columnIndex : int
当前是第几列,当用户用mouse 点击List 或DataGrid 某个元素时这个属性被赋值。第一列是1。(注意,这个值的含意是指选中列是当前可见表格中的第几行,如果有横向的滚动条时要小心使用此属性)(原文中指出第一列是1,但事实是0)

owner : IUIComponent
这个drop-in itemRenderer 的所有者,即一个List 对象,或DataGridColumn 对象。(我认为原文这里是写错了,owner 不可能是DataGridColumn 对象, 它只能是一个从ListBase扩展的类型,我想作者这里是想写DataGrid)

rowIndex : int
当前是第几行,类似columnIndex(这里要注意,这个属性对于Tree 有特殊含意,这个值是根据当前所有展开结点排列所得。)第一行是1。(原文中指出第一行是1,但事实是0)

uid : String
用于唯一标识一个renderer 对象。

如果itemRenderer 实现了IDropInListItemRenderer 接口,即itemRenderer 会有set listData 和get listData 两个方法,当这个itemRenderer 被使用时,它会被实例化并利用set listData 传数据给itemRenderer,这个数据就是我们在前边提到的,BaseListData类型的对象。在调用renderer 的set data 方法时我们可以根据listData 来得到拥有这个renderer 的容器,并通过一些判断来决定对data 的处理。在这个过程中,我们还可以调用自己的一些方法。下面我们通过例子说明listData 的用法。
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxmlwidth="400"
height="50implements="mx.controls.listClasses.IDropInListItemRenderer">

<mx:Script>
<![CDATA[
import mx.controls.DataGrid;
import mx.controls.List;
import mx.controls.dataGridClasses.DataGridColumn;
import mx.controls.listClasses.BaseListData;
// store the list data item in case we want to do something with it
// later on
private var _listData:BaseListData;
[Bindable("dataChange")]
// a getter method.
public function get listData():BaseListData { return _listData; }
// a setter method,当BaseListData 数据被传入之后renderer 就可以通过它自己的一
//些属性访问拥有它的父组件中元素的数据,甚至可以调用父组件中的方法。
public function set listData(value:BaseListData):void {
_listData = value;
if (value.owner is DataGridColumn) {
trace("DataGridColumn");
else if(value.owner is List) {
trace("List");
else if
(value.owner is CustomDataGrid) {
trace("CustomDataGrid");
(value.owner as CustomDataGrid).checkInMethod(this);
}
}
override public function set data(value:Object):void {
nameTxt.text = value.name;
appearanceTxt.text = value.appearance;
}

]]>
</mx:Script>
<mx:Canvas backgroundColor="#3344ff">
<mx:Label id="nameTxt"/>
</mx:Canvas>
<mx:Label id="appearanceTxt"/>
</mx:VBox>

下边是一个IDropInListRenderer 应用于一个用户自定义的DataGrid:
+展开
-XML
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:cookbook="oreilly.cookbook.*">

<mx:List itemRenderer="oreilly.cookbook.IDropInListRenderer"
dataProvider="{DataHolder.genericCollectionOne}"/>

<!-- note that creating a custom component with a new
namespace, cookbook,
requires that our columns
are declared w/in the cookbook namespace 
-->

<cookbook:CustomDataGrid
dataProvider="{DataHolder.genericCollectionOne}">

<cookbook:columns>
<!-- since we're not declaring a dataField, the entire
data object
is passed to the renderer 
-->

<mx:DataGridColumn
itemRenderer="oreilly.cookbook.IDropInListRenderer"/>

<mx:DataGridColumn dataField="age"/>
</cookbook:columns>
</cookbook:CustomDataGrid>
</mx:HBox>

下边是用户自定义的DataGrid ,它有一个方法,checkInMethod ,这个方法是在renderer 的data 属性被赋值时调用的。
+展开
-XML
<mx:DataGrid xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public function checkInMethod(obj:*):void {
trace("hello from my renderer"+obj);
}

]]>
</mx:Script>
</mx:DataGrid>

(译者注)
看完这节,大家可能还有些湖涂,我给大家总结一下:在第一节中我们说过,如果一个renderer 实现了IDropInListItemRenderer 接口,那么它就算是drop-in renderer 了。

IDropInListItemRenderer 接口中有两个方法: set listData 和get listData 。flex对于renderer 有一种优化的机制,就是:页面中显示几个renderer 系统才实例几个renderer,不显示的就销毁, 有新的显示,如果重用也不够时,再new 。比如有一个DataGrid,它的数据源中有10 个对象,但页面中的DataGrid 一次只显示5 个(即有滚动条),也就是说系统在第一次显示这个DataGrid 的时候一次性new 5 个renderer 当用户向下拖动滚动条时,下方会出现一条新数据,这时会再new 或重用一个renderer,上方那个移到显示区外的数据对应的renderer 会被重用。当系统new 或重用一个renderer 之后如果这个renderer 是drop-in renderer,系统会调用set listData 方法,传入一个BaseListData类型的数据,BaseListData 数据中含有一个很有用的属性owner,它是renderer 所在容器对象的一个引用,通过它我们可以得到容器的相关信息。接下来会调用set data方法,把data 传入renderer 这时我们可以利用之前的BaseListData 数据中的信息控制data 数据。

本节内容相对来说比较少,通过我填加的一些信息,希望大家能更容易理解。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表