I am building a flex project involving drag+drop of fxg graphics
my graphic is instantiated as below
<graphics:arrow2 id="object" mouseMove="mouseMoveHandler(event);" />
I get an error: "Call to a possibly undefined method Graphic."
This works if I change my drag-object to Image and replace the 'Graphic' below with 'Image'. What should I use to be able to reference the fxg graphic in the drag-drop?
my drag drop functionality is as follows
private function mouseMoveHandler(event:MouseEvent):void
{
var dragInitiator:Graphic = Graphic(event.currentTarget);
var ds:DragSource = new DragSource();
ds.addData(dragInitiator,"gph");
DragManager.doDrag(dragInitiator, ds, event);
}
private function dragEnterHandler(event:DragEvent):void {
if (event.dragSource.hasFormat("gph"))
{
DragManager.acceptDragDrop(SkinnableContainer(event.currentTarget));
}
}
private var objectX:Number;
private function dragDropHandler(event:DragEvent):void {
objectX= SkinnableContainer(event.currentTarget).mouseX+50;
Graphic(event.dragInitiator).x = objectX;
Graphic(event.dragInitiator).y = 100;
}
This is an example taken from SaturnBoy:
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
imports...
private function mouseDownHandler(e:MouseEvent):void {
DragManager.doDrag(e.currentTarget as IUIComponent, null, e);
}
private function dragEnterHandler(e:DragEvent):void {
DragManager.acceptDragDrop(e.currentTarget as IUIComponent);
}
private function dragDropHandler(e:DragEvent):void {
e.currentTarget.addElement(e.dragInitiator);
}
]]>
</fx:Script>
<s:Panel title="src" width="100" minHeight="133" x="10" y="10">
<s:Graphic width="80" height="80"
mouseDown="mouseDownHandler(event)">
<s:Rect ... </s:Rect>
</s:Graphic>
<s:Graphic width="80" height="80"
mouseDown="mouseDownHandler(event)">
<s:Ellipse ... </s:Ellipse>
</s:Graphic>
...
</s:Panel>
<s:Panel title="target" width="100" minHeight="133" x="120" y="10"
dragEnter="dragEnterHandler(event);"
dragDrop="dragDropHandler(event);">
...
</s:Panel>
</s:Application>
Related
I don't understand why when we change data on dataprovider, all the itemRenderers of the impacted column are called ? Here is a little example of my problem :
application :
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="application1_creationCompleteHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
private var _ac:ArrayCollection = new ArrayCollection();
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var i:int = 10;
while(i >= 0)
{
_ac.addItem({fieldA:Math.random() * 100, fieldB:Math.random() * 100});
i--;
}
dg.dataProvider = _ac;
dg.requestedRowCount = _ac.length;
}
protected function button1_clickHandler(event:MouseEvent):void
{
_ac.getItemAt(0)["fieldA"] = Math.random() * 100;
_ac.getItemAt(0)["fieldB"] = Math.random() * 100;
_ac.refresh();
}
]]>
</fx:Script>
<s:layout>
<s:VerticalLayout />
</s:layout>
<s:Button label="change data" click="button1_clickHandler(event)" />
<s:DataGrid id="dg">
<s:columns>
<s:ArrayList>
<s:GridColumn dataField="fieldA" itemRenderer="MyItemRenderer" />
<s:GridColumn dataField="fieldB" />
</s:ArrayList>
</s:columns>
</s:DataGrid>
</s:Application>
myItemRenderer :
<?xml version="1.0" encoding="utf-8"?>
<s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" clipAndEnableScrolling="true">
<fx:Declarations>
<s:Sequence id="myAnimation" duration="2000" target="{col}" >
<s:Fade alphaFrom="0.0" alphaTo="1.0"/>
<s:Fade alphaFrom="1.0" alphaTo="0.0"/>
</s:Sequence>
</fx:Declarations>
<fx:Script>
<![CDATA[
private var _data:Object;
override public function set data(value:Object):void
{
super.data = value;
_data = value;
if(null != _data)
{
display();
}
}
private function display():void
{
lblData.text = _data[column.dataField];
myAnimation.play();
}
]]>
</fx:Script>
<s:Rect top="-2" left="0" right="0" bottom="-2">
<s:fill>
<s:SolidColor id="col" color="0xFF0000" />
</s:fill>
</s:Rect>
<s:Label id="lblData" top="9" left="7"/>
</s:GridItemRenderer>
I just want to play animation on the impacted cell but each time, animation on each cell is fired. How can I code that please ?
The reason for all that recycling is this: you're calling the refresh method, hence you're explicitly asking for all this recycling. It will invalidate all the sorts and filters applied to your collection, hence all the positions of the items in the datagrid are invalidated and every item is recycled.
So you should remove this call. After that something like this should then do what you expect:
private var colValue:String;
override public function prepare(hasBeenRecycled:Boolean):void {
if (data && colValue != data[column.dataField]) {
colValue = data[column.dataField];
lblData.text = colValue;
myAnimation.play();
}
}
The prepare method will still be called every time, but your animation will only be played when the value has actually changed.
I'm having a sizing issue with a canvases located inside an HBox. It seems "_graphic", "_border" and "_fill" canvases (in com.example.ThingRenderer.mxml) do not get measured at the same time as all the other measurements inside the renderer. However, this problem is only observed on the first pass-through. Refer to the images for a visual... 1st image shows the state of the app after it finished loading. 2nd image represents what the screen looks like after the Populate button is clicked. 3rd image shows what happens when the stepper is incremented. The question is how come the drawing in the 3rd image doesn't get rendered once the data is populated into the table?
RendererTest.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="absolute"
creationComplete="handleCreationComplete(event)"
>
<mx:Script>
<![CDATA[
import com.example.Thing;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import mx.events.NumericStepperEvent;
private const _thingProvider:ArrayCollection = new ArrayCollection();
private var _thing1:Thing;
protected function handleCreationComplete(event:FlexEvent):void {
_thing1 = new Thing("thingy", 0xff0000, 0.3);
_stepper.value = _thing1.ratio;
}
protected function handlePopulateClick(event:MouseEvent):void {
_thingProvider.addItem(_thing1);
}
protected function handleStepperChange(event:NumericStepperEvent):void {
_thing1.ratio = event.value;
}
]]>
</mx:Script>
<mx:VBox>
<mx:Button label="Populate" click="handlePopulateClick(event)" />
<mx:NumericStepper id="_stepper" minimum="0" maximum="1" stepSize="0.01" change="handleStepperChange(event)" />
<mx:AdvancedDataGrid dataProvider="{_thingProvider}" variableRowHeight="true" width="100%" height="100%">
<mx:columns>
<mx:AdvancedDataGridColumn headerText="Name" dataField="name" />
<mx:AdvancedDataGridColumn headerText="Display"
width="150" sortable="false"
itemRenderer="com.example.ThingRenderer"
/>
</mx:columns>
</mx:AdvancedDataGrid>
</mx:VBox>
</mx:Application>
com.exampleThingRenderer.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas
xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
>
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
private var _thing:Thing;
private var _ratioWatcher:ChangeWatcher;
private var _doClearContent:Boolean;
private var _doDrawBorder:Boolean;
private var _doUpdateFill:Boolean;
override public function set data(value:Object):void {
if(value && value is Thing) {
_thing = Thing(value);
if(_ratioWatcher) {
_ratioWatcher.unwatch();
}
_ratioWatcher = ChangeWatcher.watch(_thing, "ratio", handleRatioChanged);
_doClearContent = false;
_doDrawBorder = true;
_doUpdateFill = true;
_graphic.invalidateSize();
_border.invalidateSize();
}
else {
_doClearContent = true;
_doDrawBorder = false;
_doUpdateFill = false;
}
super.data = value;
}
private function handleRatioChanged(event:Event):void {
_doUpdateFill = true;
invalidateDisplayList();
}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
if(_doClearContent) {
_container.visible = false;
_container.includeInLayout = false;
_doClearContent = false;
}
super.updateDisplayList(unscaledWidth, unscaledHeight);
if(_doDrawBorder) {
trace("_thingContainer.width="+_container.width, "_thingGraphic.width="+_graphic.width, "_thingBorder.width="+_border.width);
_border.graphics.clear();
_border.graphics.moveTo(0, 0);
_border.graphics.lineStyle(1, _thing.color);
_border.graphics.lineTo(_border.width, 0);
_border.graphics.lineTo(_border.width, _border.height);
_border.graphics.lineTo(0, _border.height);
_border.graphics.lineTo(0, 0);
_doDrawBorder = false;
}
if(_doUpdateFill) {
_percentage.text = Math.round(_thing.ratio * 100.0) + "%";
_fill.graphics.clear();
_fill.graphics.beginFill(_thing.color);
_fill.graphics.drawRect(0, 0, _fill.width * _thing.ratio, _fill.height);
_doUpdateFill = false;
}
}
]]>
</mx:Script>
<mx:HBox id="_container" width="100%" paddingLeft="5" paddingTop="5" paddingRight="5" paddingBottom="5">
<mx:Label id="_percentage" width="45" />
<mx:Canvas id="_graphic" width="100%" height="15">
<mx:Canvas id="_border" x="0" y="0" width="100%" height="100%" />
<mx:Canvas id="_fill" x="0" y="0" width="100%" height="100%" />
</mx:Canvas>
</mx:HBox>
</mx:Canvas>
com.example.Thing.as
package com.example {
public class Thing {
[Bindable] public var name:String;
[Bindable] public var color:uint;
[Bindable] public var ratio:Number;
public function Thing(name:String, color:uint, ratio:Number) {
this.name = name;
this.color = color;
this.ratio = ratio;
}
}
}
All this happens because you can't use width and height properties in updateDisplayList, they are not updated yet. Make separate component (e.g. ThingProgressBar) and put drawing logick inside it, that will solve everything:
package
{
import mx.core.UIComponent;
public class ThingProgressBar extends UIComponent
{
private var _ratio:Number;
public function get ratio():Number
{
return _ratio;
}
public function set ratio(value:Number):void
{
_ratio = value;
invalidateDisplayList();
}
override protected function updateDisplayList(
unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth, unscaledHeight);
graphics.clear();
if (unscaledWidth > 0 && unscaledHeight > 0)
{
graphics.lineStyle(1, 0xFF0000);
graphics.drawRect(0, 0, unscaledWidth, unscaledHeight);
graphics.beginFill(0xFF0000);
graphics.drawRect(0, 0, unscaledWidth * ratio, unscaledHeight);
graphics.endFill();
}
}
}
}
So your renderer might look like this:
<mx:HBox
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:local="*"
>
<fx:Script>
<![CDATA[
[Bindable] private var _thing:Thing;
override public function set data(value:Object):void
{
_thing = value as Thing;
super.data = value;
}
]]>
</fx:Script>
<mx:HBox width="100%"
paddingLeft="5" paddingTop="5"
paddingRight="5" paddingBottom="5">
<mx:Label text="{_thing.name}" width="45" />
<local:ThingProgressBar width="100%" height="15"
ratio="{_thing.ratio}"/>
</mx:HBox>
</mx:HBox>
I removed watcher. Binding by watcher is considered a bad practice, use mxml binding or events instead.
I removed two Canvases with separated border and fill - they can be cobined together.
I used UIComponent instead of Canvas. Don't use containers unless you need layout, they are heavy.
I used HBox instead of Canvas in renderer because I like boxes more :) But you can't avoid using second container in renderer if you need custom styles since List overwrites renderer's stylesheet.
Why TabbedViewNavigatorApplication don’t have popView() (as in ViewNavigatorApplication I can use popView to go previous view)?
How can I do that in TabbedViewNavigatorApplication?
<fx:Script>
<![CDATA[
protected function BackBtn(event:MouseEvent):void{
navigator.popView(); //error
}
]]>
</fx:Script>
<s:ViewNavigator label="Page1" width="100%" height="100%" firstView="views.DurationView" >
<s:titleContent>
<s:Button label="Back" click="BackBtn(event)"/>
</s:titleContent>
</s:ViewNavigator>
<s:ViewNavigator label="Page2" width="100%" height="100%" firstView="views.FrequencyView"/>
</s:TabbedViewNavigatorApplication>
thanks.
<?xml version="1.0" encoding="utf-8"?>
<s:TabbedViewNavigatorApplication creationComplete="tabbedviewnavigatorapplication1_creationCompleteHandler(event)"
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
private var tabHistory : Array;
private var isLoadingFromHistory : Boolean;
protected function BackBtn(event : MouseEvent) : void
{
isLoadingFromHistory = true;
if (tabHistory.length == 0)
{
trace("You can't go back any further");
tabHistory.push(0);
}
tabbedNavigator.selectedIndex = tabHistory.pop();
}
protected function tabbedviewnavigatorapplication1_creationCompleteHandler(event : FlexEvent) : void
{
tabHistory = [];
tabbedNavigator.addEventListener(IndexChangeEvent.CHANGE, tabsChangedHandler);
}
private function tabsChangedHandler(event : IndexChangeEvent) : void
{
if (isLoadingFromHistory)
{
isLoadingFromHistory = false;
return;
}
tabHistory.push(event.oldIndex);
trace(tabHistory);
}
]]>
</fx:Script>
<s:ViewNavigator firstView="views.WhosAtTheDoorHomeView"
height="100%"
label="Page1"
width="100%">
<s:titleContent>
<s:Button click="BackBtn(event)"
label="Back"/>
</s:titleContent>
</s:ViewNavigator>
<s:ViewNavigator firstView="views.WhosAtTheDoorHomeViewCopy"
height="100%"
label="Page2"
width="100%">
<s:titleContent>
<s:Button click="BackBtn(event)"
label="Back"/>
</s:titleContent>
</s:ViewNavigator>
</s:TabbedViewNavigatorApplication>
I'm porting a Flash game to Flex.
In the original Flash game, when a player would chat something, I assign that text to a TextField (which had a harcoded width W=240 and wordWrap=true, multiline=true). After that I use the TextField's textHeight to draw a rectangle around (and underneath) it:
public function set text(str:String):void {
_tf.text = str;
_tf.height = _tf.textHeight + 2 * PAD;
// draw the rectangle around the TextField
_rect.x = _tf.x - PAD;
_rect.y = _tf.y - PAD;
_rect.graphics.clear();
_rect.graphics.beginFill(BGCOLOR, 0.8);
_rect.graphics.drawRoundRect(0, 0, _tf.textWidth + 2 * PAD, _tf.textHeight + 2 * PAD, R);
_rect.graphics.endFill();
_fadeTimer.reset();
_fadeTimer.start();
}
This works ok.
In my new Flex app however I don't know, how to find Label dimensions and how to make it grow with the text.
Here is my test case, which doesn't work as wished (but it runs in Flash Builder ok).
Does anybody please have any suggestions, I've searched a lot.
BubbleTest.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:comps="*"
width="700" height="525" backgroundColor="#CCCCCC"
creationComplete="init()">
<fx:Script>
<![CDATA[
public function init():void {
_bubble0.text = 'Hello world';
}
]]>
</fx:Script>
<s:Rect id="_user0" horizontalCenter="0" y="340" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<s:Rect id="_user1" left="4" top="4" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<s:Rect id="_user2" right="4" top="4" width="160" height="140">
<s:stroke>
<s:SolidColorStroke color="red" />
</s:stroke>
</s:Rect>
<comps:Bubble id="_bubble0" x="20" y="340" />
<comps:Bubble id="_bubble1" left="170" top="4" />
<comps:Bubble id="_bubble2" right="170" top="4" />
</s:Application>
Bubble.mxml:
<?xml version="1.0" encoding="utf-8"?>
<s:Group
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
creationComplete="init(event)">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
public static const W:uint = 240;
private static const R:uint = 6;
private static const PAD:uint = 4;
private static const BGCOLOR:uint = 0xCCFFCC;
private var _timer:Timer = new Timer(500, 20);
public function init(event:FlexEvent):void {
_timer.addEventListener(TimerEvent.TIMER, fadeBubble);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
addEventListener(MouseEvent.CLICK, hideBubble);
if (x > 100 && x < 200) {
_left.visible = true;
_right.visible = false;
} else {
_left.visible = false;
_right.visible = true;
}
}
public function set text(str:String):void {
_text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000);
_text.text = str;
// XXX resize _rect here, but how?
_timer.reset();
_timer.start();
}
public function get text():String {
return _text.text;
}
private function fadeBubble(event:TimerEvent):void {
if (_timer.currentCount * 2 > _timer.repeatCount)
alpha /= 2;
}
public function hideBubble(event:MouseEvent):void {
visible = false;
_timer.stop();
}
]]>
</fx:Script>
<s:Graphic id="_right" x="{W}" y="0">
<s:Path data="L 0 10
L 20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Graphic id="_left" x="0" y="0">
<s:Path data="L 0 10
L -20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Rect id="_rect" x="0" y="0" width="{W}" height="120" radiusX="{R}" radiusY="{R}">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Rect>
<s:Label id="_text" x="0" y="75" width="{W}" fontSize="16" textAlign="center" />
</s:Group>
Sofar I've only got 2 ideas:
1) Somehow get ahold of Label's mx_internal TextField
import mx.core.mx_internal;
use namespace mx_internal;
// XXX and then?
2) Use a <mx:UIComponent id="uic"/> and addChild() my own TextField to it
but maybe there are more painless ways?
You will have to change the way you think about layouts a bit if you use flex. What you want to do is set the rectangles to be percentage based width and set the absolute width on nothing. What this allows the layout to do is what is called "Size to Content" meaning, its width will be determined by its children. Then the items that use percentage based width will look at that value and lay themselves out. A bit hard to explain through words so I pasted the new Bubble.mxml here for you to take a look. It probably isn't the exact look you want but this should get you started and will only take a little tweaking to get it exactly how you want.
<?xml version="1.0" encoding="utf-8"?>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
//public static const W:uint = 240;
private static const R:uint = 6;
private static const PAD:uint = 4;
private static const BGCOLOR:uint = 0xCCFFCC;
private var _timer:Timer = new Timer(500, 20);
public function init(event:FlexEvent):void {
_timer.addEventListener(TimerEvent.TIMER, fadeBubble);
_timer.addEventListener(TimerEvent.TIMER_COMPLETE, hideBubble);
addEventListener(MouseEvent.CLICK, hideBubble);
if (x > 100 && x < 200) {
_left.visible = true;
_right.visible = false;
} else {
_left.visible = false;
_right.visible = true;
}
}
public function set text(str:String):void {
//_text.setStyle('color', Util.isRed(str) ? 0xFF0000 : 0x000000);
_text.text = str;
// XXX resize _rect here, but how?
_timer.reset();
_timer.start();
}
public function get text():String {
return _text.text;
}
private function fadeBubble(event:TimerEvent):void {
if (_timer.currentCount * 2 > _timer.repeatCount)
alpha /= 2;
}
public function hideBubble(event:MouseEvent):void {
visible = false;
_timer.stop();
}
]]>
</fx:Script>
<s:Graphic id="_right">
<s:Path data="L 0 10
L 20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Graphic id="_left" x="0" y="0">
<s:Path data="L 0 10
L -20 20
L 0 30">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Path>
</s:Graphic>
<s:Rect id="_rect" x="0" y="0" width="100%" height="100%" radiusX="{R}" radiusY="{R}">
<s:fill>
<s:SolidColor color="{BGCOLOR}" />
</s:fill>
</s:Rect>
<s:Label id="_text" x="0" paddingTop="5" paddingBottom="5" fontSize="16" textAlign="center" />
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>
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. :)