24
Feb
2006

Evolution of a feature – layout constraints

We spend a lot of time here on the Flex / Flex Builder team arguing over exactly how each piece of the framework should work, and how the syntax should look.

I thought it might be interesting to have a glimpse into how some of these features evolve, and why. I’m picking a particularly controversial example: layout constraints.

~

Layout constraints came about because designers in particular weren’t happy using containers for layout. Actually, let me say it a different way. When you drag things around, they generally expect things to stay put, although they are fine with things moving around when it makes sense (like when you drag something into a control bar). And they want pixel level control over the position of every element.

Among coders, feedback on container based layout was mixed. Most of them “got” it, and some of them loved it. But when you step back, it wasn’t good for all layouts. Boxy layouts (think forms) were just fine. More freeform layouts (think Flash) were hard to achieve.

There was also a performance issue. Nesting of containers meant nesting of movie clips. Removing the nesting, however, meant that fluid resizing layouts were hard to achieve.

~

For all these reasons, we decided to add a constraint system to Flex. We originally talked about all sorts of more complex ideas — sibling constraints and other more exotic constraints — but we settled the more conservative approach of only supporting constraints relative to the parent container.

Let’s say that we want to put a button in the top right corner of our app. Our original syntax looked like this:

Attempt 1:

<mx:Panel width=”100%” height=”100%”>
    <mx:Canvas width=”100%” height=”100%”>
        <mx:layoutConstraints >
            <mx:EdgeAnchor target=”myButton” right=”30″ />
        </mx:layoutConstraints>
        <mx:Button id=”myButton” y=”30″ />
    </mx:Canvas>
</mx:Panel>

This would allow us to add new types of constraints in the future, such as sibling constraints. The downside, however, lay in the tooling. Every time you add a constraint to a control, you have to add an ID. If the user changes the ID, you have to change it in both places. It’s not rocket science, but it’s error prone, and it can lead to situations in which the tool is trying to be “too smart”.

We moved the layout constraints to be inside the control itself. This fixed the problem of tracking IDs.

Attempt 2:

<mx:Panel width=”100%” height=”100%”>
    <mx:Canvas width=”100%” height=”100%”>
        <mx:Button y=”30″>
            <mx:layoutConstraints>
                <mx:EdgeAnchor right=”30″ />
            </mx:layoutConstraints>
        </mx:Button>
    </mx:Canvas>
</mx:Panel>

The next issue was that it was confusing to have the canvas inside the panel. People kept accidentally resizing the canvas instead of the panel, or pulling the panel out of the canvas. We also decided that the name “EdgeAnchor” was too verbose.

After much arguing about making things general vs. dealing with the specific needs in the 80% case, we decided to make Panel and Application understand how to do multiple different kinds of layout: absolute, vertical and horizontal.

Attempt 3:

<mx:Panel width=”100%” height=”100%” layout=”absolute”>
    <mx:Button y=”30″>
        <mx:layoutConstraints>
            <mx:Anchor right=”30″ />
        </mx:layoutConstraints>
    </mx:Button>
</mx:Panel>

Right around this time, people were dragging panels into the view, centering them, and expecting them to stay centered no matter what size the browser was. It was especially confusing because Flex Builder has snapping heuristics and the panel would snap into place when it was centered. We dealt with this by adding a centering constraint.

Attempt 4:

<mx:Panel width=”100%” height=”100%” layout=”absolute”>
    <mx:Button y=”30″>
        <mx:layoutConstraints>
            <mx:Anchor horizontalCenter=”0″ />
        </mx:layoutConstraints>
    </mx:Button>
</mx:Panel>

Soon after we made this change, the team was busy doing lots of what we call scenario testing: building applications in the same way our customers would. One thing about layout constraints that stuck out like a sore thumb was its verbosity. Where buttons used to be on a single line, they now occupied 5. We argued about this for a while, and decided to make layout constraints styles, partially because this was consistent with CSS.

We also decided to promote the use of “left” and “top” as opposed to “x” and “y”. One might wonder how these are different, but they are. The “left” property is a constraint that specifies the desired position for the left coordinate. The “x” property is the coordinate that an object happens to be at. Thus, if you were to use a move effect to move an object programmtically, its “x” property would change, but its “left” would not.

In any case, the resulting syntax looks like this (not in beta 1, but will be part of beta 2):

Attempt 5:

<mx:Panel width=”100%” height=”100%” layout=”absolute”>
    <mx:Button top=”30″ right=”30″ />
</mx:Panel>

The moral

Why did it take so long to arrive at what appears to be an obvious syntax? Perhaps it was too obvious. When we started, we were trying to solve for many different things: forward compatibility, generalizability, and the possibility of many different kinds of constraints. Through trial and error, we arrived at the simplest way to express the basic things we need for this release.

