Oltre all'XML, quali sono alcuni esempi di "codifica" di una progettazione GUI?

2

Ho cercato di pensare fuori dagli schemi per capire come le GUI desktop possono essere progettate in codice (non un designer grafico!). Mi sono imbattuto sostanzialmente in tre modi in cui questo è fatto:

  1. XML
  2. Codice non elaborato (creare una finestra, creare una casella di testo, aggiungere una casella di testo alla finestra, ecc.)
  3. HTML e amici

Sono sicuro che qualcuno abbia fatto qualcosa di diverso da questi tre però. Esistono esempi esistenti di framework o linguaggi che consentono di codificare una GUI utilizzando un formato diverso da questi tre

    
posta Earlz 16.05.2013 - 06:48
fonte

5 risposte

4

Forse i file .dfm di Delphi possono servire come esempio:

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
    
risposta data 16.05.2013 - 09:13
fonte
2

Quello che hai elencato può essere raggruppato in base al paradigma del linguaggio di programmazione:

  1. Dichiarativo: X (A) ML, (X) HTML.
  2. Imperativo: "codice raw".

Se vuoi davvero pensare fuori dagli schemi, devi controllare altri paradigmi. Vedendo come è diventato il paradigma funzionale alla moda, potrebbe valere la pena di riflettere su quell'area, qualche ispirazione: link

Potrebbe anche valere la pena guardare attraverso i moderni framework JS. Ad esempio D3 ha un approccio interessante.

    
risposta data 16.05.2013 - 14:28
fonte
0

Treethon mi viene in mente in Python.

Descrive la GUI nel formato YAML.

# example base2.triton
_import     : gtk
view        : gtk.Window(gtk.WINDOW_TOPLEVEL)
add         :
    - view      : gtk.Label('Hello World')
    
risposta data 16.05.2013 - 06:59
fonte
0

Sebbene gli interni siano basati su XML, il Interface Builder di Apple offre un'interfaccia grafica per la codifica delle GUI.

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

    
risposta data 16.05.2013 - 14:42
fonte
0

Enyo è essenzialmente un livello GUI progettato per essere implementato in puro javaScript, al contrario di HTML. Del resto, puoi pensare all'interfaccia utente di jQuery in modo simile.

Anche se si utilizza un designer WYSIWYG, la GUI verrà specificata in un formato di codice. A seconda del kit di strumenti che usi, potrebbe essere facile scrivere quel formato a mano, o potrebbe essere fastidiosamente difficile.

    
risposta data 16.05.2013 - 15:55
fonte

Leggi altre domande sui tag