RIA utilities: copying instance properties

by RIAstar on February 9, 2012

I’ve lost count on how many times I’ve needed this in RIA development with Flex or ActionScript: the possibility to quickly copy property values from one class instance to another. The two most important uses I can think of right now are these:

  • You send a value object (VO) to the server. It comes back with a bunch of additional data. So far so good. But what you get back is another instance than the one you’ve just sent up the wire. Since the original instance may already be referenced somewhere in the application we do not want to simply replace it. We want the original instance filled with the new property values.
  • You show the user a form with which he can edit a VO. After he’s changed some values he can either commit his changes (‘OK’ button) or discard them (‘cancel’ button). In this scenario you’ll usually keep a copy of the original VO somewhere handy because you want to be able to restore it when needed. Now the story is the same as the previous one: we want to restore the values of the original instance, not replace it entirely.

So I finally made this convenience method that uses describeType() for introspection as an addition to my ObjectUtil class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
public static function copyProperties(source:Object,
                                      target:Object):void
{
    if (!source || !target) return;

    //copy properties declared in Class definition
    var sourceInfo:XML = describeType(source);
    var propertyLists:Array = [
        sourceInfo.variable, sourceInfo.accessor
    ];
   
    for each (var propertyList:XMLList in propertyLists) {
        for each (var property:XML in propertyList) {
            if (property.@access == undefined ||
                property.@access == "readwrite")
            {
                var name:String = property.@name;
                if (target.hasOwnProperty(name))
                    target[name] = source[name];
            }
        }
    }

    //copy dynamic properties
    for (name in source)
        if (target.hasOwnProperty(name))
            target[name] = source[name];
}

I have needed this so many times I find it hard to fathom why something similar is not included in the mx.utils.ObjectUtil class. It marries perfectly with ObjectUtils.clone().

A simple example:

var editableItem:MyClass = ObjectUtil.clone(originalItem);

//the user edits editableItem
//if he cancels we just discard this instance
//if he commits his changes we copy the new values
ObjectUtil.copyProperties(editableItem, originalItem);

Gigs – Easier ActionScript event handling – Protection revisited

by RIAstar on January 29, 2012

Some time ago I created Protection. It was a library intended to help me write more readable ActionScript code without breaking out of the paradigms that were set out by Adobe. You can find a more thorough explanation and motivation in an article I wrote earlier this year. I have been using it a lot now and as much as I like the basic idea, I came to realise that I had made a few wrong decisions. Most importantly:

  • overcomplicated nomenclature: in a silly attempt at originality I used military metaphors throughout the library (Sentries, Captains, Spies, etc.). These names make the code actually less transparent to someone who doesn’t know where they originated (i.e. anyone but me). This is in clear violation with my original intent: more readable code.
  • too many optional arguments: a lot of different configuration was passed through one method with a bunch of optional arguments. Again, this would not be transparent to someone who read such code for the first time.
  • used inheritance (instead of composition) to add the functionality to custom components
  • string-based conditionals: "r:propertyA", "f:propertyB" to pass ‘propertyA’ to the result handler and ‘propertyB’ to the failure handler? Not so pretty.

Enter Gigs (a.k.a RIAstar events)

So I decided to rethink the whole thing. To start with, the library name will remain my only attempt at originality. But let’s get down to the real stuff. This is how you use Gigs for tracking native Events:

follow(submitButton).by(MouseEvent.CLICK).handle(submit);

private function submit():void {
    //do some submitting
}

You can also join a ‘gigs.properties’ file to the application in which you can associate default event types to specific classes. For instance 95% of the time on Buttons we listen for CLICK events. So we register a default for that:

spark.components.supportClasses.ButtonBase = click

And then we can write the following to do the same thing as before:

follow(submitButton).handle(submit);
//we can still explicitely listen for
//another event than the registered default
follow(submitButton).by(MouseEvent.MOUSE_DOWN).handle(startDrag);

Passing property values

The ‘handle’ method takes one additional …rest argument to which you can pass all the event properties you want pass to the result handler. For example (I’ve registered the ListBase class with the IndexChangeEvent.CHANGE event type):

follow(itemList).handle(editItemAt, "newIndex");

private function editItemAt(index:int):void {
     //open item editor
}

Unfollowing (a.k.a. removing event listeners)

There are three ways to stop following Events.

Very specifically:

unfollow(submitButton).by(MouseEvent.CLICK).handle(submit);

Somewhat specifically (this will remove all event handlers that react to a CLICK event):

unfollow(submitButton).by(MouseEvent.CLICK).all();

Loose cannon (removes all event listeners for all event types for the given IEventDispatcher):

unfollow(submitButton).all();

