What this class is

Developing user interfaces - what is a user interface?

This class covers 2D desktop systems, not voice, tactile, olfactory, etc.  We will discuss basic concepts about styles and architectures of building interfaces and compare/contrast specific systems (Java and C#)

Class philosophy

• Learn by doing
• Write large programs
• Have fun - make cool things

Who is in this class?
Why are you here?
What is your UI programming experience?

Introduction

The predominant current paradigm of interfaces is that of GUIs consisting of pages of layouts of interactive widgets.  This is a reasonable model that covers much of the world of interfaces today, but not everything: think of simpler systems such as text-based ones, more graphical applications such as games or visualizations, and of course input other than a mouse, such as a 6 degree-of-freedom "spaceball".

Interactive cycle

• Model of underlying data
• Set of operations that can be applied to data
• Widgets that user can use to manipulate data
• Widgets must be presented to user
• System must listen for user's input events
• The display must be updated when the model changes
• There must be mechanisms to navigate through the sets of widgets

This entire cycle is captured through the "model-view-controller" (MVC) paradigm.

Examples: Scrollbar, menu

Hello World in Java

/*
 * A simple Java program that displays some text.
 * Compile with: "javac HelloWorldText.java"
 * Run with: "java HelloWorldText"
 *
 * Ben Bederson, January 16, 2002
 */
public class HelloWorldText {
    public static void main(String[] args) {
	System.out.println("Hello world!");
    }
}

Java - Text version: HelloWorldText.java

/*
 * A simple Java program that displays some text in a window.
 * Compile with: "javac HelloWorldGUI.java"
 * Run with: "java HelloWorldGUI"
 *
 * Ben Bederson, January 16, 2002
 */
import java.awt.*;
import javax.swing.*;

public class HelloWorldGUI extends JFrame {
    public HelloWorldGUI() {
				// Create a window
	setTitle("Hello world!");
	setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

				// Create a "label" component
	JLabel label = new JLabel("Hello world!");
	label.setForeground(Color.blue);
	label.setFont(new Font("Arial", Font.BOLD, 24));
		
				// Insert the label into the window
	getContentPane().add(label);
	getContentPane().setBackground(Color.white);
	pack();           // Calculate the size of the window
	setVisible(true); // Make the window visible
    }

    public static void main(String[] args) {
	new HelloWorldGUI();
    }
}

Java - GUI version: HelloWorldGUI.java

/*
 * A simple program that displays some text in a browser.
 * Compile with: "javac HelloWorldApplet.java"
 * Run with: "appletviewer HelloWorldApplet"
 *
 * Ben Bederson, January 16, 2002
 */
import java.awt.*;
import javax.swing.*;

public class HelloWorldApplet extends JApplet {
    public HelloWorldApplet() {
				// Create a "label" component
	JLabel label = new JLabel("Hello world!");
	label.setForeground(Color.blue);
	label.setFont(new Font("Arial", Font.BOLD, 24));
		
				// Insert the label into the window
	getContentPane().add(label);
	getContentPane().setBackground(Color.yellow);
    }

    public static void main(String[] args) {
	new HelloWorldApplet();
    }
}

Java - Applet version: HelloWorldApplet.java

Java Applet

Hello World in C#

/*
 * A simple program that displays some text.
 * Compile with: "csc hello-world-text.cs"
 * Run with: "hello-world-text"
 *
 * Ben Bederson, January 16, 2002
 */
using System;

public class HelloWorldText {
    public static void Main() {
	Console.WriteLine("Hello world!");
    }
}

C# - Text version: hello-world-text.cs

/*
 * A simple C# program that displays some text in a window.
 * Compile with: "csc hello-world-gui.cs"
 * Run with: "hello-world-gui"
 *
 * Ben Bederson, January 16, 2002
 */
using System;
using System.Drawing;
using System.Windows.Forms;

public class HelloWorldGUI : System.Windows.Forms.Form {
    public HelloWorldGUI() {
	Text = "Hello world!";
	BackColor = Color.White;

				// Create a "label" component
	Label label = new Label();
	label.Text = "Hello world!";
	label.ForeColor = Color.Blue;
	label.Font = new Font("Arial", 24, FontStyle.Bold);
	label.AutoSize = true;
		
				// Insert the label into the window
	Controls.Add(label);
    }

    public static void Main() {
	Application.Run(new HelloWorldGUI());
    }
}

C# - GUI version: hello-world-gui.cs

/*
 * A simple C# program that displays some text in a webpage.
 * Compile with: "csc /t:library hello-world-applet.cs"
 * Run byte deploying in a webpage with:
 * <object classid="http:hello-world-applet.dll#HelloWorldApplet" 
 *         width="200" height="100"></object>
 *
 * Ben Bederson, January 16, 2002
 */
using System;
using System.Drawing;
using System.Windows.Forms;

public class HelloWorldApplet : System.Windows.Forms.Control {
    public HelloWorldApplet() {
				// Create a "label" control
	Label label = new Label();
	label.Text = "Hello world!";
	label.ForeColor = Color.Blue;
	label.Font = new Font("Arial", 24, FontStyle.Bold);
	label.AutoSize = true;
		
				// Insert the label
	Controls.Add(label);
    }
}

C# - "Applet" version - hello-world-applet.cs

C# Visual Studio.NET Project (hello-world-gui.zip) - created with form designer

C# "applet"