everynerd.net

Just this past week I had found myself wrestling with a Flex application that can crop images on the fly, and display in two different places and two different sizes, a thumbnail of the new image.

One of the biggest headaches in the process was Flash’s caching of the previous URLs when another one has been added in its place. Clearly this causes an inconsistency in ‘what you see is what you get’ (WYSIWYG). So I had to find a solution.

The Image component in Flex has a cachePolicy property (inherited from UIComponent) that will ensure the component’s bitmap values are not cached, but straight URLs are not affected by this.

However, I found a workaround after a good deal of searching the net, and poking and prodding through the nooks and crannies of Flex.

Initially I was going to generate a bitmap of every image brought into the application, but the overhead would have been outrageous, and the simplicity of the program is the service call to generate the new cropped image and return the URL. But it turns out that by adding a random-numbered query string to the end of the incoming URL, the extra value will force the retrieval of the new image.

It worked like a charm, and the only drawback is that all images, changed or unchanged, are re-retrieved with every refresh of the display (in my case, when a component is set to visible, it makes a service call to populate data).

In my case, the value for the URL is kept in in a value object and in the get accessor for its value, I did the following:

1
2
3
4

public function get urlValue():String
{
return _urlValue + "?" + Math.random();
}

In a previous post I gave an introduction into the complete 180 I’ve done in the web development industry and where I’ve found myself now, and it’s a pretty good place. There have been some mighty challenges, but I feel I’m breaking fairly new ground in the department of Cairngorm asynchronous unit testing. At least, that’s what the results in a Google search would have me believe.

So to continue, I’ll elaborate in more detail about how I accomplished my tests:

1. In my case, the commands were not separated into service delegates and a delegate is imperative for Cairngorm unit testing
2. Follow these steps for modifying the FlexUnit source code to assist in giving your delegates a valid IResponder to work with
3. Build a service component (in our case, /business/Services.mxml) that includes RemoteObjects for your amfphp services
4. Build a test suite as per the FlexUnit documentation or a great blog entry here from Darron Schall - extremely helpful.
5. Create a test model class and use it to store values as a private variable in the test class will be cleared after the tearDown() function is hit (regardless if  you’ve specified any variable cleanup)
6. Build a function in your test suite to call a service from the delegate.

A few things should be kept in mind at this point, you will want to use the IResponder interface in place of Responder in the Cairngorm documentation. This will assist the unit testing process and in turn simplify your test assertions in the test suite. Therefore, in your test suite (which implements IResponder) you will have a result() function where you can run assertions on the service call you just made.

For instance:

1
2
3

private function result(event:Object):void {
assertTrue("Expected a true result.", testModel.var == true);
}

In the event the variable returns a false, the test runner will display a failure message. Otherwise, it is a passed test.

One suggestion for verifying true data rather than just existing data in the model, is to create an object and force it to have the values the service call should return depending on the parameters sent in, which is something I am likely to implement in the near future.

It sounds like a bit of a hack to hardcode a set of values that you know will exist somewhere, but considering the tools available it appears to be the best course of action. I’ve tried a variation on the FlexUnit package called dpUint but found that it wasn’t much clearer on proper implementation for my exact needs.

If there are any Flex developers that have some experience doing exactly this, feel free to let me in on the big secret. Beer’s on me if you can make my job easier.