To be continued

That’s it for now. I have yet to recreate all functionality that existed in Protection, but I will hopefully get to that soon.

CFInvoke with a custom endpoint – ColdFusion

by RIAstar on August 23, 2011

Consuming web services in ColdFusion is easy – at least since CF9, because it used to be a PITA in previous versions for some kinds of services (e.g. SOAP).

You can even write it in one line – woohoo! -, like this:

<cfinvoke webservice="http://www.riastar.net/service/?wsdl"
          method="remoteMethodName" someArgument="hello"
          returnvariable="result" />

CFInvoke assumes that the url of the service and its endpoint are the same. As usual with ColdFusion, this is all very nice and handy as long as your situation matches the default. But from the moment you have to customize a bit, you can start pulling out your hair. And the fact is that the real world has this tendency not to match the default situation.

For example: if the service you want to access has an endpoint that differs from the service url, you’re out of luck. I found the following – completely undocumented – solution to use a custom endpoint:

<cfset service = createObject(
          "webservice",
          "http://www.riastar.net/service/?wsdl"
) />
<cfset service._setProperty(
          "javax.xml.rpc.service.endpoint.address",
          "http://www.riastar.net/service"
) />
<cfinvoke webservice="#service#"
          method="remoteMethodName" someArgument="hello"
          returnvariable="result" />

Notice the underscore? That means you should probably not be using this.

Anyway, while researching this I also figured out the cfscript syntax to do the same thing.

service = createObject("webservice",
                       "http://www.riastar.net/service/?wsdl");
service._setProperty("javax.xml.rpc.service.endpoint.address",
                     "http://www.riastar.net/service");
result = service.remoteMethodName(someArgument="hello");

You can also find this snippet on Gist.

Protection – an ActionScript guarding library

by RIAstar on August 15, 2011

Form class outline

I’ve just pushed a usable version of a new library – called Protection – to GitHub. It will enhance the handling of the computing flow of asynchronous programs in ActionScript 3 and make your code look cleaner. (You can use it for synchronous programming too, but there’s less gain to be made.) At this stage it’s very much a work in progress, but the basic event handling is ready for production now. Next stop: enhancing service calls.

This looks like something for me!
If you regularly look at your ActionScript code and find yourself mumbling: “Ah, this class would look nice now, if it were not littered with all these ‘handleThisButtonClick’s and ‘handleThatLoadComplete’s. And then half of them take an ‘Event‘ argument that is never even used in the function. Yuck!“, Protection might be just up your alley.

Don’t mention the war!
If you want your code to be checked as much as possible at compile time and you like to have all your variables nicely typed, please step away from this page. The idea for Protection came to me when I first started mucking around with Ruby, so be warned.

So what’s wrong with my current code?
Let’s have a look at a classic example (warning: I’m going to oversimplify things here for clarity’s sake). Consider the following component:

a simple form

A simple form

It will have to do three things (all pretty straightforward, you may skip ahead):

  • if you click the ‘reset’ button,  the input field shall be emptied
  • if you click the ‘submit’ button the content of the form is validated (i.e. there must be something in the input field and it must be formatted as an email address):
    • if the form is valid, your email address will be stored on my server, so I can spam you
    • if it is not, the form will display an error message and invite you to correct it

If you’re not a very good programmer your code might look somewhat like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
public class From {

    public var mailInput:TextInput;
    public var submitButton:Button;
    public var resetButton:Button;

    ...

    private function createChildren():void {
        ... //create the visual elements

        submitButton.addEventListener(
            MouseEvent.CLICK, handleSubmitButtonClick);
        resetButton.addEventListener(
            MouseEvent.CLICK, handleResetButtonClick);
    }

    private function handleSubmitButtonClick(
                     event:MouseEvent):void {

        var isValid:Boolean;
        ... //do the validation of the form
            //and set local variable isValid

        if (isValid) {
            ... //send info to the server
        }
        else {
            ... //alert the user about his mistake
        }
    }

    ...

}

Many people would encapsulate the validation part into its own method. I’ve encountered the resulting pattern many, many times in ActionScript code I’ve seen. There’s obviously still too much going on for one function to handle, so some developers decide to encapsulate the two cases each into their own function. This would result in:

1
2
3
4
5
6
7
8
function handleSubmitButtonClick(event:MouseEvent):void {
    if (isValid()) {
        sendInfoToServer();
    }
    else {
        displayErrorMessages();
    }
}

Now you have three distinct functions. Each one of them does only one thing and it is very clear from its name what it is that it does exactly.

Much better!

