How do you control the u-layout of the Ember.js application?

Question

I am looking for options to control the ui-layout of the ember application that I am currently working on.

An application should be very flexible (customizable) when it comes to ui-layout - so it has container layouts with areas such as "top", "left", "center", "right" and "bottom", maybe be nested if there was a good fit (this is how most layout managers control the layout).

I found several solutions, but somehow did not decide:

• yui2-layout-manager ( Demo ) It seems that the old or awkward successor, yui3-layoutmanager, has been in the planning stage since months (years?)

• jquery-ui-layout ( Demo ) Looks a bit bloated. Codebase is not publicly available: it seems that the project owner does not want it to be too public (?) (From what I read in the google group, someone asked why it was not on github ...)

• dojotoolkit ( Demo ) Seems to go out a bit "obsessively"

On the whole, no solution seems “good” to me, and I wonder if it is better for me to write mock-control logic. What do you think?

Answer 1

Finally I found this: http://www.bramstein.com/projects/jlayout

"[..] jLayout JavaScript library provides layout algorithms for composing components. A component is an abstraction: it can be implemented in various ways, for example, as elements in HTML5 canvas or as HTML elements. JLayout library allows you to focus on drawing individual components, and not at the location of them on the screen. [..] "

Answer 2

Check out these two add-ons:

https://github.com/ghempton/ember-layout

https://github.com/ghempton/ember-routemanager

Also check out the demo http://ghempton.github.com/ember-layout-example/

Edit: I think this project: https://github.com/flamejs/flame.js is very close to what you want.

Answer 3

JQuery ui-layout is a problem with Ember because ui-layout requires a ui-layout-center element during layout, but Ember {{outlet}} usually defers their presence.

Answer 4

You might look at Twitter Bootstrap. It has a set of layout classes.

http://twitter.github.com/bootstrap/scaffolding.html