4 ms·

Lion: Cocoa Autolayout Release Notes

114 points by cpr 15y ago

jamesaguilar 15y ago
The syntax is crazy, but brilliant. I would never have thought of it myself, but now that I've seen it it's obvious. The main thing I wonder is whether the syntax is supported by vanilla objective c, or if Apple is cheating a little (i.e. building support for new hotness into the compiler).
- btn 15y ago
  The visual format is supplied to the layout system as a string. It's completely independent of the Objective-C language syntax.
- zedshaw 15y ago
  I did this years ago, in a project called Claro, and then again in http://ihate.rubyforge.org/profligacy/lel.html http://ihate.rubyforge.org/profligacy/lel.html and pretty much every GUI framework I've done. I got the idea from Wiki syntax and the Cassowary constraint solver as well as Knuth's algorithm. Apple's done nothing original here.
  - binarycrusader 15y ago
    I think whether they've done it well is more important than if they've done something original. Lots of people do original things, but not very well.
  - stephth 15y ago
    This is awesome. This concept of building elastic layouts with ASCII code is new to me and I agree with @jamesaguilar that it's one of those obvious yet genius ideas. Has anything been done towards this direction to generate CSS layouts? It seems like it could cure some headaches.
    - rufo 15y ago
      Yep: http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/
gfodor 15y ago
The first time I saw compiled constraint based mini-languages like this was in OpenLaszlo: http://www.openlaszlo.org/ http://www.openlaszlo.org/ It's one of the most brilliant yet underappreciated bits of software I've come across. Are there others?
- SimHacker 15y ago
  I love the constraint system in OpenLaszlo too, and I've used OpenLaszlo for many projects. The "Garnet" user interface system, developed in the 90's by Brad Meyers at CMU, also has constraints for laying out user interfaces. I worked on both Garnet at CMU and OpenLaszlo at Laszlo Systems. Here's a description and comparison of the two systems, that I wrote a while ago: Constraints and Prototypes in Garnet and Laszlo: http://www.donhopkins.com/drupal/node/69 http://www.donhopkins.com/drupal/node/69 "Once you've tasted a programming language with constraints, you will not want to go back. Programming without constraints is like writing in machine language: error prone, low level, tedious, inefficient and mind numbing." "Constraints are like structured programming for variables: In the same way that it's better to use loops and conditionals instead of gotos, it's also better to use declarative programming that says what you mean, instead of imperative peeks and pokes and side effects." A description of OpenLaszlo: What is OpenLaszlo, and what's it good for? http://www.donhopkins.com/drupal/node/124 http://www.donhopkins.com/drupal/node/124 I also worked briefly on a cross platform gui system called Galaxy, for a company called Visix, which had a constraint system called "springs and struts". But it turned out they were evil so I left. (The company, not the springs and struts. ;)
kenferry 15y ago
Some of that document is out of date - Interface Builder does have support for Auto Layout now. Auto Layout also has a space now. ;-) I like to spell it [Auto]-[Layout] (see the ASCII art programming language part of that document). People may also be interested in the WWDC session on Auto Layout: http://goo.gl/5sSgK http://goo.gl/5sSgK (requires free developer account). Some interesting aspects of the system to me: (1) The use of fairly simple but freeform constraints. The numerical solver is based on work in this paper, http://goo.gl/6fHdd http://goo.gl/6fHdd. They end up covering really a lot of stuff you want to do in a natural way, and with a single constraint object with few properties. (2) The emphasis on visualization. Most of the time constraints are created visually, in Interface Builder, by dragging objects around and snapping them together. When doing layout in source code, you use an ASCII art inspired format string that visually looks like the interface you're trying to create. When debugging at runtime, you can ask a window to draw constraints on screen, so that you can see what they are. (The debugging support itself is also interesting.) (3) The reworking of how layout fits into Cocoa's model-view-controller design. Previously, too much was in the controller layer - to do layout you ended up having to say things that you didn't really know, because it was data intrinsically known by the view layer. By reworking the layering, the views can take responsibility for those aspects of layout that are intrinsically known to the view. This takes a lot of pressure off, because (a) you don't have to specify things you don't know, (b) there's less work to do because the views are doing some of it, (c) a lot of the time the views are coming out of AppKit, so you never have to write the view parts at all. It also aligns the easiest thing to do (don't mess with the views) with the right thing to do (use standard OS behavior). If you want to make it do something unusual, you can, but you have to say so. Your code records the places you intentionally deviated. [Disclosure - I worked on this.]
- dirtyaura 15y ago
  > When doing layout in source code, you use an ASCII art inspired format string that visually looks like the interface you're trying to create. This is a cool idea. Instead of specifying layout inside strings, did you consider syntactic sugar or macros to do it in code?
  - 15y ago
