Hi —
I’d like to get some architectural advice on how to integrate Ember with Golden Layout https://golden-layout.com/
I have a use-case of building a dashboard for a project at work, for which this is pretty much ideal… they can choose which things to view, and lay them out how they’d like to see them.
Unfortunately, both Ember and Golden Layout want to be “in charge”, and so I’ve been able to get them play together pretty well, but I’m using Ember’s __container__ at one point, and I know that’s not proper.
The main thing, as I see it, is getting a call from “outside” Ember to create an Ember component and install it.
You can see the code in action (it’s not in a CodePen/jsbin, due to the fill-the-whole-page nature of the app).
My code is on github
Thanks!
There is no easy way to do this. Frankly I think the only viable long-term solution is to write an ember-specific version of golden layout. Trying to have two competing frameworks in charge of the same thing sounds like an architectural choice you will regret in the long term. Golden layout seems to want to arbitrarily manipulate dom and even move stuff between windows, and I don’t think ember will handle this well at all.
Ouch – sorry to hear that. Anyway, thanks @alexspeller for taking the time to look at this.
How would you suggest going about writing an ember specific version of this? How would the control structure be built? Would all the tab content’s be outlets?
I have a UI design that i would really like to use that utilizes this layout and i want to build it with ember in a way that won’t spaghettify my code.
Those are questions that an ember implementation of this type of library would have to address. These questions can’t be well answered in advance and will depend on what you want to build and the requirements for your specific needs.
Hi Kilowhisky,
I’m currently working on this by taking the tack of having each ‘frame’ be a separate Ember application (see the Configuring Embedded Applications page for more info on embedded Ember applications).
I’m not real far into it, just figuring out how to keep things properly separate (so that each application has its own directory for its templates, for example) but I hope to have something interesting to blog about soon.
Keep us posted if you come up with anything!
That sounds like a chicken and the egg scenario.
I’m in the process of justifying to management re-writing our silverlight application in emberjs. The application consists of a single background pane (a map) and then several windows that can be moved and docked like the example above shows. All those windows show off bits of the attached model that underlies the whole application. I wish to improve this by allowing these “Views” to be represented in a way in which they can be moved around and docked in tab form. Eventually a link can be used to pop these views into a popup window which is also attached to the data layer.
So pretty much my specifications are exactly as shown in golden layout. Coming from silverlight background i understand the concepts of different views/components (XAML/UserControls) and binding them to data models.
I’ve been doing research into emberjs components but i don’t see any inkling that i can define anything with the power to alter the entire application structure like so.
–WindowContainer–
–Window dock-position=“1”>{{View 1}}–/window–
–window dock-position=“1”>{{View 2}}–/window–
–window dock-position=“3”>{{View 3}–/window–
–/windowcontainer–
Yes, this is not a problem that has been solved in ember, so if you want to do it you will need to solve it yourself. I doubt you will find any resources or references to show you how to do it because as far as I know it has not been done yet.
I’m sure it can be done but it’s definitely not a simple well trodden path, so you should be prepared to spend a lot of time figuring out low level stuff, and if you are new to ember you will likely find it very very difficult as you are trying to do something very non standard.