1 Reply Latest reply on Feb 24, 2011 11:56 PM by Flex harUI

    Why won't List display ArrayCollection?

    psl7

      Hi all,

       

      I cannot for the life of me figure out why the List I created will not display any of the values in my ArrayCollection.  I've read and watched so much databinding material, that I think it must be something extremely small or absolutely huge that I'm missing.  If anyone could give me a pointer or two it would be so greatly appreciated, I've been on this for days now.

       

      I have two .mxml's (MyCards and NewCard).  The idea is that in the NewCard View the user types in a Title, and text for side 1 and side 2 of a flash card.  The program then saves all 3 of these properties into an Object and puts that Object into an ArrayCollection.  This ArrayCollection is display in a List in the MyCards.mxml file.  The problem is, nothing shows up.

       

      Here's part of MyCards.mxml showing how I'm implementing and binding the ArrayCollection to the List:

       

       

                          [Bindable]
                     public var card:Object = new Object();
                     public var nc:NewCard = new NewCard(); // create new instance of NewCard
                     
                     [Bindable]
                     public var cards:ArrayCollection = new ArrayCollection();
                                    
                     ...
                     
                     ...
                
                     public function add():void
                     {
                          
                          
                          cards.addItem(nc.myCard); // add new Item to ArrayCollection 'cards'
                          trace(cards.list);
                          
                     }
                     
                     


                     
                
                ]]>
           </fx:Script>
           <s:actionContent>
                
                <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}"
                     enabled="true" >
                <s:itemRenderer>
                     <fx:Component>
                          <s:MobileItemRenderer label="{data.Title}"/>
                     </fx:Component>
                </s:itemRenderer>
                </s:List>

       

       

       

      And then here's how I'm 'adding' the cards in the NewCard.mxml:

       

       

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


                     public function button2_clickHandler(event:MouseEvent):void  // save button
                     {
                          
                        
                          var myc:MyCards = new MyCards();  
                          myc.add();
                          trace(myc.cards.list);
                          trace(myc.cards.length);
                          ;
                          //card.fTitle = titleCard.text;
                          //mycArray();
                          titleCard.text = "Card Added!";
                          
           ...
           
           <s:TextInput id="titleCard" x="240" y="10" height="62" chromeColor="#515851" color="#060606"
                           contentBackgroundAlpha="1.0" contentBackgroundColor="#FFFFFF" text="{myCard.Title}" change="{myCard.Title = titleCard.text}"/>
           
           <s:SkinnableContainer
                id = "groupt" x="161" y="88" width="703" height="357"  >
                
                
                <!-- 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>