Flex: dynamically sized clipping container

Here’s something that took me two days to figure out: I wanted to have a VBox nested inside another VBox, which I shall call ChildOne and Parent, respectively. I wanted to add child components to ChildOne so that ChildOne would conjure up scroll bars on demand, which is what it does by default due to the clipContent property being true by default.

That was easy enough, apart from the fact that I also wanted ChildOne to fill up Parent except for a tiny bit at the bottom, say, 20 pixels tall, which would contain a button I shall imaginatively dub ChildTwo.

All the approaches I tried at first resulted in either ChildTwo getting squashed, ChildOne extending beyond what it was supposed to, Parent conjuring up the scrollbars or some combination thereof, until I figured out that I had to code around the issue.

The solution itself was simple: compute a fixed height for ChildOne from Parent.height - ChildTwo.height. But as it turns out, the heights weren’t available during the construction of Parent, nor in the FlexEvent.CREATION_COMPLETE event handler. Fortunately, perusing the Flex documentation, I noticed ResizeEvent.RESIZE which is rather conveniently also fired upon the first layout.

The full solution, then, was approximately the following:

public class Parent extends VBox {
  private var ChildOne:VBox = new VBox();
  private var ChildTwo:Button = new Button();
  public Parent() {
    this.addEventListener(ResizeEvent.RESIZE, this.resized);
  private function resized():void {
    ChildOne.height = this.height - ChildTwo.height;

This example is reduced to the bare minimum, so it doesn’t take to account things like paddings and margins and whatnot, but it may help someone. (Hi future me! Forgot this already?)

Note: I was originally under the impression that I should be able to do this with constraint-based layouts, but when I tried it, ChildOne no longer clipped its contents, opting to expand instead which then led to Parent clipping. This seems a bit strange to me, so mayhaps I was doing something wrong. If that happens to be the case, please let me know. 🙂

Flexing the mental muscles

Whenever I’m learning a new language — or rather, a new environment, because it’s never just the language — at first I inevitably try to coerce it into a model I’m already comfortable with. It’s just the way my mind works. It usually feels very clumsy, which is the point where I start looking for clues on how I should be approaching the issue.

At some point, I read a blog post, article or bit of documentation that clues me in a bit. Then I try it out, and hit that “A-ha! So this is how things work here” moment. After that, the ride gets a lot smoother.

That initial befuddlement and subsequent feeling of victory is never limited to just one aspect of the environment, though. First, it happens with the language. Then it happens with something else, like the way you’re supposed to handle interactions between GUI components.

My latest such experience has been with Adobe Flex. The language is somewhat familiar, being of the ECMAScript variety, but the libraries are most definitely not, and things like skinning components are a source of great bewilderment to me.

I’ve enjoyed dipping into something altogether new, although some design decisions made at Adobe do seem somewhat questionable, such as having a dedicated namespace for SomethingManagers.

I do wish there was a way to unit test Flex code with something like the Eclipse JUnit runner or a NAnt/Ant command line script. It doesn’t seem altogether impossible, although I suspect all the MXML code would have to be compiled into ActionScript first. Any pointers that are *not* referring to FlexUnit are welcome — I know of FlexUnit and that’s not quite what I’m looking for. 🙂