Flex Builder 3.0 New Design Constraints

Am I the only one who thinks the new implementation of Design view constraints in Flex Builder 3.0 M3 B2 is worse than it was in Flex Builder 2.0? I know the old version could appear counter intuitive but it was never as awkward as the new version in FB 3.0. Especially as these are tools for the more visual “drag n drop” RAD approach that Flex provides.

Personally I rarely use the design view except when explaining how Flex Builder operates to those new to the Flex Builder application and to Flex. So you can imagine the frustration that it causes them compared to my sighing before returning to the code view. That said, this isn’t going to be a ranting post. I just wanted to document my experiences with the new constraint controls and provide feedback on what I would like to see improved or perhaps altered.

I have a couple of screen grabs of the old style Flex Builder 2.0 constraints control (which resides in the basic properties panel below the width, height, x and y entry fields. yes I know it is a but odd looking, but it is very simple to use and once you get used to how it interprets the values you apply and to what anchor it is very quick to use.

Now the new version is a different matter. I really like the fact that the constraint anchors are in the design view itself and directly connected to the current component you have selected. However, I find these anchors way, way, way too small and difficult to manipulate as it is very easy to accidentally set a row or column constraint within the component you have selected (in my case a Panel) when you are trying to actually set the components constraints instead.

The issue is that by default there is no entry for any of the constraints within the properties panel. these only appear once you have set an anchor in Design view (or set the relevant value in your MXML in Code view). I can understand that this is a cleaner approach to the Properties panel as it was getting a bit crowded with parameters that may or may not be actually used.

I would have preferred, however, to have had the option of either. Or to keep the properties panel as it currently is in Flex Builder 2.0 but make the anchors in design view a lot more user friendly (read bigger and more responsive). They are way too small and too easy to miss select as they currently stand (as you can tell this bothers me :p).

It would be helpful to perhaps have a color change to indicate you are setting the component main constraint anchors as opposed to the component row / column constraint anchors as this can lead to having to undo what you initially may have thought was a different anchor point to that which has been inserted.

Don’t let this put you off though, after all this is still in beta so there is potentially time still to get this fixed and in all honest I do like the new way of setting constraints, it just needs the minor flaws ironing out. For those of you who are wondering how you set a row or column anchor as opposed to what I would refer to as a layout anchor. You just click on the white ruler bar instead of the little blue anchor dot. Which as you can imagine can be a bit tricky to avoid when you have a lot of containers or components in general in place.That aside there is a helpful tooltip that indicates both the pixel value and the percentage when you run your mouse over these ruled areas.

Unfortunately as I indicated above the little blue anchor icons (you can see them in the second image), tend to move into this white space when there are a lot of containers in the main design area, so it is very easy to hit the ruler by mistake. While this isn’t a big deal it can be annoying.

Overall I feel this new look and feel for constraints is a bit of a step backwards. While the anchors are an improvement (albeit a fiddly one). It is the automatic appearance of the actual constraint information within the Design property panel that is more of an issue. I must prefer the old style constraint view. And as a thought perhaps that could be merged with the new “in page” anchors