how to refactor code inside curly braces in flex - apache-flex

Data binding in ActionScript is really cool. But what if I want to refactor a big switch or if statement inside the curly braces into a function, for example:
{person.gender == 'male' ? 'Mr.' : 'Ms.'}
into:
{salutation(person)}
The compiler doesn't let me do that. I know about properties and I could write getters and setters on the person object. But since I am using inlined JSON objects now that's not convenient(I think). What are other good ways to refactor this code?
To answer Matt's comment. The data type of person is just plain Object. It was decoded from JSON format coming from a service call.

You'll need to make the Person class (assuming you have one) bindable in order for this to work.
However, since you are saying you're using JSON objects, I'm assuming you just have anonymous objects that were parsed from a JSON string. In that case, I'm pretty sure that won't work. You'll need to create a strongly typed object that has bindable properties.
Just FYI: to avoid having to write custom JSON parsers for every object you want to create, you can create strong typed objects from vanilla objects using a bytearray trick:
public static function toInstance( object:Object, clazz:Class ):* {
var bytes:ByteArray = new ByteArray();
bytes.objectEncoding = ObjectEncoding.AMF0;
// Find the objects and byetArray.writeObject them, adding in the
// class configuration variable name -- essentially, we're constructing
// and AMF packet here that contains the class information so that
// we can simplly byteArray.readObject the sucker for the translation
// Write out the bytes of the original object
var objBytes:ByteArray = new ByteArray();
objBytes.objectEncoding = ObjectEncoding.AMF0;
objBytes.writeObject( object );
// Register all of the classes so they can be decoded via AMF
var typeInfo:XML = describeType( clazz );
var fullyQualifiedName:String = typeInfo.#name.toString().replace( /::/, "." );
registerClassAlias( fullyQualifiedName, clazz );
// Write the new object information starting with the class information
var len:int = fullyQualifiedName.length;
bytes.writeByte( 0x10 ); // 0x10 is AMF0 for "typed object (class instance)"
bytes.writeUTF( fullyQualifiedName );
// After the class name is set up, write the rest of the object
bytes.writeBytes( objBytes, 1 );
// Read in the object with the class property added and return that
bytes.position = 0;
// This generates some ReferenceErrors of the object being passed in
// has properties that aren't in the class instance, and generates TypeErrors
// when property values cannot be converted to correct values (such as false
// being the value, when it needs to be a Date instead). However, these
// errors are not thrown at runtime (and only appear in trace ouput when
// debugging), so a try/catch block isn't necessary. I'm not sure if this
// classifies as a bug or not... but I wanted to explain why if you debug
// you might seem some TypeError or ReferenceError items appear.
var result:* = bytes.readObject();
return result;
}

Related

Javascript dict vs {}

When using a {} as follows:
var m = {};
Then m is an Object that does not possess the methods of a Dict. You can see by pasting into jsfiddle
var m = {};
m['a'] = 'x';
alert(m.keys());
This will not run - since keys() is not a method on the given object. So then - how to get a dictionary with all its methods?
Update From #SLaks suggestion: Changing the original line to
var m = new Map();
does the trick
There is no such thing as a dictionary in Javascript.
You can use a regular object as a dictionary, as you're doing, and use methods like Object.keys() to help you.
If you use ES6 (or a polyfill), you can use the Map class, which is a normal class with get() and set() methods.
{} is an "object literal". It has no methods or properties other than what's part of the object prototype (a limited set of functions, such as toString, hasOwnProperty, etc), and what you define on it. It is otherwise empty and does not expose functionality you'd expect on a Dictionary. That's where Object comes in.
The static Object reference has an API on it that you can provide your objects to and effectively exposes a set of functions that can be performed on your object as if they were default methods a "dictionary" might expose.
var m = {};
m.a = 'x';
Object.keys(m) // => ['a']
You can find more methods that Object supports on MDN, https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
There is no "Dictionary", but an object in JavaScript can be used in a very similar way to a Map in Java.
var myObject = {}
...
for (var key in myObject) {
if (myObject.hasOwnProperty(key)) {
var value = myObject[key];
}
}
The hasOwnProperty() check is to avoid finding keys higher up JavaScripts prototype chain.

How to set an empty Object's properties programatically?

I'm doing some Actionscript work right now and I'd like to know whether there's a way to initiate an empty object's value programatically like this:
var myObj:Object = new Object;
myObj.add("aKey","aValue");
To add a property called aKey whose value is aValue
I need to create a "Dumb" (data-only) object to use as a parameter to send via POST. So I don't know offhand how long and/or how many attributes it's gonna have.
Or something like that.
Thanks
ActionScript 3 allows you to create new Objects using an expressive Object Literal syntax similar to the one found in JavaScript:
const myObj : Object = {
aKey: "aValue",
};
trace(myObj.aKey); // "aValue"
If you want to assign properties after the object has been constructed then you can use either dot notation or square bracket notation, eg:
const myObj : Object = {}; // create an empty object.
myObj.aKey = "aValue";
myObj["anotherKey"] = "anotherValue";
If you plan on sending the data over HTTP, you may wish to consider looking at the URLVariables class which will take care of URL encoding the data for you.

