Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

GUI Design and Implementation by sparkunder22

VIEWS: 173 PAGES: 5

									cs205: engineering software
university of virginia                                                     fall 2006
                                                                                                                   Early Interfaces




 GUI Design and                              Schedule design                                            IBM 705
 Implementation                              meetings this week
                                                                                                                                     Univac 1956
cs205: engineering software                                                            1   cs205: engineering software                                         2




                              Sketchpad                                                                            Birth of the GUI
                                                                                           “We see the quickest gains
                                                                                           emerging from (1) giving the
  • Ivan Sutherland,                                                                       human the minute-by-minute
    1963 (PhD thesis                                                                       services of a digital computer
                                                                                           equipped with computer-driven
    supervised by                                                                          cathode-ray-tube display, and (2)
    Claude Shannon)                                                                        developing the new methods of
                                                                                           thinking and working that allow
  • Interactive                                                                            the human to capitalize upon
    drawing program                                                                        the computer’s help. By this same
                                                                                           strategy, we recommend that an
  • Light pen                                                                              initial research effort develop a        Medal of Technology 2000
                                                                                           prototype system of this sort aimed
                              http://www.cl.cam.ac.uk/TechReports/UCAM-CL-TR-574.pdf       at increasing human effectiveness in   Douglas Engelbart,
                                                                                           the task of computer                   Augmenting Human Intellect
                                                                                           programming.”                          (1962)

cs205: engineering software                                                            3   cs205: engineering software                                         4




                 Computer as “Clerk”                                                                Engelbart’s Demo (1968)
    In such a future working relationship between human                                        • First Mouse
    problem-solver and computer 'clerk,’ the capability of the
    computer for executing mathematical processes would be                                     • Papers and folders
    used whenever it was needed. However, the computer has
    many other capabilities for manipulating and displaying                                    • Videoconferencing
    information that can be of significant benefit to the human in
    nonmathematical processes of planning, organizing, studying,                               • Email
    etc. Every person who does his thinking with symbolized
    concepts (whether in the form of the English language,                                     • Hypertext
    pictographs, formal logic, or mathematics) should be able to
    benefit significantly.                                                                     • Collaborative editing
                                              Douglas Engelbart,
                                              Augmenting Human Intellect                     http://sloan.stanford.edu/MouseSite/1968Demo.html
                                              (1962)


cs205: engineering software                                                            5   cs205: engineering software                                         6
                                           Xerox Alto                                                               Apple Lisa




                                         Xerox PARC, 1973                                                                 1983
cs205: engineering software                                             7   cs205: engineering software                             8




                                                                                                 Any real progress
                              Lisa Interface
                                                                                                    since then?




                http://www.guidebookgallery.org/screenshots/lisaos10                                             OS X Leopard, 2006
cs205: engineering software                                             9   cs205: engineering software                            10




                         Designing GUIs                                                                   Building GUIs
    • Requires lots of skill                                                    • Like all Programming
                                                                                     – Encapsulation, Abstraction, Specification
    • Psychology, Cognitive Science
                                                                                     – Testing: especially hard
    • User studies
                                                                                • Unique-ish Aspects
    • Good taste
                                                                                     – Event-Driven (network programming also
                                                                                       like this)
                              Read Donald Norman’s and                               – Multi-Threaded (network, others)
                              Ed Tufte’s books                                       – Huge APIs


cs205: engineering software                                            11   cs205: engineering software                            12
              Model-View-Controller                                                                        Java GUI Toolkits
      • Model: domain data and logic
      • View: presents model
      • Controller: receives input and alters
        model
            Goal: abstraction
                separate display from model                                                                AWT                Swing
                separate control interface                                                  Abstract Window Toolkit       (added JDK 1.2)
                                                                                                Looks like Java        real reason for Swing
      Invented at PARC in 1970s (Smalltalk)                                                                            coming later...

cs205: engineering software                                                      13   cs205: engineering software                              14




                                 Frames                                                                      JFrame Methods
        java.lang.Object                      Main windows are JFrame objects             // inherited from java.awt.Window
                                                                                          public void pack()
   java.awt.Component                                                                        MODIFIES: this
                                                                                             EFFECTS: Causes this Window to be sized to fit the
      java.awt.Container                                                                     preferred size and layouts of its subcomponents.
                                             JFrame frame =
       java.awt.Window                         new JFrame("Swing GUI");                   // inherited from java.awt.Component
                                                                                          public void setVisible(boolean b)
                                                                  Window Title
         java.awt.Frame                                                                       MODIFIES: this, display
                                                                                              EFFECTS: If b, shows this. Otherwise,
      javax.swing.JFrame                                                                        hides this.