fomojola 15y ago
Is this really the first constraint-based layout system in OSX land?
- kenferry 15y ago
  No. The existing Cocoa system was constraint based too, just more restrictive constraints (view to superview only). CoreAnimation had a constraint based layout system, Carbon had a constraint-based system.. just "constraint-based" doesn't capture what's interesting.
keyle 15y ago
Ok. Still miles away from what WPF proposes...
- mullr 15y ago
  The WPF system is hierarchical rather than constraint-based. I've done a variety of complex (I mean really complex) WPF layouts that need to scale, and they're complex and fiddly. In many cases I would rather have had a constraint system. When you try to align things to a layout grid in any way, for example, it becomes very awkward. But it's not clear to me constraint-based layout deals well with dynamic content; this may be a tradeoff.
  - thesz 15y ago
    I was told that WPF could produce "swastika" layouts. Ie, something along the lines: aaaaa bb aaaaa bb bb dd bb dd bb dd dd ccccc dd ccccc This is as tabular as "grid" from Tk. You can resize any of "a", "b", "c" or "d" widgets and everything will resize accordingly. So I have an impression that WPF is constraint-based.
- fabjan 15y ago
  How so?
marchdown 15y ago
The whole boxes-and-glue model reminds of TeX. Sure, constraint-based layout models are nothing new, but here we've got some specific similarities: line-based processing, optional arguments (H|V) in front, and especially priorities. Assigning priorities to different constraints is what allows TeX to degrade gracefully... before manifesting myriads of hard-to-trace bugs.
berntb 15y ago
This document is too long to read on a screen (yes, I'm old). I got it into Instapaper, but would prefer physical paper. Is there a link to a pdf version or something, somewhere?
vdm 15y ago
Current documentation (as of 2011-07-06): http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AutolayoutPG/Articles/Introduction.html http://developer.apple.com/library/mac/#documentation/UserEx... Demos: http://developer.apple.com/library/mac/#samplecode/Cocoa_Autolayout_Demos/Introduction/Intro.html http://developer.apple.com/library/mac/#samplecode/Cocoa_Aut...

114 points by cpr 15y ago

The syntax is crazy, but brilliant. I would never have thought of it myself, but now that I've seen it it's obvious. The main thing I wonder is whether the syntax is supported by vanilla objective c, or if Apple is cheating a little (i.e. building support for new hotness into the compiler).

btn 15y ago
The visual format is supplied to the layout system as a string. It's completely independent of the Objective-C language syntax.
zedshaw 15y ago
I did this years ago, in a project called Claro, and then again in http://ihate.rubyforge.org/profligacy/lel.html http://ihate.rubyforge.org/profligacy/lel.html and pretty much every GUI framework I've done. I got the idea from Wiki syntax and the Cassowary constraint solver as well as Knuth's algorithm. Apple's done nothing original here.
- binarycrusader 15y ago
  I think whether they've done it well is more important than if they've done something original. Lots of people do original things, but not very well.
- stephth 15y ago
  This is awesome. This concept of building elastic layouts with ASCII code is new to me and I agree with @jamesaguilar that it's one of those obvious yet genius ideas. Has anything been done towards this direction to generate CSS layouts? It seems like it could cure some headaches.
  - rufo 15y ago
    Yep: http://www.w3.org/TR/css3-layout/ http://www.w3.org/TR/css3-layout/

gfodor 15y ago

The first time I saw compiled constraint based mini-languages like this was in OpenLaszlo: http://www.openlaszlo.org/ http://www.openlaszlo.org/ It's one of the most brilliant yet underappreciated bits of software I've come across. Are there others?

SimHacker 15y ago
I love the constraint system in OpenLaszlo too, and I've used OpenLaszlo for many projects. The "Garnet" user interface system, developed in the 90's by Brad Meyers at CMU, also has constraints for laying out user interfaces. I worked on both Garnet at CMU and OpenLaszlo at Laszlo Systems. Here's a description and comparison of the two systems, that I wrote a while ago: Constraints and Prototypes in Garnet and Laszlo: http://www.donhopkins.com/drupal/node/69 http://www.donhopkins.com/drupal/node/69 "Once you've tasted a programming language with constraints, you will not want to go back. Programming without constraints is like writing in machine language: error prone, low level, tedious, inefficient and mind numbing." "Constraints are like structured programming for variables: In the same way that it's better to use loops and conditionals instead of gotos, it's also better to use declarative programming that says what you mean, instead of imperative peeks and pokes and side effects." A description of OpenLaszlo: What is OpenLaszlo, and what's it good for? http://www.donhopkins.com/drupal/node/124 http://www.donhopkins.com/drupal/node/124 I also worked briefly on a cross platform gui system called Galaxy, for a company called Visix, which had a constraint system called "springs and struts". But it turned out they were evil so I left. (The company, not the springs and struts. ;)

kenferry 15y ago

Some of that document is out of date - Interface Builder does have support for Auto Layout now. Auto Layout also has a space now. ;-) I like to spell it [Auto]-[Layout] (see the ASCII art programming language part of that document). People may also be interested in the WWDC session on Auto Layout: http://goo.gl/5sSgK http://goo.gl/5sSgK (requires free developer account). Some interesting aspects of the system to me: (1) The use of fairly simple but freeform constraints. The numerical solver is based on work in this paper, http://goo.gl/6fHdd http://goo.gl/6fHdd. They end up covering really a lot of stuff you want to do in a natural way, and with a single constraint object with few properties. (2) The emphasis on visualization. Most of the time constraints are created visually, in Interface Builder, by dragging objects around and snapping them together. When doing layout in source code, you use an ASCII art inspired format string that visually looks like the interface you're trying to create. When debugging at runtime, you can ask a window to draw constraints on screen, so that you can see what they are. (The debugging support itself is also interesting.) (3) The reworking of how layout fits into Cocoa's model-view-controller design. Previously, too much was in the controller layer - to do layout you ended up having to say things that you didn't really know, because it was data intrinsically known by the view layer. By reworking the layering, the views can take responsibility for those aspects of layout that are intrinsically known to the view. This takes a lot of pressure off, because (a) you don't have to specify things you don't know, (b) there's less work to do because the views are doing some of it, (c) a lot of the time the views are coming out of AppKit, so you never have to write the view parts at all. It also aligns the easiest thing to do (don't mess with the views) with the right thing to do (use standard OS behavior). If you want to make it do something unusual, you can, but you have to say so. Your code records the places you intentionally deviated. [Disclosure - I worked on this.]

