Cannot figure out why List won't display data from ArrayCollection

Question

I'm working on a flash cards application and am using an ArrayCollection of Objects to store each cards individual data. When the user click the 'save' button, the text from the two textAreas and the 'title' textinput are stored in the AC as one object with .title, .side1 and .side2 properties that contain the text from the flash card.

I have made a List in a separate class I want to have display the title of each card the user has created, but after days of researching and looking around, I still cannot get the display to list the titles.
If anyone could point me in the right direction it would very appreciated.

Part of my NewCard.mxml:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[


        import flash.events.EventDispatcher;

        import mx.collections.ArrayCollection;

        import spark.effects.SlideViewTransition;

        import views.MyCards;


        protected function button1_clickHandler(event:MouseEvent):void   // back button
        {

            {   
                navigator.pushView(views.MyFlashCardsHome, event.relatedObject);
            }
        }
        protected function button2_clickHandler(event:MouseEvent):void  // save button
        {

            var myc:MyCards = new MyCards();
            var card:Object = new Object();

            myc.add();
            titleCard.text = "Card Added!";

        }

        protected function button3_clickHandler(event:MouseEvent):void  // flip button
        {
            rotateEffect.play();
            if(rotateEffect.isPlaying)
            {
                if(mtext1.visible)
                {
                    mtext2.visible = true;
                    mtext1.visible = false;
                    //mtext2.text = "two";
                    groupt.layoutDirection = "rtl";
                }
                else
                {
                    mtext2.visible = false;
                    mtext1.visible = true;
                    //mtext1.text = "one";
                    groupt.layoutDirection = "rtl";

                }
            }

        }


        protected function button4_clickHandler(event:MouseEvent):void  // push home button
        {
            var slideViewTransition:SlideViewTransition = new SlideViewTransition( 300, SlideViewTransition.SLIDE_RIGHT);
            navigator.pushView(views.HomePage, event.relatedObject, slideViewTransition);
        }
    ]]>
</fx:Script>

<fx:Declarations>
    <s:Rotate3D id="rotateEffect" duration="300" target="{groupt}" 
                angleYFrom="0" angleYTo="180" 
                autoCenterTransform="true"
                effectStart="flipButton.enabled=false;"
                effectEnd="flipButton.enabled=true;"/>
</fx:Declarations>

<s:actionContent>
    <s:Button height="50" label="Study" click="button1_clickHandler(event)" cornerRadius="0"
              fontFamily="_sans"/>
    <s:Button height="62"  click="button4_clickHandler(event)" cornerRadius="0" skinClass="skins.homeButtonSkin"/>
</s:actionContent>

<s:Image x="0" y="-80" width="1024" height="600" source="@Embed('mainapp1.jpg')"/>

<s:TextInput id="titleCard" x="240" y="10" height="62" chromeColor="#515851" color="#060606"
             contentBackgroundAlpha="1.0" contentBackgroundColor="#FFFFFF" text="Title"/>

<s:SkinnableContainer
    id = "groupt" x="161" y="88" width="703" height="357"  >

    <s:TextArea id="mtext2" visible="false" x="0" y="0" width="703" height="357" 
                color="#000000" contentBackgroundAlpha="1.0" 
                contentBackgroundColor="#FFFFFF" editable="true" enabled="true"
                paddingTop="70" text="Enter Text Here: (Side Two)" textAlign="center"/>

    <s:TextArea id="mtext1" x="0" y="0" width="703" height="357" color="#030303"
                contentBackgroundAlpha="1.0" contentBackgroundColor="#FFFFFF" editable="true"
                enabled="true" fontFamily="Arial" fontStyle="normal" fontWeight="normal"
                lineThrough="false" paddingTop="70" text="Enter Text Here: (Side One)"
                textAlign="center" textDecoration="none" verticalAlign="middle"/>

</s:SkinnableContainer>
<s:Button x="763" y="10" height="62" label="Save" click="button2_clickHandler(event)"
          cornerRadius="0" fontFamily="_sans"/>

