EDIT: Due to my inability to read the thread properly I've overlooked that a MVC (which is very similar to the proposed MVVM) is already a planned feature, which makes this post kind of obsolete. It can still be seen as an example how such a pattern could be realized.
Hey everyone,
this is quite an interesting topic and project. I've been working on a similar layout engine based on xaml but the project didn't seem to go anywhere.
It's really nice to see people thinking about easier ways to create guis. LoveFrames is a great feature-rich library but creating guis with it is not a pleasant experience I have to say. You have to write tons of verbose code and callbacks.
I think a dom-tree is a first step in the right direction, as it takes care of the whole structure of your gui and can calculate positions automatically.
But what about data?
One of the most annoying parts of gui coding is to keep you internal data and it's gui representation in sync.
Example:
Let's say you have a gui-element 'A' which is a checkbox. If 'A' is checked Element 'B' is visible. If 'A' is not checked Element 'B' is invisible. Normally you would have a callback when "A" is checked. In the callback you would look if 'A' is checked or not and set 'B''s visiblilty accordingly. Easy enough. But what happens when you want to hide 'B' from code? You have to set 'B's visibility and set the checked state of 'A' to 'unchecked'. Still not that hard you think, but what happens if 'A' also controls the visibility of 'C', 'D' and 'E' unchecking 'A' would mean hiding them all and hiding 'A' from code could imply you want to hide 'C','D' and 'E' as well.
An easier example would be the title of a document, that the user can change in a textbox and that is also displayed in the headbar. Changing the text in the textbox would imply that the text in the headbar also changes.
All this can be done with data binding often used in connection with a Model-View-ViewModel (MVVM) pattern.
Consider this (totally made up) xml markup. Which woud be called a "view"
Code: Select all
<checkbox id="Z" checked="binding={windowsVisible}"/>
<window id="A" visible="binding={windowsVisible}">foo</window>
<window id="B" visible="binding={windowsVisible}">foo</window>
In your gui control code (which would be called a "viewModel") you would have something like
Code: Select all
windowsVisible = true
function hideWindows()
windowsVisible = false
end
So a single variable represents 3 properties: the checked state of 'Z', and the visible state of 'A' and 'B'.
Please note, thate normally 'windowsVisible' would not be a bool but an observable object, that can recieve events from the view such as when the checkbox is clicked.
Another advantadge comes from the Model part of this pattern. Normally you want your gui to represent objects or data that you have in you game/application state, but you don't want any gui code in your state.E.g. say you want to create a level editor. You might want to manipulate and inspect the level data from your gui but you don't want any gui code in your level once you load it in the game. So the level would be the model, the editors-gui would be the view and the viewmodel would help you to both connect them together and keep them separated.
I would love to see such a pattern incorporated in a gui library and strongly suggest in doing so.
For examples take a look at Microsofts XAML applications (such as WPF, Silverlight or Windows 8.1 Apps) if you're into Microsoft or have a look at the brilliant MVVM framework KnockoutJS (
http://knockoutjs.com/) which has also quite nice interactive examples.