GUI: evolution of descriptions

Submitted by st on

Let's see one simple example showing how the methods and the languages of graphical user interface (GUI) description are progressing (or regressing, it depends) during the last 15-20 years.

The primitive form description requires:

1996: Delphi 2

object Form1: TForm1
  Left = 0
  Top = 0
  Caption = 'Test form'
  ClientHeight = 131
  ClientWidth = 292
  Color = clBtnFace
  object Label1: TLabel
    Left = 16
    Top = 24
    Width = 257
    Height = 13
    Alignment = taCenter
    Caption = 'Hello, User !'
  end
  object Button1: TButton
    Left = 112
    Top = 72
    Width = 75
    Height = 25
    Caption = 'Push me'
    TabOrder = 0
  end
end

2003: WinForms VS.NET 2003

    partial class Form1
    {
        ...
 
        private void InitializeComponent()
        {
            System.ComponentModel.ComponentResourceManager resources = 
                new System.ComponentModel.ComponentResourceManager(typeof(Form1));
            this.label1 = new System.Windows.Forms.Label();
            this.button1 = new System.Windows.Forms.Button();
            this.SuspendLayout();
            // 
            // label1
            // 
            this.label1.Location = new System.Drawing.Point(12, 34);
            this.label1.Name = "label1";
            this.label1.Size = new System.Drawing.Size(268, 23);
            this.label1.TabIndex = 0;
            this.label1.Text = "Hello, User !";
            this.label1.TextAlign = System.Drawing.ContentAlignment.MiddleCenter;
            // 
            // button1
            // 
            this.button1.Location = new System.Drawing.Point(107, 78);
            this.button1.Name = "button1";
            this.button1.Size = new System.Drawing.Size(75, 23);
            this.button1.TabIndex = 1;
            this.button1.Text = "Push me";
            this.button1.UseVisualStyleBackColor = true;
            // 
            // Form1
            // 
            this.AutoScaleDimensions = new System.Drawing.SizeF(6F, 13F);
            this.AutoScaleMode = System.Windows.Forms.AutoScaleMode.Font;
            this.ClientSize = new System.Drawing.Size(292, 131);
            this.Controls.Add(this.button1);
            this.Controls.Add(this.label1);
            this.Icon = ((System.Drawing.Icon)(resources.GetObject("$this.Icon")));
            this.Name = "Form1";
            this.Text = "Test form";
            this.ResumeLayout(false);
        }
        ...
    }

2008: WPF VS.NET 2008

<Window x:Class="WpfApplication1.Window1"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Test form" 
        Height="166" 
        Width="313" 
        OverridesDefaultStyle="False" 
        Opacity="1" 
        Background="#FFD4D0C8">
    <Grid Height="131" 
          Width="292">
        <Label Height="28" 
               Margin="12,20,12,0" 
               Name="label1" 
               VerticalAlignment="Top" 
               HorizontalContentAlignment="Center">
            Hello, User !
        </Label>
        <Button Height="24" 
                Margin="109,0,102,36" 
                Name="button1" 
                VerticalAlignment="Bottom" 
                HorizontalContentAlignment="Center">
            Push me
        </Button>
    </Grid>
</Window>

2010: Android

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"
        android:id="@+id/textView"/>
 
    <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/Push me"
            android:id="@+id/button"
            android:layout_below="@+id/textView"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="46dp"/>
 
</RelativeLayout>

"The Sleep of Reason Produces Monsters" (c) Francisco Goya