GUI: evolution of descriptions

| category: My notes | author: st
Tags:

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