2

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

Earlz
  • 22,658
  • 7
  • 46
  • 60
  • 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. – Euphoric May 16 '13 at 05:38
  • @Euphoric good point :) Beyond DOS framebuffer programs, I've never seen it done any other way though :/ – Earlz May 16 '13 at 05:43
  • Then you can start searching or ask another question if you don't find anything. – Euphoric May 16 '13 at 05:45
  • 3
    Actually, this is a "list" question - there cannot be a "best" answer. Are those kind of question not off-topic here? – Doc Brown May 16 '13 at 06:22
  • 3
    in the context of this question, why do you differentiate [markup languages](http://en.wikipedia.org/wiki/Markup_language) (separate bullets for XML and HTML)? would you consider any other markup language (eg YAML) a valid answer? – gnat May 16 '13 at 06:27

5 Answers5

4

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
Jan Doggen
  • 1,140
  • 4
  • 16
  • 22
  • 1
    is this not "raw code" though? – PeteH May 16 '13 at 11:39
  • 1
    @peteh not it's not raw code it's markup. – Pieter B May 16 '13 at 12:29
  • @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". – Mason Wheeler May 16 '13 at 12:32
  • 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) – PeteH May 16 '13 at 12:36
  • @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. – Mason Wheeler May 16 '13 at 12:46
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.

Den
  • 4,827
  • 2
  • 32
  • 48
0

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')
TtT23
  • 1,553
  • 4
  • 20
  • 28
0

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...

gnat
  • 21,442
  • 29
  • 112
  • 288
mouviciel
  • 15,473
  • 1
  • 37
  • 64
0

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.

DougM
  • 6,361
  • 1
  • 17
  • 34