So, in an earlier post, I mentioned that Flash Catalyst 5.5 now supports resizable applications. But what good is having a resizable application, if the contents don’t know how to resize. Flash Catalyst now supports a constraint based layout system, and with that the ability to define the position of your components to either the four edges, the center positions, or a static x & y value.

Let’s look at how this works. I have added one of the new For Placement Only (FPO) components, the Tab Bar. Now Flash Builder supports a Tab Bar component, but it is still using the old component architecture, so it is not Flash Catalyst friendly. I will talk about these in later post.

Here is my tab bar placed pixels from the left and 20 pixels down. I also have edited the default names in the Design Time Data panel.

Now, when you select a component you will see circle around the component. These are the component’s ‘suction cups’. Clicking on each suction cup will enable the constraints to take effect on the positioning of the component. For the tab bar, let’s turn the constraints on for the left and the top. You can tell that they are enabled by the blue fill in the circle.

There are a few ‘hidden’ options that you can define for your constraint. If you click and hold on a constraint circle, a menu will appear giving you the option to set the constraint as fixed (what they are by default), as center (this will keep the component centered within it parent), or none (use this to remove any constraint you may have set on the component).

Let’s look at using constraints within a custom component. I have the start of a custom panel that will become a login widget. I have added a Sign Button to the bottom of the component.

I select the Sign In button, and attach the suction cups to the left and right of the component (aka parent). I then changed the constraint from Fixed to Center. The constraint line gets the wiggle added to it to inform you that the constraint type is centered.

So, there is a brief overview of the new component constraints that are available in Flash Catalyst 5.5