And yet, I feel sad when I look at this. Because there is one ugly duckling in this class who’s name doesn’t give me the faintest clue of what it does. It only tells me when it will be called, which is frankly useless. And to top things off, it requires a parameter that it doesn’t even really need. Which – besides just being confusing – makes it impossible for me to call that function directly.

Form class outline

The form class outline

This example is but a small component that does very little. Most classes in ActionScript are riddled with these kind of handlers.

Enter Protection
Let me just rewrite 2 lines of the construction code for you, the ones where we added event listeners to the two buttons:

1
2
3
4
5
6
7
private function createChildren():void {
    ... //create the visual elements

    addSentry(submitButton,
        isValid, sendInfoToServer, displayErrorMessages);
    addEnvoy(resetButton, reset);
}

I can now simply remove both handler functions from my code and what remains is a class with a clean outline, less code and much easier to scan too. You may have noticed we don’t even mention the event type anymore. That’s because Protection has some default types mapped to some common classes, which of course you can override. Since on buttons we nearly always want to listen for MouseEvent.CLICK events, I don’t feel the necessity to always explicitly say so. And if you do want to register another type of event, there’s an optional parameter that can let you do just that.

But, but, but, … sometimes I really need that event object in the handler, or at least some property of it…
Never fear, we can fix that in a jiffy. Suppose we wanted to validate the form as the user was typing. We might add the following to the construction:

1
2
3
4
addSentry(mailInput,
    isValid, enableSubmitButton, displayErrorMessages,
    KeyboardEvent.KEY_UP
).mark("currentTarget.text");

So what happens here? Instead of passing the entire Event object to the handlers, a certain property is extracted from the Event and passed only to the functions that require it. For instance:

1
2
3
private function isValid(email:String):Boolean
private function enableSubmitButton():void
private function displayErrorMessages(email:String):void

Of course, you can do more complicated things to suit your needs, although Protection‘s main goal will always be to make code clearer rather than obfuscate it. I will elaborate on the possibilities in ensuing posts since this one is already long enough.

Hey, what about AS3Signals?
I know of AS3Signals of course. It’s a nice, mature library with quite some people working on it and many more using it. And it addresses very similar issues, or at least the same grievances with native AS event handling.

But there is one reason why I’ve never really used it: it totally omits the native event system. I do understand the motivation behind this, but the reality is that I have to use components written by others which dispatch only native events and don’t have Signal properties. Not in the least the entire Flex component set.

So this, in short long, is why I created Protection. You can download it or check the source code on GitHub.

Protection on Github

RIAstar.children = [new Lena()];

by RIAstar on April 28, 2011

My five-week old daughter is lying next to me on the couch and is telling me that I ought to show the interwebs the beautiful birth card I made to announce her arrival in this world. Or at least, that’s what I gather from her babbling. So without further ado:

A presentation of Lena's birth card

Click me, please!

Pixelate filter with Pixel Bender

by RIAstar on March 15, 2009

pixelate filter preview

Well, I finally found some time to dive into the Pixel Bender pool and start playing around with that new technology that came from Adobe-land. And this is what I came up with for my very first attempt: nothing too fancy, just the Pixel Bender version of the well known ”Pixelate” PhotoShop filter. Give it a whirl by adjusting the pixel size with the slider. Flash Player 10 required of course.

 

You can check the source code at http://labs.riastar.net/pixel_bender/srcview/index.html and here comes the Pixel Bender kernel source:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<languageVersion : 1.0;>

kernel Pixelate
<
   namespace : "net.riastar.shader";
   vendor : "RIAstar";
   version : 1;
   description : "pixelates an image";
>
{
   input image4 src;
   output pixel4 dst;

   parameter float size
   <
      minValue: 1.0;
      maxValue: 20.0;
      defaultValue: 4.0;
   >;

   void evaluatePixel() {
      float2 pos = outCoord();
      float center = (size + 1.0) / 2.0;

      dst = sampleNearest(src, float2(
         pos.x - mod(pos.x, size) + center,
         pos.y - mod(pos.y, size) + center
      ));

      //make sure not to sample outside the borders
      if (dst.a &lt;= 0.0)
         dst = sampleNearest(src, float2(
            pos.x - mod(pos.x, size),
            pos.y - mod(pos.y, size)
         ));
   }
}

I had quite a hard time getting it to work in ActionScript, apparently because I installed the Flex 3.3 SDK just a week ago. Just putting a declaration of a flash.display.Shader class in my code, was sufficient to stop all code from executing, although the VM did not crash. I also got no error message whatsoever.

So after a whole hour of trying everything I could think of, I told the compiler to use the old 3.2 SDK and tadaa: working like a charm. Is it a bug in 3.3 (which was meant to be a bugfix release in the first place) or did I do something wrong?