dirtyaura 15y ago
> When doing layout in source code, you use an ASCII art inspired format string that visually looks like the interface you're trying to create. This is a cool idea. Instead of specifying layout inside strings, did you consider syntactic sugar or macros to do it in code?
- 15y ago

fomojola 15y ago

Is this really the first constraint-based layout system in OSX land?

kenferry 15y ago
No. The existing Cocoa system was constraint based too, just more restrictive constraints (view to superview only). CoreAnimation had a constraint based layout system, Carbon had a constraint-based system.. just "constraint-based" doesn't capture what's interesting.

keyle 15y ago

Ok. Still miles away from what WPF proposes...

mullr 15y ago
The WPF system is hierarchical rather than constraint-based. I've done a variety of complex (I mean really complex) WPF layouts that need to scale, and they're complex and fiddly. In many cases I would rather have had a constraint system. When you try to align things to a layout grid in any way, for example, it becomes very awkward. But it's not clear to me constraint-based layout deals well with dynamic content; this may be a tradeoff.
- thesz 15y ago
  I was told that WPF could produce "swastika" layouts. Ie, something along the lines: aaaaa bb aaaaa bb bb dd bb dd bb dd dd ccccc dd ccccc This is as tabular as "grid" from Tk. You can resize any of "a", "b", "c" or "d" widgets and everything will resize accordingly. So I have an impression that WPF is constraint-based.
fabjan 15y ago
How so?

marchdown 15y ago

The whole boxes-and-glue model reminds of TeX. Sure, constraint-based layout models are nothing new, but here we've got some specific similarities: line-based processing, optional arguments (H|V) in front, and especially priorities. Assigning priorities to different constraints is what allows TeX to degrade gracefully... before manifesting myriads of hard-to-trace bugs.

berntb 15y ago

This document is too long to read on a screen (yes, I'm old). I got it into Instapaper, but would prefer physical paper. Is there a link to a pdf version or something, somewhere?

vdm 15y ago

Current documentation (as of 2011-07-06): http://developer.apple.com/library/mac/#documentation/UserExperience/Conceptual/AutolayoutPG/Articles/Introduction.html http://developer.apple.com/library/mac/#documentation/UserEx... Demos: http://developer.apple.com/library/mac/#samplecode/Cocoa_Autolayout_Demos/Introduction/Intro.html http://developer.apple.com/library/mac/#samplecode/Cocoa_Aut...