In this case, I am confident we ended up with the right answer, but it took a while. In fact, there are people out there in the Flash community who aren’t convinced that layout constraints are a good idea who I think we will turn around based on the new syntax.

Sometimes, these things take time to sort out. The answers always seem obvious in retrospect, but you can’t expect to get to the right answer straight away.

17 Responses to “Evolution of a feature – layout constraints”

  1. jeremy

    nice one, which made me re-considering using layout constraints again.

    should i prefer layout constraints over nested containers ?

  2. Simeon

    Thanks for the insight into how this came about. I was one of the people who “just got” nested layout controls, so the switch for me seemed odd.

    Now it makes alot of sense.

  3. Sho

    You should use whatever makes sense to you. Unless you use lots and lots of nesting, using HBox and VBox should be fine, especially with the speed of AS3.

    Using layout constraints will save you time if you find yourself wanting to nudge things left, right, up and down. It’s also good for more complicated layouts, such as when you have a button at the top and bottom of the page that need to be aligned, but you have controls in between them that are not aligned.

  4. Waldo Smeets

    Sho, nice move. Since layout constraints are moved into CSS and since these constraints are so close to regular width and hight settings, does that mean that we now also finally can set width:100% as a style definition instead of having to use inline width=”100%” all the time?

  5. Sho

    Unfortunately, it will not be possible to set width as a style in this release of Flex. By the time we made these other changes, it was too late to change something as fundamental as width.

  6. Billigflüge

    Hey,

    if you use Layout constraints you can save your precious time. Your text reminds me of creating “MySpace” – pages…
    Everyone should decide for him/herself what he or she wants to use to design pages

    :-)

  7. telecharger minecraft cracker

    I believe what you composed was actually very reasonable.
    But, what about this? suppose you added a little content?
    I mean, I don’t wish to tell you how to run your blog, however what if
    you added a post title that grabbed people’s attention?
    I mean kuwamoto.org » Blog Archive » Evolution of a feature – layout constraints is kinda boring.
    You might peek at Yahoo’s front page and note how they
    write post titles to get viewers to open the links. Youu might
    add a video or a related pic or two to grab peokple excited about everything’ve got to say.
    Just my opinion, it might make your posts a little livelier.

    Feel free to surf to my web blog … telecharger minecraft cracker

  8. animasyon

    Many people think that Rooney knows nothing at all.
    There are many websites that offer them for free and you can easily find lots of them.
    Some wives might use this verse as a weapon against a husband who depends on their parents for support.

  9. wall-deco.com

    Outstanding post however I was wondering if you could
    write a litte more on this topic? I’d be very grateful if
    you could elaborate a little bit further. Kudos!

    Also visit my web blog weight loss (wall-deco.com)

  10. facebook likes

    Awesome blog! Do you have any suggestions for aspiring writers?
    I’m planning to start my own blog soon but I’m a little
    lost on everything. Would you recommend starting with a free
    platform like WordPress or go for a paid option? There are so many options out there
    that I’m totally overwhelmed .. Any recommendations? Appreciate it!

    Feel free to surf to my site: facebook likes

  11. how to get more twitter followers fast

    bookmarked!!, I like your blog!

    my blog post how to get more twitter followers fast

  12. www.mobile games

    Outstanding post but I was wondering if you could write a litte more on
    this topic? I’d be very thankful if you could elaborate a little bit more.
    Bless you!

  13. Palestrante

    An intriguing discussion is definitely worth comment.
    I believe that you should write more on this issue, it may not be a taboo subject but typically people
    do not speak about such issues. To the next!
    Best wishes!!

  14. hungry shark evolution cheats

    I am curious to find out what blog system you’re working with?
    I’m experiencing some small security issues with my latest site and I’d like to find
    something more safeguarded. Do you have any solutions?

    Here is my blog – hungry shark evolution cheats

  15. rea

    This piece of writing will assist the internet
    users for building up new blog or even a blog from start tto end.

  16. avoir des microsoft point gratuit

    The chart will become an image on your Power –
    Point slide. For those outside the areas serviced by NFS, finding tthe most affordable laptops for college students will probably mean doing
    your homework and comparing prices from DELL University, HP
    Academy and the Microsoft Student Store to see which is the smartest investment for your
    particular budget and situation. Basically, tthe
    points are considered ass on the web money, and with
    these, you can purchase products accessible in various gamijng retailers.

    Look into my weblog – avoir des microsoft point gratuit

  17. Electrolux servisi

    This piece of writing will assist the internet
    users for building up new blog or even a blog from start tto end.

Leave a Reply