From Xerox to Apple's Lisa: Affordable & Reliable GUI Development, Lecture notes of Object Oriented Programming

Insights into the early development of graphical user interfaces (guis) through the story of steve jobs' quest for an affordable and reliable mouse for apple's lisa computer. The challenges faced in designing a low-cost mouse, the importance of guis, and the evolution of java's awt and swing packages for creating guis.

Typology: Lecture notes

2012/2013

Uploaded on 08/20/2013

yumni
yumni 🇮🇳

5

(2)

25 documents

1 / 13

Toggle sidebar

This page cannot be seen from the preview

Don't miss anything!

bg1
GUIS: Graphical User Interfaces
Their mouse had a mean time between failure of … a week … it would jam
up irreparably, or ... jam up on the table-- ... It had a flimsy cord whose
wires would break. Steve Jobs: "... Xerox says it can't be built for < $400, I
want a $10 mouse that will never fail and can be mass produced, because
it's going to be the primary interface of the computer ..."
... Dean Hovey ... came back, "I've got some good and some bad news.
Good news: we've got a new project with Apple. Bad news: I told Steve
we'd design a mouse for 10 bucks."
... year later ... we … filed … and were granted a patent, on the electro-
mechanical-optical mouse of today; ... we ended up ... [making] the mouse
as invisible to people as it is today.
Steve Sachs interview on first computer with GUI: Apple Lisa (~$10K in
1982).
http://library.stanford.edu/mac/primary/interviews/sachs/trans.html
docsity.com
pf3
pf4
pf5
pf8
pf9
pfa
pfd

Partial preview of the text

Download From Xerox to Apple's Lisa: Affordable & Reliable GUI Development and more Lecture notes Object Oriented Programming in PDF only on Docsity!

GUIS: Graphical User Interfaces Their mouse had a mean time between failure of … a week … it would jam up irreparably, or ... jam up on the table-- ... It had a flimsy cord whose wires would break. Steve Jobs: "... Xerox says it can't be built for < $400, I want a $10 mouse that will never fail and can be mass produced, because it's going to be the primary interface of the computer ..." ... Dean Hovey ... came back, "I've got some good and some bad news. Good news: we've got a new project with Apple. Bad news: I told Steve we'd design a mouse for 10 bucks." ... year later ... we … filed … and were granted a patent, on the electro- mechanical-optical mouse of today; ... we ended up ... [making] the mouse as invisible to people as it is today. Steve Sachs interview on first computer with GUI: Apple Lisa (~$10K in 1982). http://library.stanford.edu/mac/primary/interviews/sachs/trans.html

GUI (Graphical User Interface)

  • Provides a friendly interface between user and program
  • Allows event-driven or reactive programming: The program reacts to events such as button clicks, mouse movement, keyboard input
  • Often is multi-threaded: Different threads of execution can be going on simultaneously We use Java’s two packages for doing GUIs:
  • AWT (Abstract or Awful Window Toolkit) —first one
  • Swing —a newer one, which builds on AWT as much as possible Two aspects to making a GUI:
  1. Placing components (buttons, text, etc.) in it. TODAY
  2. Listening/responding to events Next Lecture

Placing components in a JFrame

public class C extends JFrame { public C() { Container cp= getContentPane(); JButton jb= new JButton(“Click here”); JLabel jl= new JLabel( “label 2”); cp.add(jb, BorderLayout.EAST); cp.add(jl, BorderLayout.WEST); pack(); setVisible( true ); } Layout manager : Instance controls placement of components. JFrame layout manager default : BorderLayout. BorderLayout layout manager: Can place 5 components: JFrameDemo.ja va

South

West Center East

North

Putting components in a JFrame import java.awt.; import javax.swing.; /** Demonstrate placement of components in a JFrame. Places five components in the five possible areas: (1) a JButton in the east, (2) a JLabel in the west, (3) a JLabel in the south, (4) a JTextField in the north, and (5) a JTextArea in the center. / public class ComponentExample extends JFrame { /* Constructor: a window with title t and 5 components */ public ComponentExample(String t) { super (t); Container cp= getContentPane(); cp.add( new JButton("click me"), BorderLayout.EAST); cp.add( new JTextField("type here", 22), BorderLayout.NORTH); cp.add( new JCheckBox("I got up today"), BorderLayout.SOUTH); cp.add( new JLabel("label 2"), BorderLayout.WEST); cp.add( new JTextArea("type\nhere", 4, 10), BorderLayout.CENTER); pack(); } ComponentExample.java Add components to its contentPane

Basic Components Component Button, Canvas Checkbox, Choice Label, List, Scrollbar TextComponent TextField, TextArea Container JComponent AbstractButton JButton JToggleButton JCheckBox RadioButton JLabel, JList JOptionPane, JPanel JPopupMenu, JScrollBar, JSlider JTextComponent JTextField, JTextArea Component : Something that can be placed in a GUI window. These are the basic ones used in GUIs Note the use of subclasses to provide structure and efficiency. For example, there are two kinds of JToggleButtons, so that class has two subclasses.

Components that can contain other components Component Box Container JComponent JPanel Panel Applet Window Frame JFrame JWindow java.awt is the old GUI package. javax.swing is the new GUI package. When they wanted to use an old name, they put J in front of it. (e.g. Frame and JFrame) When constructing javax.swing, the attempt was made to rely on the old package as much as possible. So, JFrame is a subclass of Frame. But they couldn’t do this with JPanel.

import javax.swing.; import java.awt.; /** Demo class Box. Comment on constructor says how frame is laid out. / public class BoxDemo extends JFrame { /* Constructor: frame with title "Box demo", labels in the east/west, blank label in south, horizontal Box with 4 buttons in center. */ public BoxDemo() { super ("Box demo"); Box b= new Box(BoxLayout.X_AXIS); b.add( new JButton("0")); b.add( new JButton("1")); b.add( new JButton("2")); b.add( new JButton("3")); Container cp= getContentPane(); cp.add( new JLabel("east"), BorderLayout.EAST); cp.add( new JLabel("west"), BorderLayout.WEST); cp.add( new JLabel(" "), BorderLayout.SOUTH); cp.add(b, BorderLayout.CENTER); pack(); } }

Class Box: a

container

Box layout manager default : BoxLayout. BoxLayout layout manager: Place any number of components. They appear in the order added, taking only one row.

public class BoxDemo2 extends JFrame { /** Constructor: frame with title t and 3 columns with n, n+1, and n+2 buttons. */ public BoxDemo2(String t, int n) { super (t); // Create Box b1 with n buttons. Box b1= new Box(BoxLayout.Y_AXIS); for ( int i= 0; i != n; i= i+1) b1.add( new JButton(”1 " + i)); // Create Box b2 with n+1 buttons. Box b2= … // Create Box b3 with n+2 buttons. Box b3= … // Create horizontal box b containing b1, b2, b Box b= new Box(BoxLayout.X_AXIS); b.add(b1); b.add(b2); b.add(b3); Container cp= getContentPane(); cp.add(b, BorderLayout.CENTER); pack(); show(); }

Boxes within a Box

3 vertical boxes, each a column of buttons, are placed in a horizontal box BoxLayout layout manager: Place any number of components. They appear in the order added, taking only one row.

Interested in learning more about GUIS?