<s:Label x="5" y="34" color="#49A6D6" fontFamily="Georgia" fontStyle="italic" fontWeight="bold"
         paddingLeft="25" text="My"/>

<s:Label x="68" y="34" width="73" color="#E0B338" fontFamily="Georgia" fontStyle="italic"
         fontWeight="bold" paddingLeft="0" text="Flash"/>

<s:Label x="138" y="34" color="#49A6D6" fontFamily="Georgia" fontStyle="italic" fontWeight="bold"
         text="Cards!"/>

<s:Button id="flipButton" x="468" y="460" height="50" label="Flip" chromeColor="#2428D8"
          click="button3_clickHandler(event)" fontFamily="_sans"/>

Part of my MyCards.mxml:

<?xml version="1.0" encoding="utf-8"?>

<fx:Script>
    <![CDATA[
        import flash.events.IOErrorEvent;
        import flash.filesystem.File;
        import flash.filesystem.FileMode;
        import flash.filesystem.FileStream;

        import mx.collections.ArrayCollection;
        import mx.collections.ArrayList;
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;

        import spark.effects.SlideViewTransition;
        import spark.events.IndexChangeEvent;

        import views.NewCard;



        public var file:File;
        public var fileStream:FileStream;
        public var fileName:String = "Initial String";
        private var directory:String = "SimpleSaveFromAIR";

        public var nc:NewCard = new NewCard();
        public var card:Object = new Object();


        [Bindable]
        public var cards:ArrayCollection = new ArrayCollection();



        protected function button1_clickHandler(event:MouseEvent):void  // pushed home button
        {
            var svt:SlideViewTransition = new SlideViewTransition(300, SlideViewTransition.SLIDE_RIGHT);
            navigator.pushView(views.HomePage, event.relatedObject, svt);
        }



        public function add():void
        {
            var nc:NewCard = new NewCard();
            var card:Object = new Object();

            card.fTitle = nc.titleCard.text; //adding text to object from NewCard.mxml class
            cards.addItem(card); 


        }


        /* public function save():void
        {
            file = File.documentsDirectory.resolvePath(directory + "/" + fileName);
            fileStream = new FileStream();
            fileStream.open(file, FileMode.WRITE);
            fileStream.writeObject(cards);
            fileStream.close();
        }  */

        public function myCardsList_creationCompleteHandler(event:FlexEvent):void
        {
            cards.addEventListener(CollectionEvent.COLLECTION_CHANGE, refreshList);
            trace(cards.list); // no data at all shows up here

        }

        private function refreshList(event:CollectionEvent):void
        {
            trace("cards refreshed "+ cards.list);
        }

        public function testButton_clickHandler(event:MouseEvent):void
        {
            card.fTitle = nc.titleCard.text;
            cards.addItem(card);
            //trace(cards.list); // add data that has been added shows up here

        }



    ]]>
</fx:Script>
<s:actionContent>
    <s:Button id="testButton" label="Button" click="testButton_clickHandler(event)" />
    <s:Button label="Delete"/>
    <s:Button label="Home" click="button1_clickHandler(event)" skinClass="skins.homeButtonSkin"/>
</s:actionContent>

<s:Image x="0" y="-80" height="603" source="mainapp1.jpg"/>

<s:List id="myCardsList" x="10" y="10" left="0" right="0" top="0" bottom="0" width="1004"
        height="500"  dataProvider="{cards}" labelField="fTitle"
        enabled="true" >
    </s:List>

Again any help is greatly appreciated.

CardVO class:

package

{ public class CardVO { private var _title:String; //values returned from getter/setter functions private var _side1:String; private var _side2:String;

    //get the "Title", "Side1" and "Side2" values from textAreas (later) and set them 
    // above variables

    public function get Title():String {return _title;} 
    public function set Title(value:String):void { _title = value; }

    public function get Side1():String {return _side1;}
    public function set Side1(value:String):void {_side1 = value;}

    public function get Side2():String {return _side2;}
    public function set Side2(value:String):void {_side2 = value;}


}

}

