flex - Cannot figure out why List won't display data from ArrayCollection -
i'm working on flash cards application , using arraycollection of objects store each cards individual data. when user click 'save' button, text 2 textareas , 'title' textinput stored in ac 1 object .title, .side1 , .side2 properties contain text flash card.
i have made list in separate class want have display title of each card user has created, after days of researching , looking around, still cannot display list titles.
if point me in right direction appreciated.
part of 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 // 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 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 object 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 @ shows 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 has been added shows 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 appreciated.
cardvo class:
package { public class cardvo { private var _title:string; //values returned getter/setter functions private var _side1:string; private var _side2:string;
//get "title", "side1" , "side2" values textareas (later) , set them // above variables public function title():string {return _title;} public function set title(value:string):void { _title = value; } public function side1():string {return _side1;} public function set side1(value:string):void {_side1 = value;} public function 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 , mtext2 bound , returned get/set functions in cardvo in 'change' event--> <!-- change sets setter values retrieved 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 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>
assuming you're using list component should able specify field want show using labelfield property.
<s:list id="myflashcardlist" dataprovider="{cards}" labelfield="ftitle"/> edit 2:
it seems you're trying here (and correct me if i'm wrong), have user create new instance of newcard object , add cards arraycollection. list displays titles of cards user has created.
assuming case, think you're making little complicated needs be. arraycollections can hold type of class or object don't have create new object , add arraycollection every time add new card.
what create card class , populate using newcard component. when you're done, add card class arraycollection. this:
the cardvo class:
package { public class cardvo { private var _title:string; private var _side1:string; private var _side2:string; public function title():string { return _title; } public function set title(value:string):void { _title = value; } public function side1():string { return _side1; } public function set side1(value:string):void { _side1 = value; } public function side2():string { return _side2; } public function set side2(value:string):void { _side2 = value; } } } then in newcard.mxml file use cardvo store 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 user has created card, pass cardvo object arraycollection.
... public function add():void { var nc:newcard = new newcard(); cards.additem(nc.mycard); } ... this abbreviated example feel free ask questions don't make sense. should data binding if haven't done so. save lot of time , make apps more efficient once hang of it. :)
Comments
Post a Comment