Given a dynamic or non-dynamic class like the following:
package {
public class MyClass {
public var myProperty:String;
public var myBooleanProperty:Boolean;
public function MyClass() {}
}
}
Flex 3 allows you to assign a value to myProperty like this:
myClassInstance["myProperty"] = "myValue";
myClassInstance["myBooleanProperty"] = true;
I regularly parse XML to get property names and their values then update correlated classes using this technique; however, Flex 4 no longer allows assigning the boolean property. I don't have a work-around.
If you trace the results:
trace(myClassInstance.myProperty) // Returns "myValue"
trace(myClassInstance.myBooleanProperty) // Returns null
Can someone explain what has changed and how to work-around the issue?
<?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.events.FlexEvent;
protected function application1_creationCompleteHandler(event:FlexEvent):void
{
var c:MyClass = new MyClass();
c["myBooleanProperty"] = true;
trace(c["myBooleanProperty"]);
}
]]>
</fx:Script>
</s:Application>
This outputs "true" with the Flex SDK 4.1.
There may be something else wrong in your code?
You can use Dictionary class instead.
Have you simply tried to do this?
myClassInstance.myBooleanProperty = true;
This is actually the standard way of assigning a value to a public property in AS3.
Related
I have a Flex Mobile Project that I am working on. I am trying to pass parameters from one view to another. The only problem is that I cannot use navigator.pushView to push the View and the parameter as the view I am pushing to was the previous view. So this wipes out using the addHandler() and the returnObjectsCreated() as I cannot use pushView. I am having to use popView because it is my previous view that I have to pass parameters too. Any help would be appreciated.
That class that has the parameters I need to pass is below. It is a view that shows a list. So I need to pass list.selectedItem to the popview or previous view...
<?xml version="1.0" encoding="utf-8"?>
<amec:BaseBrowseView xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:amec="com.amec.Components.*"
title="Select an item">
<fx:Script>
<![CDATA[
import com.amec.BaseSql;
import mx.collections.ArrayCollection;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
[Bindable]private var resultArr:ArrayCollection = new ArrayCollection();
protected function myList_changeHandler(event:IndexChangeEvent):void
{
navigator.popView();
//Either send a ref to the last view or override createReturn
}
[Bindable(event="myDataChanged")]
private function get myData():ArrayCollection
{
}
]]>
</fx:Script>
<s:List id="list"
height="100%" width="100%"
dataProvider="{myData}"
labelField="DMV_VALUE_1"
change="myList_changeHandler(event);">
</s:List>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
Now below is the previous view that I want to popView to that I need to pass parameters to so I can populate the TextInput with.
<?xml version="1.0" encoding="utf-8"?>
<amec:BaseControl xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:amec="com.amec.Components.*"
horizontalCenter="true">
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
[Bindable]
protected var textValue:String;
protected function control_creationCompleteHandler(event:FlexEvent):void
{
// todo: get control data from view.data
}
protected function control_clickHandler(event:MouseEvent):void
{
parentView.navigator.pushView(TextListView);
}
]]>
</fx:Script>
<s:Label text="Robert says something meaningful goes here" />
<s:TextInput id="ns" text="{textValue}" editable="false" click="control_clickHandler(event)"/>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
Again I cannot use pushView as the view is already on the stack.
In case you want to do it the right way, on the previous view (the one you want the result going to, add an eventListener for 'add'.
protected function addHandler(event:FlexEvent) : void {
if (navigator.poppedViewReturnedObject != null) {
var returnedObject : Array = navigator.poppedViewReturnedObject.object as Array;
if(!returnedObject) return;
yourData= new ArrayCollection(returnedObject);
}
}
On the view that you are going to pass the object from:
override public function createReturnObject():Object {
var returnedObject : Object = new Object();
returnedObject = dataYouWantToSendBack;
return returnedObject;
}
I looked at using static variables but that was a little messy, I also looked at using Dependency Injection but spending a few hours to set up the framework and get it running is to costly when all I am doing is passing parameters on a popView, so what I came up with is the similar approach I have used when doing Native Android Apps with the Android SDK. A Singleton with getters and setters.
Basically the way I have been able to do this is with the use of a Singleton sharedInstance. See code below:
package com.controls.Text
{
import flash.utils.Dictionary;
[Bindable]
public class ParameterManager
{
private static var instance:ParameterManager = new ParameterManager();
private var dictionary:Dictionary=new Dictionary();
public function ParameterManager( )
{
if (instance != null) { throw new Error('Must use ParameterManager.getInstance().') }
}
public static function getInstance(): ParameterManager {
return instance;
}
public function setParameter(key:*, value:*):void
{
dictionary[key]=value;
}
public function getParameter(key:*):*
{
return dictionary[key];
}
}
}
The method setting the value of the parameter:
protected function myList_changeHandler(event:IndexChangeEvent):void
{
var listViewReturnObject:String = new String();
listViewReturnObject = list.selectedItem.DMV_VALUE_1;
ParameterManager.getInstance().setParameter("selectedItem", listViewReturnObject);
navigator.popView();
}
The method getting the value:
protected function control_creationCompleteHandler(event:FlexEvent):void
{
var listViewReturnObject:Object = new Object();
listViewReturnObject= ParameterManager.getInstance().getParameter("selectedItem");
if (listViewReturnObject != null)
{
dataTxt.text= String(listViewReturnObject);
ParameterManager.getInstance().setParameter("", null); //Make sure objects are cleared when done.
}
}
I need to enable two way data binding in combobox’s selectedItem and a valueobject’s one of the field. I am using #{variable name} construct.
It works one way - when valueobject’s field is changed, combobox’s selectedItem is getting updated.
But reverse is not working unless I handle combobox’s change event explicitly.
Is there any reason for # not working as per expectation.
In below code snippet, I am trying to bind OrderInfo.billingName to combo1.selectedItem.
1st use case : OrderInfo.billingName’s initial value is getting set to combo1.selectedItem
2nd use case: In case OrderInfo.billingName value is changed in between, then also combo1.selectedItem is getting updated
3rd use case : When user select some value from combo1, it is not getting assigned to OrderInfo.billingName unless I handle change event.
[Bindable]
public class OrderInfo {
public var billingName:String ; //This field is bindable to combo1’s selectedItem
public var billingAddress:String;
public var billingCity:String;
public var billingState:String;
public var billingZip:String;
public var cardType:String;
public var cardNumber:String;
public var cardExpirationMonth:String;
public var cardExpirationYear:String;
public var deliveryDate:Date;
public function OrderInfo() {
}
public function toString ():String {
return "I am OrderInfo : " + this.billingName + this.billingCity;
}
}
<?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"
initialize="application1_initializeHandler(event)">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayCollection;
import mx.controls.Alert;
import mx.events.FlexEvent;
import mx.events.IndexChangedEvent;
import mx.utils.ObjectUtil;
import spark.events.IndexChangeEvent;
[Bindable]
public var dp:ArrayCollection = new ArrayCollection (
[ {Id:'one', Amount:1000},
{Id:'two', Amount:2000},
{Id:'three', Amount:3000}
]
);
[Bindable]
public var orderInfo:OrderInfo = new OrderInfo();
protected function application1_initializeHandler(event:FlexEvent):void
{
//Initial value of the field .. this could be coming via database
orderInfo.billingName = 'one';
}
protected function combo1_changeHandler(event:IndexChangeEvent):void
{
orderInfo.billingName = (((event.currentTarget as
ComboBox).selectedItem as Object).Id); //??
}
protected function button1_clickHandler(event:Event):void
{
mx.controls.Alert.show(ObjectUtil.toString(orderInfo));
}
protected function button2_clickHandler(event:Event):void
{
// Some backend process changed the value object
orderInfo.billingName = 'three';
}
]]>
</fx:Script>
<s:ComboBox id="combo1" x="81" y="65"
dataProvider="{dp}"
labelField="Id"
selectedItem="#{orderInfo.billingName}"
change="combo1_changeHandler(event)"
/>
<s:Button label="Get OrderInfo Object Snapshot" click="button1_clickHandler(event)"
x="273" y="176"/>
<s:Button label="Change OrderInfo Object" click="button2_clickHandler(event)"
x="52" y="176"/>
I am also looking into getting this functionality working. I believe the issue lies in what is being bound. The selectedItem property expects an object of type * which means an item from the arrayCollection that it's bound with. So try passing one or these objects
({Id:'one', Amount:1000},{Id:'two', Amount:2000},{Id:'three', Amount:3000})
to the selectedItem property instead of a string.
I have a flex application and a papervision BasicView. I would like to add a new flex UIComponent (such as a button) from within the papervision class. I have posted the full example code below. It works but I would like to be able to accomplish my goal without the "(this.parent.parent as Group).addElement(button);" line.
<!--Application 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" minWidth="50" minHeight="50"
creationComplete="Init()" applicationComplete="Start()">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import spark.components.Button;
public var start:QuickStart;
public function Init():void
{
start = new QuickStart();
var uicomp:UIComponent = new UIComponent();
addElement( uicomp );
uicomp.addChild( start );
}
public function Start():void
{
start.GoTime();
}
]]>
</fx:Script>
</s:Application>
//QuickStart.as
package{
import org.papervision3d.view.BasicView;
public class QuickStart extends BasicView
{
public function QuickStart()
{
super(500, 500, true, true);
}
public function GoTime():void
{
var button:Button = new Button;
//this is the offending line
(this.parent.parent as Group).addElement(button);
}
}
}
The version I have does work so please excuse any minor typos.
Logically you would dispatch an event inside your BasicView, listen for it in your main application, and create the button from up there. In a prefect OOP world, every class should be a black box sending events :)
I created a somewhat custom Spark button by doing the File > New > MXML skin and basing it on spark.components.button. The problem is that I need to add an extra text field to the button component and dynamically change that text...but of course, the property isn't recognized on a Spark Button.
Is there a simple way to add this field to my custom button skin & its property so it can be addressed? If not, is there a simple way to take what I've done and just extend the Spark Button? I can't seem to find any examples that show how to do it without writing it all up in ActionScript.
I'm glad you asked! This is much easier than you'd think so don't be discouraged! ActionScript is pretty easy once you get the hang of it.
First of all, let's define what we want. After reading your question I believe you would like to use your button something like this:
<local:MyCustomButton label="Hello" label2="World!"/>
So let's go over how to make that a reality.
Now, I would highly suggest extending Button with ActionScript, but it is also possible to do in mxml:
//MyCustomButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
</s:Button>
Then you can add the SkinParts you need in a <fx:Script>:
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[SkinPart]
public var secondLabelDisplay:spark.components.Label;
]]>
</fx:Script>
</s:Button>
So now when you make a skin you should include something like the original label, just with a different ID to reflect your new SkinPart:
But wait! What text should our second label show?? Well, we will need to add another property that you can set for each individual instance of the button:
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[SkinPart]
public var secondLabelDisplay:spark.components.Label;
private var _label2:String;
public function get label2():String
{
return _label2;
}
public function set label2(value:String):void
{
_label2 = value;
}
]]>
</fx:Script>
</s:Button>
Cool, so now we can set label2 when we use our button, but at this point it won't change the label's actual text property. We need to hook up our label2 to our secondLabelDisplay. We do this by calling invalidateProperties when the label2 changes and then change the label in commitProperties (which will be called because of the invalidateProperties() call):
<?xml version="1.0" encoding="utf-8"?>
<s:Button xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<fx:Script>
<![CDATA[
[SkinPart]
public var secondLabelDisplay:spark.components.Label;
private var _label2:String;
private var label2Changed:Boolean;
public function get label2():String
{
return _label2;
}
public function set label2(value:String):void
{
_label2 = value;
label2Changed = true;
invalidateProperties();
}
override protected function commitProperties():void
{
super.commitProperties();
if(label2Changed)
{
label2Changed = false;
secondLabelDisplay.text = label2;
}
}
]]>
</fx:Script>
</s:Button>
Lastly, you'll notice that if you change label2 again afte runtime, the label will show the change. But it won't show the change if you set an initial label2 like in our target usage. The Flex team made a special method just for this case, partAdded(). I won't go over too many details about it because there is already a good amount of literature on the subject.
Finally, here's our finished, custom button awaiting a skin to put it to use:
<fx:Script>
<![CDATA[
[SkinPart]
public var secondLabelDisplay:spark.components.Label;
private var _label2:String;
private var label2Changed:Boolean;
public function get label2():String
{
return _label2;
}
public function set label2(value:String):void
{
_label2 = value;
label2Changed = true;
invalidateProperties();
}
override protected function commitProperties():void
{
super.commitProperties();
if(label2Changed)
{
label2Changed = false;
secondLabelDisplay.text = label2;
}
}
override protected function partAdded(partName:String, instance:Object):void
{
if(instance == secondLabelDisplay)
{
secondLabelDisplay.text = _label2;
}
}
]]>
</fx:Script>
Best of luck!
I am having a problem with binding values in my ActionScript components. I basically want to set the value of a a variable in my component to a value in the model, and have the component variable automatically update when the model value is updated. I think that I just don't fully understand how data binding works in Flex - this is not a problem when using MXML components, but, when using ActionScript classes, the binding does not work.
This is the code I'm using, where the values are not binding:
package
{
public class Type1Lists extends TwoLists
{
public function Type1Lists()
{
super();
super.availableEntities = super.composite.availableType1Entities;
super.selectedEntities = super.composite.selectedType1Entities;
}
}
}
package
{
public class Type2Lists extends TwoLists
{
public function Type2Lists()
{
super();
super.availableEntities = super.composite.availableType2Entities;
super.selectedEntities = super.composite.selectedType2Entities;
}
}
}
/* TwoLists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
public var __model:ModelLocator = ModelLocator.getInstance();
public var composite:Composite =
__model.selectedComposite;
[Bindable]
public var availableEntities:ArrayCollection;
[Bindable]
public var selectedEntities:ArrayCollection;
]]>
</mx:Script>
<mx:List id="availableEntitiesList" dataProvider="{availableEntities}" />
<mx:List id="selectedEntitiesList" dataProvider="{selectedEntities}" />
</mx:HBox>
To use binding by code you should use mx.binding.utils.*
Take a look and the BindingUtils.bindProperty and bindSetter methods.
Also, be careful with manual databinding, it could lead you to memory leaks.
To avoid them, save the ChangeWatcher returned by bindProperty and bindSetter and call watcher's unwatch method when is no more used (i.e, in the dipose or destructor method)
You need to add the [Bindable] tag either to the class itself (making all properties bindable) or the properties you want to be [Bindable]. Marking properties or objects as [Bindable] in your MXML is not sufficient.
To fix this, I simply converted the classes to MXML components, and added a private variable for my ModelLocator.
/* Type1Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
availableEntities="{__model.selectedComposite.availableType1Entities}"
selectedEntities="{__model.selectedComposite.selectedType1Entities}">
<mx:Script>
<![CDATA[
import model.ModelLocator;
[Bindable]
private var __model:ModelLocator = ModelLocator.getInstance();
</mx:Script>
</TwoLists>
/* Type2Lists.mxml */
<?xml version="1.0" encoding="utf-8"?>
<TwoLists xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns="*"
availableEntities="{__model.selectedComposite.availableType2Entities}"
selectedEntities="{__model.selectedComposite.selectedType2Entities}">
<mx:Script>
<![CDATA[
import model.ModelLocator;
[Bindable]
private var __model:ModelLocator = ModelLocator.getInstance();
</mx:Script>
</TwoLists>