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

Improve this question
5
  • 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
    CommentedMay 16, 2013 at 5:38
  • @Euphoric good point :) Beyond DOS framebuffer programs, I've never seen it done any other way though :/
    – Earlz
    CommentedMay 16, 2013 at 5:43
  • Then you can start searching or ask another question if you don't find anything.
    – Euphoric
    CommentedMay 16, 2013 at 5: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
    CommentedMay 16, 2013 at 6:22
  • 3
    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?
    – gnat
    CommentedMay 16, 2013 at 6:27

5 Answers 5

Reset to default
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
Improve this answer
5
  • 1
    is this not "raw code" though?
    – PeteH
    CommentedMay 16, 2013 at 11:39
  • 1
    @peteh not it's not raw code it's markup.
    – Pieter B
    CommentedMay 16, 2013 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
    CommentedMay 16, 2013 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
    CommentedMay 16, 2013 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
    CommentedMay 16, 2013 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.

Improve this answer
    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')
    Improve this answer
      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...

      Improve this answer
        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.

        Improve this answer

          Start asking to get answers

          Find the answer to your question by asking.

          Ask question

          Explore related questions

          See similar questions with these tags.