GUI programming with CSS

Question

Hello! I am going to write a simple layout system for a game GUI. I thought about the various layout systems used in GUI, such as absolute positioning, Java’s layout managers, springs and struts and the like. In the end I found out that I prefer the layout as viewed by CSS – padding, margin, floats, blocks, inlines, etc. Have you ever seen an application GUI done like this? Not a web application, but a “real” application where the CSS layout system must have been written from scratch. Do you think it possible to get a working and expressive CSS-like layout system, even if very simple, with a decent amount of code?

---

Update: I do not want to create the GUI from an external stylesheet. I would be happy with a runtime interface, ie. something like this:

Widget *container = [Container withWidth:100 height:100];
Widget *button1 = [Button withText:@"Foo"];
Widget *button2 = [Button withText:@"Bar"];
button1.floating = button2.floating = YES;
[container addObjects: button1, button2, nil];

Should have said that earlier, sorry.

Answer 1

I'm not sure if this would really be the best way to do it but I don't see any problems that would stop you from doing it. You would need a CSS Parser of some kind to actually create the GUI from the stylesheet but I guess thats doable. There already are a bunch of CSS Parsers out there which you would probably just have to costumize a little as to fit your specific needs for the GUI.

Answer 2

No, I have never seen an application be designed around CSS's naming scheme.

Yes, I think it is entirely possible to create such a system, programmers are able to programmatically move buttons and other fields around. Generally using the default functions and parameters that exist for the widgets, if you were to use those widgets and just derived from them you would be able to accomplish what you wanted.

I am unsure as to why you would like to do this, but the answer is yes it is possible!

Answer 3

I've done this in the past, and it's really only doable if you don't implement the CSS spec to the letter and just implement the stuff that you need. What I ended up doing was implementing a CSS parser, the selector statements and the cascading rules. The properties and the layout model were completely different because that simply wasn't needed at that time. I'd say that that also would've been where the bulk of the work of writing a full CSS engine would've been.

What I've done instead was create something that mimics the way HTML tables work because they are conceptually easy to work with and because the application itself was impartial to the whole "semantic web" discussion.

I couldn't find a lot of helpful resources on this, except for the CSS spec itself, because it contains the flex and bison syntax rules already.

---

Edit: in that case, you might want to look at how WebKit and Mozilla have implemented their layout engines as a reference.