Other than XML, what are some examples of "coding" a GUI design?

Question

I've been trying to think outside of the box as to how desktop GUIs can be designed in code(not a graphical designer!). I've come across basically three ways this is done:

1. XML
2. Raw code (create a window, create a text box, add text box to window, etc)
3. HTML and friends

I'm sure that someone has done something other than these three though. Are there any existing examples of frameworks or languages which allow you to code a GUI using a format other than these three

• Euphoric: I think it boils down to the fact, that most GUI frameworks are using OOP. So in the end, the "design" of code is ultimately creation of object graph and setting appropriate properties, binding and event handlers. So if you want to think outside the boxy, you should thing of way of doing GUI other than OOP.
• Earlz: @Euphoric good point :) Beyond DOS framebuffer programs, I've never seen it done any other way though :/
• Euphoric: Then you can start searching or ask another question if you don't find anything.
• Doc Brown: Actually, this is a "list" question - there cannot be a "best" answer. Are those kind of question not off-topic here?
• gnat: in the context of this question, why do you differentiate markup languages (separate bullets for XML and HTML)? would you consider any other markup language (eg YAML) a valid answer?

Answer 1

Maybe Delphi .dfm files can serve as an example:

inherited DialoogConfigExchange: TDialoogConfigExchange
 ActiveControl = EditHost
 Caption = 'Exchange (Agenda)'
 ClientHeight = 198
 ClientWidth = 600
 ExplicitWidth = 616
 ExplicitHeight = 236
 PixelsPerInch = 96
 TextHeight = 16
 inherited PanelButtons: TcxGroupBox
 Top = 163
 ExplicitTop = 163
 ExplicitWidth = 600
 Width = 600
 inherited ButtonCancel: TcxButton [0]
 Left = 490
 ExplicitLeft = 490
 end
 inherited ButtonOK: TcxButton [1]
 Left = 380
 Caption = '&Opslaan'
 OnClick = ButtonOKClick
 ExplicitLeft = 380
 end
 end
 object Panel1: TcxGroupBox [1]
 Left = 0
 Top = 0
 Align = alClient
 PanelStyle.Active = True
 PanelStyle.OfficeBackgroundKind = pobkGradient
 Style.BorderStyle = ebsNone
 TabOrder = 1
 Height = 163
 Width = 600
 object LabelHost: TcxLabel
 Left = 10
 Top = 10
 AutoSize = False
 Caption = 'Exchange Web Services URL:'
 Properties.Alignment.Vert = taVCenter
 Transparent = True
 Height = 24
 Width = 200
 AnchorY = 22
 end
 object LabelGebruiker: TcxLabel
 Left = 10
 Top = 38
 AutoSize = False
 Caption = 'Exchange server gebruiker:'
 Properties.Alignment.Vert = taVCenter
 Transparent = True
 Height = 24
 Width = 200
 AnchorY = 50
 end
 object LabelWachtwoord: TcxLabel
 Left = 10
 Top = 66
 AutoSize = False
 Caption = 'Exchange server wachtwoord:'
 Properties.Alignment.Vert = taVCenter
 Transparent = True
 Height = 24
 Width = 200
 AnchorY = 78
 end
 object EditHost: TcxTextEdit
 Left = 217
 Top = 10
 AutoSize = False
 TabOrder = 0
 Height = 24
 Width = 345
 end
 object EditGebruiker: TcxTextEdit
 Left = 217
 Top = 38
 AutoSize = False
 TabOrder = 1
 Height = 24
 Width = 345
 end
 object EditWachtwoord: TcxTextEdit
 Left = 217
 Top = 66
 AutoSize = False
 Properties.EchoMode = eemPassword
 Properties.PasswordChar = '*'
 TabOrder = 2
 OnEnter = EditWachtwoordEnter
 OnExit = EditWachtwoordExit
 Height = 24
 Width = 345
 end
 object CheckEncrypted: TcxCheckBox
 Left = 215
 Top = 92
 Hint = 'Sla het databasewachtwoord encrypted op'
 AutoSize = False
 Caption = 'Encrypted'
 TabOrder = 6
 Height = 24
 Width = 100
 end
 object ButtonTest: TcxButton
 Left = 50
 Top = 132
 Width = 100
 Height = 25
 Caption = '&Test'
 OptionsImage.ImageIndex = 167
 OptionsImage.Images = DataModuleImageLists.cxImageListSmall
 TabOrder = 7
 OnClick = ButtonTestClick
 end
 end
 inherited FormTranslator: TIvTranslator
 Left = 485
 Top = 125
 end
 inherited LookAndFeelControllerTimeTellForm: TcxLookAndFeelController
 Left = 485
 Top = 65
 end
 inherited StyleRepositoryForm: TcxStyleRepository
 Left = 485
 Top = 95
 PixelsPerInch = 96
 end
 inherited EditStyleControllerVerplicht: TcxEditStyleController
 Left = 485
 Top = 5
 PixelsPerInch = 96
 end
 inherited EditStyleControllerReadOnly: TcxEditStyleController
 Left = 485
 Top = 35
 PixelsPerInch = 96
 end
e

• PeteH: is this not "raw code" though?
• Pieter B: @peteh not it's not raw code it's markup.
• Mason Wheeler: @PeteH: This is not "raw code"; it's a declarative layout. It's not Delphi syntax, and it can be read and interpreted by any language that uses the VCL (which is currently Delphi and C++ Builder). It's also possible to put hooks into the DFM processing system to customize the output in various ways so that what you end up with is not exactly what the DFM "code" says. You can't do that with "raw code".
• PeteH: in that case the op could also consider things like classic vb, whose forms are defined in a similar way. Also the .net languages which use Winforms (although in these cases the IDE does generate raw code)
• Mason Wheeler: @PeteH: I don't think WinForms would count, because it's missing two important features of the declarative form system: it's not language independent (you can't use a form created in VB.NET in a C# project without jumping through a bunch of hoops) and there's no interpretation layer to put customization hooks into.

Answer 2

What you listed can be grouped by programming language paradigm:

1. Declarative: X(A)ML, (X)HTML.
2. Imperative: "raw code".

If you really want to think outside of the box, then you need to check other paradigms. Seeing how fashionable functional paradigm has become, it might be worth thinking around that area, some inspiration: http://www.chris-granger.com/2013/01/24/the-ide-as-data/

It could also be worth looking through modern JS frameworks. For example D3 has an interesting approach.

Answer 3

Treethon comes to my mind in Python.

It describes GUI in YAML format.

# example base2.triton
_import : gtk
view : gtk.Window(gtk.WINDOW_TOPLEVEL)
add :
 - view : gtk.Label('Hello World')

Answer 4

Though the internals are XML-based, Apple's Interface Builder offers a graphical interface for coding GUIs.

application for Apple's Mac OS X operating system. It is part of Xcode (formerly Project Builder), the Apple Developer Connection developer's toolset. Interface Builder allows Cocoa and Carbon developers to create interfaces for applications using a graphical user interface. The resulting interface is stored as a .nib file, short for NeXT Interface Builder, or more recently, as a .xib file...

Answer 5

Enyo is essentially a GUI layer designed to be implemented in pure javaScript, as opposed to HTML. For that matter, you can think of jQuery UI in a similar fashion.

Even if you use a WYSIWYG designer, the GUI will be spelled out in some code format. Depending on what toolkit you use, it may be easy to write that format by hand, or it may be annoyingly difficult.