Question

Can someone show an example of how to create multiple view change events in a single list in flex?

I want each item in a list to change to a totally unique view file. Instead of 10 items in a list all going to 1 new view but with different info being generated I want 10 different view, 1 per item in the list.

I can’t find any examples of how to do this and I have been tryingo to make it for for a while. This is for a mobile app. Thanks!

<fx:Script>
<![CDATA[
import spark.events.IndexChangeEvent;
protected function myList_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.EmployeeView,myList.selectedItem);
}
protected function myList2_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.EmployeeView2,myList.selectedItem);
}
protected function myList3_changeHandler(event:IndexChangeEvent):void {
navigator.pushView(views.EmployeeView3,myList.selectedItem);
}           
]]>
</fx:Script>

<s:List width="100%" height="100%" labelField="firstName">
<s:ArrayCollection>
<fx:Object id="myList" change="myList_changeHandler(event)" firstName="Bill"/>
<fx:Object id="myList2" change="myList2_changeHandler(event)" firstName="Dave"/>
<fx:Object id="myList3" change="myList3_changeHandler(event)" firstName="Mary"/>
</s:ArrayCollection>
</s:List>

Answer 1

You are missing a few things here. First, you need to listen to the change event on the List component:

<s:List id="myList" width="100%" height="100%" labelField="firstName" change="myListChange(event)">

Next, you need to create the method for changing the view:

protected function myListChange( event:IndexChangeEvent ):void
{
    var newView:Class;

    // You can decide a different view based on the newIndex property of the event
    // There could be many better ways than a switch statement - this is for brevity
    switch ( event.newIndex )
    {
        case 0:
            newView = EmployeeView0;
            break;
        case 1:
            newView = EmployeeView1;
            break;
        default:
            newView = OtherEmployeeView;
            break;
    }

    navigator.pushView(newView,myList.selectedItem);
}