My Critique of GUI Systems – Part 2: Abstractions

GUI systems are all about the abstraction.

Both Flex and eDriven.Gui have visual GUI editors, but properties being set visually are at different abstraction level than with ACS (Atlas-Collider-Script) GUIs.

High-level management

For instance when you put the list control on stage, you don’t deal with positioning individual cells, labels etc., but instead setting higher-level properties like DataProvider, list’s total width and height (as a whole) and similar.

Now – although having the visual editor available – the fact that you can do it from code makes the system more powerful/robust/extendable/performant.

For instance, a list control is also created programmatically using the same code-based system the one would use with coding approach. However, it is adapted for using in the editor.

Sugar on top

That’s why I keep repeating myself that the visual editor should only be a sugar on top and not the core feature you are starting with when building a framework (or else, you are looking for trouble).

The GUI system could work perfectly and recursively if and only if complex controls could be built programmatically – using the same system.

Also, this is a way for 3rd party vendors for building and distributing their custom controls.

Dealing with components

With GUI systems like HTML, WinForms, Flex and Swing – putting the control on screen (visually) edits the XML tree and also the code part called “code behind”.

The XML markup is then during the compile time (Flex) – or at runtime (eDriven) – being “replaced” with “real” components (much like your browser turns the XML markup into the DOM tree holding interactive elements).

This way you are dealing with components indirectly.

About CSS and styling

This pre-processing phase – in styleable systems – allows the processing of the CSS; this process maps CSS properties to components targeted by given selectors.

My definition of CSS system is content delivery.

Much like the postal office dispatches their content (postal packages) to receiver addresses (houses), the CSS subsystem delivers content to GUI controls based on not-so-exact addresses (called selectors).

The difference is that a single selector can target multiple “addresses”.

This is then a centralized place where you could tweak GUI look and feel visually. Changing the button color in one place changes all the targeted buttons on the screen.

I always felt that the CSS abstraction gives designers more freedom and power then in the old system – where they were supposed to set everything inline in HTML.

And Unity’s ACS system totally reminds me of the old prehistoric pre-CSS HTML because there’s almost no abstraction (btw Unity prefabs are not the solution to this problem).

In part three of this post I’m writing more about styling – and why the HTML5 won the front-end battle.