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)

Answer 1

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.