GUI Syn - GUI Synthetiser

What is GUISyn ?

GUISyn is an attempt at decoupling the application logic from the user interface. Ideally, it should be possible to build a front-end and a back-end application, where the front-end remains exactly the same from project to project and only the back-end changes.

The back-end builds a representation of the GUI with abstract widgets; it attaches variables and scripts to them. This representation is then transformed into a serialised data stream, which is sent to the front-end.

The front-end deserialises the stream and generates the GUI with real widgets, handling most of the layout by itself. All the interaction is handled by the front-end. When the user modifies a value (clicks on a button, edits a field, etc.), the corresponding variable gets updated.

If a variable with an associated script is modified, the front-end generates a special script event which is serialised and sent to the back-end; the event includes the state of all the variables. The back-end can then process the data and do whatever is needed...

Why GUISyn ?

I had several goals in mind when designing GUISyn :

Widget definition

A widget is defined by following elements :

Textual description

The GUI can be described using a simple text source. Here is an example of such a GUISyn dialog description :

WINDOW 'Réglages (démo)', dynamic_window, col, var={window-mode,}
  BOX 'Réglages de la fenêtre', window_settings, stretch={1,1}, layout=row, margin={5,5,5,5}
    DIV stretch={1,1}, layout=col, margin={5,5,5,5}
      SWITCH 'Ascenseur horizontal', var={mode,scroll-h}
      SWITCH 'Ascenseur vertical', var={mode,scroll-v}
    DIV stretch={1,1}, layout=col, margin={5,5,5,5}
      DIV stretch={1,0}, layout=row
        LINE stretch={5,0}, var={line_1}
        LINE stretch={2,0}, var={line_2}
  DIV layout=row, stretch={1,0}, margin={0,0,5,5}
    BUTTON ' OK ', size={0,24}, layout=eq_size, var={!action,OK}, margin={5,5}
    BUTTON ' Annule ', size={0,24}, layout=eq_size, var={!action,CANCEL}, margin={5,5}
    DIV stretch={1,1}
    BUTTON ' Applique ', size={0,24}, layout=eq_size, var={!action,APPLY}, margin={5,5}

And here is the result :

The parser produces even useful error messages, such as :

19:     BUTTON (  Apply  ), size={0,24}, var={!action,APPLY, layout=eq_size
                                                           ^ expected '}' mark


The parser fits into 800 lines of C++ code, relying on templates and other nice stuff; it took about 4 hours to write, test and debug.