web-dev-qa-db-ja.com

XML以外に、GUIデザインを「コーディング」する例は何ですか？

私は、デスクトップGUIをコードでどのように設計できるか（グラフィカルデザイナーではありません！）について、既成概念にとらわれずに考えようとしてきました。私はこれが行われる基本的に3つの方法に出くわしました：

  1. XML
  2. 生のコード（ウィンドウの作成、テキストボックスの作成、ウィンドウへのテキストボックスの追加など）
  3. HTMLと友達

しかし、誰かがこれら3つ以外のことをしたと確信しています。これら3つ以外の形式を使用してGUIをコーディングできるフレームワークまたは言語の既存の例はありますか？

language-agnosticguixmlgui-design
2
Earlz

たぶん、Delphi.dfmファイルは例として役立つことができます：

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
4
Jan Doggen

あなたがリストしたものは、プログラミング言語パラダイムによってグループ化することができます：

  1. 宣言型：X（A）ML、（X）HTML。
  2. 命令型：「生のコード」。

箱の外で本当に考えたいのであれば、他のパラダイムをチェックする必要があります。ファッショナブルな関数型パラダイムがどのようになったかを見て、その領域について考える価値があるかもしれません、いくつかのインスピレーション： http://www.chris-granger.com/2013/01/24/the-ide-as-data/

また、最新のJSフレームワークを調べる価値もあります。たとえば、D3には興味深いアプローチがあります。

2
Den

Treethon Pythonで頭に浮かぶ。

GUIをYAML形式で記述します。

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

内部はXMLベースですが、Appleの Interface Builder は、GUIをコーディングするためのグラフィカルインターフェイスを提供します。

appleのMacOSXオペレーティングシステム用のアプリケーション。これはXcode（以前のProject Builder）の一部であり、Apple Developer Connection開発者のツールセットです。InterfaceBuilderを使用すると、CocoaおよびCarbon開発者はグラフィカルユーザーインターフェイスを使用してアプリケーションのインターフェイスを作成できます。結果のインターフェイスは保存されます。nibファイル、NeXT Interface Builderの略、または最近では。xibファイル..

0
mouviciel

Enyo は本質的に、HTMLではなく純粋なjavaScriptで実装されるように設計されたGUIレイヤーです。さらに言えば、jQueryUIも同様に考えることができます。

WYSIWYGデザイナーを使用している場合でも、GUIはいくつかのコード形式で綴られます。使用するツールキットによっては、その形式を手で書くのが簡単な場合もあれば、煩わしいほど難しい場合もあります。

0
DougM