将参数传递给自定义CellRender

时间:2012-06-15 09:13:18

标签: flex flex4 blackberry-playbook

我正在尝试通过使用名为TwoLabelCell的类创建两个标签标签字段来创建一个简单的两个标记列表,该类扩展AlternatingCellRenderer,如下所示:

package views
{
    import flash.text.TextFormat;

    import qnx.fuse.ui.listClasses.AlternatingCellRenderer;
    import qnx.fuse.ui.text.Label;

    public class TwoLabelCell extends AlternatingCellRenderer {
        private var description:Label;
        private var labelFormat:TextFormat;
        private var text:String;

        public function TwoLabelCell(labelText:String) {
            this.text = labelText;
        }

        override protected function init():void {
            super.init();

            labelFormat = new TextFormat();
            labelFormat.color = 0x777777;
            labelFormat.size = 17;

            description = new Label();
            description.x = 17;
            description.y = 33;
            description.format = labelFormat;
            description.text = text;

            this.addChild(description);
        }
    }
}

请记住,这个只是当时的一个测试,所以我只使用一个标签(在我弄清楚这个问题后,我将添加另一个并使用相同的逻辑)。这里的主要思想是,当我调用它时,它将设置text变量,该变量将用于在创建时更改列表上标签的文本。现在,这里是主应用程序文件:

package {
    import flash.display.Sprite;

    import qnx.fuse.ui.events.ListEvent;
    import qnx.fuse.ui.listClasses.List;
    import qnx.fuse.ui.listClasses.ListSelectionMode;
    import qnx.fuse.ui.listClasses.ScrollDirection;
    import qnx.ui.data.DataProvider;

    import views.TwoLabelCell;

    [SWF(height="600", width="1024", frameRate="30", backgroundColor="#FFFFFF")]
    public class PackTrack extends Sprite {
        private var packList:List;

        public function PackTrack() {
            super();

            initializeUI();
        }

        private function initializeUI():void {
            packList = new List();
            packList.setPosition(0, 0);
            packList.width = 310;
            packList.height = 400;
            packList.rowHeight = 50;
            packList.selectionMode = ListSelectionMode.SINGLE;
            packList.scrollDirection = ScrollDirection.VERTICAL;

            var arrMonth:Array=[];
            arrMonth.push({label: "January"});
            arrMonth.push({label: "February"});
            arrMonth.push({label: "March"});
            arrMonth.push({label: "April"});
            arrMonth.push({label: "May"});
            arrMonth.push({label: "June"});
            arrMonth.push({label: "July"});
            arrMonth.push({label: "August"});
            arrMonth.push({label: "September"});
            arrMonth.push({label: "October"});
            arrMonth.push({label: "November"});
            arrMonth.push({label: "December"});

            packList.dataProvider = new DataProvider(arrMonth);
            packList.cellRenderer = TwoLabelCell("Testing Label");

            packList.addEventListener(ListEvent.ITEM_CLICKED, onListClick);

            this.addChild(packList);
        }

        private function onListClick(event:ListEvent):void {
            trace("Item clicked: " + event.data.label);
            trace("Index clicked: " + event.index);
        }
    }
}

当我尝试运行时,我收到此错误:

TypeError: Error #1034: Type Coercion failed: cannot convert "Testing Label" to views.TwoLabelCell.
    at PackTrack/initializeUI()[/Users/Nathan/Documents/Adobe Flash Builder 4.6/AIRTest/src/PackTrack.as:46]
    at PackTrack()[/Users/Nathan/Documents/Adobe Flash Builder 4.6/AIRTest/src/PackTrack.as:19]

关于如何解决这个问题的任何想法?

PS:我正在学习Flex(来自Java)

1 个答案:

答案 0 :(得分:4)

直接回答你的问题:你得到一个分类错误,因为你试图将一个String转换为packList.cellRenderer = TwoLabelCell("Testing Label")的TwoLabelCell。所以我猜您忘记了new关键字。

我可以告诉你来自Java背景:代码看起来非常Swingy;)
所以我想我会告诉你我将如何以Flex的方式做到这一点。我不知道你使用的这些Blackberry类,所以我必须坚持使用普通的Flex来演示它。

使用可绑定属性创建模型类:

public class Pack {     
    [Bindable] public var label:String;
    [Bindable] public var description:String;       
}

现在创建一个ItemRenderer类来渲染List中的数据,让我们称之为PackRenderer.mxml

<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
                xmlns:s="library://ns.adobe.com/flex/spark" 
                autoDrawBackground="true"
                height="50">

    <s:layout>
        <s:HorizontalLayout verticalAlign="middle" />
    </s:layout>

    <s:Label id="labelDisplay" />
    <s:Label text="{data.description}" color="0x777777" fontSize="17" />

</s:ItemRenderer>

注意我将height设置为50,其效果与您使用的rowHeight相同。 ItemRenderer的data属性是它将代表的Pack模型实例 标识labelDisplay的标签将自动获取Flex框架为其data.label属性分配的text值。对于另一个Label,我使用数据绑定({})将模型description属性绑定到Label的text属性。

使用此itemrenderer创建列表:

<fx:Script>
    <![CDATA[
        protected function handleItemSelected():void {
            trace("Item selected: " + list.selectedItem.label);
            trace("Index selected: " + list.selectedIndex);
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <s:ArrayCollection id="dp">
        <so:Pack label="Item A" description="description A" />
        <so:Pack label="Item B" description="description B" />
        <so:Pack label="Item C" description="description C" />
    </s:ArrayCollection>
</fx:Declarations>

<s:List id="list" dataProvider="{dp}" width="310" height="400"
        itemRenderer="net.riastar.PackItemRenderer"
        change="handleItemSelected()" />

我在这里创建了内联数据,但当然这个ArrayCollection也可以来自服务器 List的布局默认为VerticalLayout,所以我没有定义它 Spark列表没有itemClick事件处理程序,因此我使用change处理程序,只要List的所选索引/项目发生更改,就会执行该处理程序。