** NewCard snippet:**

[Bindable]
        public var myCard:CardVO = new CardVO(); // create new instance of CardVO 

....

    <!-- text property of mtext1 and mtext2 is bound and returned to the get/set functions in CardVO in the 'change' event-->
    <!-- change sets setter values to those retrieved from textAreas-->

    <s:TextArea id="mtext2" visible="false" x="0" y="0" width="703" height="357" 
                color="#000000" contentBackgroundAlpha="1.0" 
                contentBackgroundColor="#FFFFFF" editable="true" enabled="true"
                paddingTop="70" text="{myCard.Side2}" change = "{myCard.Side2 = mtext2.text}"
                textAlign="center"/>

    <s:TextArea id="mtext1" x="0" y="0" width="703" height="357" color="#030303"
                contentBackgroundAlpha="1.0" contentBackgroundColor="#FFFFFF" editable="true"
                enabled="true" fontFamily="Arial" fontStyle="normal" fontWeight="normal"
                lineThrough="false" paddingTop="70" text="{myCard.Side1}" change="{myCard.Side1 = mtext1.text}"
                textAlign="center" textDecoration="none" verticalAlign="middle"/>

</s:SkinnableContainer>

MyCards snippet:

public function add():void
        {

            var nc:NewCard = new NewCard(); // create new instance of NewCard
            cards.addItem(nc.myCard); // add new Item to ArrayCollection 'cards'
            trace(cards.list);
        }

Mycards List code

<s:List id="myCardsList" x="10" y="10" left="0" right="0" top="0" bottom="0" width="1004"
        height="500" change="myCardsList_changeHandler(event)" dataProvider="{cards}"
        enabled="true" >
    <s:itemRenderer>
        <fx:Component>
            <s:MobileItemRenderer label="{data.title}"/>
        </fx:Component>
    </s:itemRenderer>
    </s:List>

Answer 1

Assuming you're using the List component you should be able to specify the field you want to show using the labelField property.

<s:List id="myFlashCardList" dataProvider="{cards}" labelField="fTitle"/>

EDIT 2:

It seems like what you're trying to do here (and correct me if I'm wrong), is to have the user create a new instance of the NewCard object and then add it to your cards ArrayCollection. Your list then displays the titles of the cards the user has created.

Assuming this is the case, I think you're making it a little complicated than it needs to be. ArrayCollections can hold any type of class or object so you don't have to create a new Object and add it to the ArrayCollection every time they add a new card.

What I would do is create a Card class and populate it using your NewCard component. When you're done, you add that Card class to the ArrayCollection. Something like this:

The CardVO class:

package
{
  public class CardVO
  {
    private var _title:String;
    private var _side1:String;
    private var _side2:String;


    public function get Title():String { return _title; }
    public function set Title(value:String):void { _title = value; }

    public function get Side1():String { return _side1; }
    public function set Side1(value:String):void { _side1 = value; }

    public function get Side2():String { return _side2; }
    public function set Side2(value:String):void { _side2 = value; }
  }
}

Then in your NewCard.mxml file you use a CardVO to store the data:

<fx:Script>
    <![CDATA[

        ...

        [Bindable] public var myCard:CardVO = new CardVO();

        ...
    ]]>
</fx:Script>
<s:SkinnableContainer id = "groupt">
    <s:TextArea id="mtext2" text="{myCard.Side2}" change="{myCard.Side2 = mtext2.text}"/>

    <s:TextArea id="mtext1" text="{myCard.Side1}" change="{myCard.Side1 = mtext1.text}" />
</s:SkinnableContainer>

Then after the user has created their card, you pass the CardVO object to your ArrayCollection.

...
public function add():void
{
  var nc:NewCard = new NewCard();

  cards.addItem(nc.myCard);
}
...

This is a very abbreviated example so feel free to ask any questions that don't make sense. You should also look into Data Binding if you haven't already done so. It will save you a lot of time and make your apps more efficient once you get the hang of it. :)