Passing Arguments to a Custom CellRender

Question

I'm trying to create a simple two labeled list by creating two label label fields using a class called TwoLabelCell which extends AlternatingCellRenderer and looks like this:

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);
        }
    }
}

Remember that this one is just a test at the time, so I'm working with only one label (after I figure out this question I'll add the other and use the same logic). The main idea here is that when I call this it will set the text variable which will be used to change the text of the label on the list when it's being created. Now, here the main application file:

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);
        }
    }
}

When I try to run that I get this error:

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]

Any idea on how to solve this?

PS: I'm learning Flex (coming from Java)

RIAstar · Accepted Answer · 2012-06-15T11:01:37.907

To answer your question directly: you're getting a classcast error because you're trying to cast a String to a TwoLabelCell at packList.cellRenderer = TwoLabelCell("Testing Label"). So I guess you just forgot the new keyword.

I can tell you come from a Java background: that code looks very Swingy ;)
So I thought I'd show you how I would do this the Flex way. I don't know these Blackberry classes you use, so I'll have to stick to plain old Flex to demonstrate it.

Create a model class with bindable properties:

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

Now create an ItemRenderer class to render the data in a List, let's call it 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>

Notice I set the height to 50 which will have the same effect as the rowHeight you used. The data property of an ItemRenderer is the Pack model instance it will represent.
The Label with id labelDisplay will automatically get the value of data.label assigned to its text property by the Flex framework. For the other Label I use data binding (the {}) to bind the model description property to the Label's text property.

Create the List with this 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()" />

I created the data inline here, but of course this ArrayCollection could just as well come from a server.
The layout of a List is VerticalLayout by default, so I don't define it.
The Spark List doesn't have an itemClick event handler, so I use the change handler, which is executed whenever the List's selected index/item changes.

Isn't there any way of doing this only with ActionScript? Because don't like to mix the languages, that has the same purpose, on my project (another bad habit from Java), also because all the BlackBerry library docs use plain ActionScript it's easier for a newcomer like me to implement new things. **:)** — Nathan Campos, Jun 15 '12 at 17:30
@NathanCampos I used to loathe the mixing of languages when I started with Flex too, but it turns out there are several techniques to separate them cleanly (which I can't discuss in the comments of course). Nevertheless, you can do it all in plain ActionScript, but I doubt that's going to be easier for you: it's going to be a lot more verbose and you'll have to know the framework a lot better. As an example, take that binding `text="{data.description}"`: in AS you'd have to do it like this `BindingUtils.bindProperty(myLabel, 'text', data, 'description')`. — RIAstar, Jun 15 '12 at 17:47
@NathanCampos I've just written an answer you might find interesting since it discusses such a technique (my preferred) to separate mxml from actionscript: http://stackoverflow.com/questions/11059302/custom-composite-control-not-rendering-correctly-for-only-0-5-1-sec-after-being/11061988#11061988 — RIAstar, Jun 16 '12 at 08:58

Passing Arguments to a Custom CellRender

1 Answers1