Image to Object with as3

I'm trying to convert an image in my assets folder
"./assets/image1.png"
to type Object. It needs to be Object because that's what the function I'm using it in is expecting.
Any ideas what would be the simplest way to do this?
Do you mean something like :
[Embed(source="assets/logo.jpg")]
private var logo:Class;
private function init(e:Event):void
{
this.displayImage(logo as Object);
}
private function displayImage(img:Object):void
{
//Assuming you have an image control on stage with an instance
//name of "myImage"
myImage.source = img;
}
If the function you are passing the image to is expecting an Object object, you can in pass anything, it won't reject it. That doesn't mean the function will work correctly, though. Any value will be an Object (except for undefined, which will be accepted but coerced to null and maybe some other strange cases).
So, assuming you didn't write the function yourself, do you have any doc that describes what it expects? Or maybe you have the source code for it?. Otherwise, if the only thing you know about what this function expects is that the parameter must be of type Object... you're in trouble, I think.
Why don't you create a new Object containing the information about the image... including the path.
var obj:Object = new Object();
obj.path = "/assets/image.jpg";
obj.height = 32;
obj.width = 32;
trace(obj.path);
// or, if Flex
Alert.show(obj.path);
And then just pass the new Object into the function and access it like I have above.

Array subclasses cannot be deserialized, Error #1034

I've just found a strange error when deserializing from a ByteArray, where Vectors cannot contain types that extend Array: there is a TypeError when they are deserialized.
TypeError: Error #1034: Type Coercion failed: cannot convert []#4b8c42e1 to com.myapp.ArraySubclass.
at flash.utils::ByteArray/readObject()
at com.myapp::MyApplication()[/Users/aaaidan/MyApp/com/myapp/MyApplication.as:99]
Here's how:
public class Application extends Sprite {
public function Application() {
// register the custom class
registerClassAlias("MyArraySubclass", MyArraySubclass);
// write a vector containing an array subclass to a byte array
var vec:Vector.<MyArraySubclass> = new Vector.<MyArraySubclass>();
var arraySubclass:MyArraySubclass = new MyArraySubclass();
arraySubclass.customProperty = "foo";
vec.push(arraySubclass);
var ba:ByteArray = new ByteArray();
ba.writeObject(arraySubclass);
ba.position = 0;
// read it back
var arraySubclass2:MyArraySubclass = ba.readObject() as MyArraySubclass; // throws TypeError
}
}
public class MyArraySubclass extends Array {
public var customProperty:String = "default";
}
It's a pretty specific case, but it seems very odd to me. Anyone have any ideas what's causing it, or how it could be fixed?
well, it seems array serialization is hardcoded. you should definitely post a bug report.
actually the code you posted doesn't throw an error since ba.readObject() as MyArraySubclass is simply null. MyArraySubclass(ba.readObject()) however would.
what you could try to fix it, would be to implement IExternalizable, altough I'm not sure it'll work any better.
I guess the problem is that Array is a very very special class in ActionScript (in the sense that in some way it is nothing more than any other dynamic class, but in other ways it's not at all) which leads to a lot of Array-specific code in the VM. Also, a question is, why do you need to subclass Array?

What does this this ActionScript syntax mean? ( Syntax for returning Objects Inline )

I am a Java programmer and need to work on a Flex/ActionScript project right now. I got an example of using ITreeDataDesriptor from Flex 3 Cookbook, but there is one line of actionscript code that's hard for me to understand. I appreciate if someone could explain this a little further.
public function getData(node:Object, model:Object=null):Object
{
if (node is Office) {
return {children:{label:node.name, label:node.address}};
}
}
The part that I didn't understand was "{children:{label:node.name, label:node.address}}". Office is simply a value object that contains two String properties: name and address.
The following return expression (modified from the question) ...
return {children:{label:node.name, body:node.address}}
... is functionally equivalent to this code ...
var obj:Object = new Object();
obj.children = new Object();
obj.children.label = node.name;
obj.children.body = node.address;
return obj;
The anonymous object returned in the question code complicates matters because it defines a property twice. In that case, the first declaration is used, and the subsequent one(s) are ignored. No compile-time or runtime error is thrown.
I think in Java you would call that a map or an associative array. In Javascript and Actionscript you can say this to create an object with certain properties:
var myobject = {
'prop1': 100,
'prop2': {
'a': 1
}
}
trace( myobject.prop1 ); // 100
trace( myobject.prop2.a ); // 1
In your example it's just returned as a nameless object.
return {children:{label:node.name, label:node.address}};
Means you are returning a new Object. The {} are the Object's constructor, and in this case its an Anonymous object.
Thank you both for the quick response. So if I understand your explanations correctly, the return statement is returning an anonymous object, and this object has only one property named "children", which is again an associative array - ok, here is the part I don't quite understand still, it seems that both properties in this array are named "label", is this allowed?

Resources