无法弄清楚为什么List不会显示来自ArrayCollection的数据

时间:2011-02-23 20:33:13

标签: flex data-binding actionscript mxml arraycollection

我正在开发闪存卡应用程序,并使用对象的ArrayCollection来存储每张卡的个人数据。当用户单击“保存”按钮时,来自两个textAreas和“title”textinput的文本作为一个对象存储在AC中,其中包含.title,.side1和.side2属性,其中包含闪存卡中的文本。

我在一个单独的课程中创建了一个列表我希望显示用户创建的每张卡片的标题,但经过几天的研究和环顾四周,我仍然无法让显示器列出标题。
如果有人能指出我正确的方向,那将非常感激。

我的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"/>

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>

再次感谢任何帮助。

CardVO课程:

package

{     公共类CardVO     {         private var _title:String; //从getter / setter函数返回的值         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片段:**

[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片段:

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列表代码

<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>

1 个答案:

答案 0 :(得分:2)

假设您正在使用List组件,则应该能够使用labelField属性指定要显示的字段。

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

编辑2:

似乎你在这里尝试做的事情(如果我错了就纠正我),就是让用户创建NewCard对象的新实例,然后将其添加到cards 1}} ArrayCollection。然后,您的列表会显示用户创建的卡片的标题。

假设是这种情况,我认为你让它变得有点复杂。 ArrayCollections可以包含任何类型的类或对象,因此您不必每次添加新卡时都创建新的Object并将其添加到ArrayCollection。

我要做的是创建一个Card类并使用您的NewCard组件填充它。完成后,将Card类添加到ArrayCollection中。像这样:

CardVO课程:

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

然后在NewCard.mxml文件中使用CardVO存储数据:

<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>

然后在用户创建了卡后,将CardVO对象传递给ArrayCollection。

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

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

这是一个非常简短的例子,所以请随意提出任何没有意义的问题。如果您还没有这样做,也应该查看Data Binding。一旦掌握了它,它将为您节省大量时间并使您的应用程序更高效。 :)