Symmetri Developer Blog

I found a little gotcha when selecting an item in a Flex tree. Sometimes you may want to auto-select one of the items in a tree when it is first loaded; it may also make sense to make sure that the parent branch of the item is open so that the highlighted item is visible to the user. In fact, if the branch is not open, I was seeing an error thrown by the Flex framework. So I tried a little bit of code that looked something like this:

tree.openItems = target.parent;
tree.selectedItem = target;

All nice and easy, right? Well, when I ran the application I found that the selection was not working; the tree would be opened at the right branch, but the selected item was not being set. The fix is to make sure that we call validateNow() after we set the openItems property:

tree.openItems = target.parent;
tree.validateNow();
tree.selectedItem = target;

Voila! Work perfectly. Why does it work? If you have time, digging around in the source code for the validateNow() function will no doubt make it clear.

AS3 doesn’t care or keep a record of the order in which you add properties to an Object; if you later use the for ... in loop to enumerate the properties of the Object, they can come out in any old order which has nothing to do with the original order in which they were added. This is by design; but there are times in which it may be useful to know the order in which properties were added. In my case, I am converting XML into chained objects and copying XML nodes to object properties; the order of the nodes in the original XML document is important for displaying data in readable formats, and so the order of saving object properties is important too.

Luckily for me, Manish Jethani has an excellent blog post in which he implements an OrderedObject class that keeps a record of property order. A simple and elegant solution that worked for me straight away.

When embedding fonts in Flex, the default render settings try to make text as readable as possible at all font sizes and colours. Generally the embedded fonts look pretty good, but there may be times when you want to optimize the font appearance for a specific font and specific font size. There are a number of styles available with Flex that can be tweaked to control how embedded fonts are rendered: fontAntiAliasType, fontSharpness, fontThickness, fontGridFitType etc. Using a combination of these will usually allow you to optimize your font appearance to your taste.

This blog post has an excellent little Flex tool that allows you play around with embedded font settings and see the result.

As a quick example, I have embedded the Arial font into a Flex application that displays a lot of numbers and text at a font size of 12px. Although default settings show text that is quite readable, I had some comments that users wanted crisper text, especially when taking screenshots and printing. I was able to improve the crispness of the text by using the following global style in my CSS:

global
{
    /* set font properties for crispest text at about 11px  */
    font-anti-alias-type: advanced;
    font-grid-fit-type: pixel;
    font-sharpness: 400;
    font-thickness: 100;
}

Below is a screenshot of the rendered Arial font before and after the optimization:

Before optimizing

After optimizing

That’s right - a function that has an equivalent in several other programming languages works differently in Actionscript. The String.replace function in Flex replaces only the first match by default. To get it to replace all matches, you can either add a regular expression as the first argument for the replace; or you can use the following:

string = string.split("a").join("b");

I prefer this to using a regular expression. To do something that is intuitively simple, it is not reasonable that the programmer has to introduce the complexity of a regular expression in this case. This implementation of the replace() function in Actionscript 3 is bad because it is not intuitive. The word “replace” in English has the meaning of substituting one thing for another; but it does not include the concept of only doing that substitution in a partial way. So, by having a default implementation that is only partial and not global, the replace() function fails to do what its name implies. Additionally, as a Flex programmer familiar with replace functions in other languages, I may not even aware of the fact that I am not doing a global replace unless I consult the documentation. So the designers of the language have facilitated the introduction of bugs by silently breaking a convention.

This is one of those things I couldn’t believe when I first came across it; now I have to live with it. It seems that if you set the background-color style for a Canvas component, the graphics that you draw on top of the canvas cannot be seen. The “background” covers the graphics. Seems crazy but that’s what happens. The following code will draw a black line from (0,0) to (100,100) but you won’t be able to see it because it will be obscured by the background.

//displayView is a Canvas that has been added to the display list
displayView.setStyle(“backgroundColor“, “#FFFFFF“);
	
// here we draw a black line on the Canvas
// but it won’t appear :(
displayView.graphics.setLineStyle(2, 0x000000);
displayView.graphics.moveTo(0,0);
displayView.graphics.lineTo(100,100);

To see your drawing, you need to turn off the background style. As the Americans would say: go figure.

You can use a Flash movie clip from within an SWF as the background for a component in Flex. First, you must create the symbol in Flash and then be sure to create a linkage for the symbol (Export for Actionscript etc.) and give it a unique name; then publish the Flash movie as a SWF. Within Flex, the background can be set up as part of a style in the CSS stylesheet - but the part that had me stumped was that instead of using background-skin, you must use background-image. That is, the following code is correct and will work:

.bubble
{
    background-image: Embed(source=“../swf/bubble_skins.swf“, symbol=“bubble“);
    background-alpha: 1.0;
    background-size: “100%“;
}

The following code will NOT work:

.bubble
{
    background-skin: Embed(source=“../swf/bubble_skins.swf“, symbol=“bubble“);
    background-alpha: 1.0;
    background-size: “100%“;
}

Suppose we want to lay out N number of objects on the perimeter of a circle, equally spaced. Finding the position of each object is trivial; we simply divide the total angle 2*PI by N and then draw out a point at the constant radius at that angle. However, doing the same thing on an ellipse is surprisingly tricky. Using the same algorithm as the circle in polar form does not yield the right results; the points end up “bunching up” on the minor axis. To find the correct algorithm, we need to think parametrically - we parametrize the elliptical curve by a variable theta and then plot points at equadistant intervals projected on the linear axis of theta:

var theta:Number = (Math.PI*2)*(i/NUMBER_OF_SEGMENTS) - Math.PI/2;
var a:Number = 100;
var b:Number = 80;
var x:Number = a* Math.sin(theta);
var y:Number = b*Math.cos(theta);
var point:Point = new Point(x, y);

Does adding the same event listener multiple times to a Flex object cause multiple, duplicate postbacks? I didn’t know for sure, but I just tried it and the answer is (thankfully) no. Let the good times carry on, then.

We just joined UBank and I noticed that their secure online banking site uses Flex within the HTML page as the most important and functional part of the interface. You can’t see what I mean unless you are a customer and have a valid login … and I realize this is hardly exciting to anyone else but me. But having created a series of real-world Flex applications over the last year I was happy to see that the most”serious” type of online applications are now starting to move in the direction of becoming RIAs.

I thought I would document this as I think the error message is rather unhelpful and even misleading. In Flex, say you add the same child DisplayObject to a Container:

// container is of type Container
// child is of type DisplayObject
container.addChild(child);
container.addChild(child);

you get the error message “Error #2006: The supplied index is out of bounds.” That’s not a particularly helpful message, because it’s a very general error that is generated inside the Container.addChildAt() method; even though you are not explicitly defining a child index, the error is related to indexing of the array that holds children of the container. You would get the same error if you tried to use container.addChildAt() and specified an invalid index.

A better error message for this case would be something like “Duplicate child object not allowed in single instance of Container”.