cs205: engineering software                                                      15   cs205: engineering software                              16




                     Swing Application                                                                    Adding to a Frame
  import javax.swing.*;
                                                                                         public java.awt.Container getContentPane()
  public class Main {
   private static void showGUI() {                                                         EFFECTS: Returns the contentPane
       //Create and set up the window.
       JFrame frame = new JFrame("Swing GUI");                                               object for this.
       frame.pack();
       frame.setVisible(true);
    }
                                                                                         in java.awt.Containter:
      public static void main(String args[]) {
        javax.swing.SwingUtilities.invokeLater(new Runnable() {                          public Component add(Component c)
            public void run() { showGUI(); }
        });
                                                                                            MODIFIES: this
  }
      }                                                                                     EFFECTS: Appends c to the end of this
        Based on Sun’s Swing tutorials:                                                       container.
        http://java.sun.com/docs/books/tutorial/uiswing/learn/example1.html

cs205: engineering software                                                      17   cs205: engineering software                              18
                   What can you add?                                                      GUIs and Subtyping
                                                                            In the process of making the Sketchpad system operate, a few very
       public Component add(Component c)                                    general functions were developed which make no reference at all to the
                                                                            specific types of entities on which they operate. These general functions
                              Component                                     give the Sketchpad system the ability to operate on a wide range of
                                                                            problems. The motivation for making the functions as general as
                                                                            possible came from the desire to get as much result as possible from the
                                                                            programming effort involved. For example, the general function for
              Container                    JComponent                       expanding instances makes it possible for Sketchpad to handle any fixed
                                                                            geometry subpicture. The rewards that come from implementing general
                                                                            functions are so great that the author has become reluctant to write any
         Window                    JLabel                                   programs for specific jobs.
                                                   AbstractButton             Each of the general functions implemented in the Sketchpad system
                                                                            abstracts, in some sense, some common property of pictures
       Frame                              JPanel
                                                                            independent of the specific subject matter of the pictures themselves.
                                                       JButton                               Ivan Sutherland, Sketchpad: a Man-Machine
                                                                                             Graphical Communication System, 1963 (major
   JFrame                 ...and hundreds (?) more subtypes in API                           influence on Alan Kay inventing OOP in 1970s)

cs205: engineering software                                         19   cs205: engineering software                                               20




                                                                                            What can you add?
                                                                                public Component add(Component c)
Components
     in                                                                                                Component

 Sketchpad                                                                             Container               JComponent

                                                                                  Window                  JLabel          AbstractButton
                                                                               Frame                          JPanel              JButton
                                                                            JFrame                 ...and hundreds (?) more subtypes in API

cs205: engineering software                                         21   cs205: engineering software                                               22




                 Adding Components                                                                       Layout
  import javax.swing.*;
                                                                                    // in Container:
  public class Main {                                                               public void setLayout(LayoutManager mgr)
   private static void showGUI() {
       //Create and set up the window.                                                 MODIFIES: this
       JFrame frame = new JFrame("Swing GUI");                                         EFFECTS: sets the layout manager to mgr
      java.awt.Container content = frame.getContentPane();
      content.add(new JLabel ("Yo!"));                                                   for this container.
      content.add(new JButton ("Click Me"));
       frame.pack();
       frame.setVisible(true);
    }

      public static void main(String args[]) {     What happened
        ...
      }
                                                   to “Yo!”?
  }

cs205: engineering software                                         23   cs205: engineering software                                               24
  LayoutManager Implementations                                                                     Adding Components
                              LayoutManager (interface)                              import javax.swing.*;
                                                                                     import java.awt.*;

                                                                                     public class Main {
     FlowLayout                BoxLayout         BorderLayout                         private static void showGUI() {
                                                                                          //Create and set up the window.
                                                                                          JFrame frame = new JFrame("Swing GUI");
                                                                                         java.awt.Container content = frame.getContentPane();
                                                                                          content.setLayout(new FlowLayout());
                                                                                          content.add(new JLabel ("Yo!"));
                                                                                          content.add(new JButton ("Click Me"));
                                                                                          frame.pack();
                                                                                          frame.setVisible(true);
                                 ...about 30 more in API!                              }

  http://java.sun.com/docs/books/tutorial/uiswing/layout/visual.html


cs205: engineering software                                                   25   cs205: engineering software                                  26




             Don’t try this at home?                                                                  Charge
                                                                                      • GUI APIs are subtyping and
  import javax.swing.*;
  import java.awt.*;                                                                    inheritance paradises,
                                                                                        concurrency morasses
  public class Main {
   private static void showGUI() {                                                    • GUI APIs are huge and
       //Create and set up the window.
       JFrame frame = new JFrame("Swing GUI");                                          complex
       java.awt.Container content = frame.getContentPane();                                – Java’s is especially complex
       content.setLayout(new FlowLayout());
       content.add(frame);                                                                   because of AWT + Swing,
       frame.pack();                                                                         and portability
       frame.setVisible(true);
    }
                                                                                    Creating a simpler GUI requires
    Exception in thread "AWT-EventQueue-0"
    java.lang.IllegalArgumentException: adding container's parent to itself
                                                                                    more complex programming

cs205: engineering software                                                   27   cs205: engineering software                                  28

								
To top