CS2

1
CS2

• Module 39
• Category Elements of Java
• Topic Intro to GUI's
• Objectives
• History
• Containers
• Components
• Layout Managers

2
CS 2

• Introduction to
• Object Oriented Programming
• Module 39
• Elements of Java
• Introduction to GUI's

3
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
4
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
5
Graphical User Interface

• A Graphical User Interface (GUI) is one variety
  of user interface. .
• User interacts with objects on the screen
  (icons, buttons, scroll-bars, etc.) via mouse
  clicks or keyboard actions.

Ok
6
GUI Popularity

• Popularized in 1980s by the Macintosh.
• Now state of the practice, and not final word in
  UI
• Intended to replace text-based "command line" and
  "function key" interfaces.
• Despite similarities, GUIs are typically
  platform-specific (Windows 95/98/NT/1900, MacOS,
  X Windows look-and-feel standards).
• Some graphical toolkits now provide
  cross-platform APIs. E.g. wxWindows, GTK, Java.

7
Javas GUI Capabilities
Java provides essentially two related toolkits
for making GUIs The Abstract Windowing
Toolkit ("AWT"), and The Java
Foundation Classes ("Swing") Swing is merely an
expanded version of the AWT, and provides greater
control and convenience.
8
Why Two Toolkits in Java?
MFC and always "BSoD"
AWT, then JFC or "Swing"
Well, its a long story. In short, JFC (swing)
is Suns answer to Microsofts MFC--a detailed
toolkit library.
9
Cautionary Note

• Java has two flavors of toolkits
• Swing and
• AWT.
• It is not wise to mix AWT and Swing Components.
  
• For your first programs, stick with one toolkit
  or the other.
• Well start off with AWT Components to show the
  basics.
• Then, we will switch to Swing Components.
• How do you tell them apart?
• Generally, but not always, Swing Components will
  have a
• "J" in front of the class name

AWT
Swing
10
Keep in Mind

• We will program graphical elements in source code
  (text).
• There are drag and drop systems but usually there
  is an underlying text-based system
• Eventually you need to get down to the text level
• Java is designed to work across different
  platforms.
• This poses special challenges
• As does the very nature of WIMP GUIs (windows,
  icons, menus, and pointing device graphic user
  interface)

11
Steps to GUI Construction
We will learn GUI creation in two steps the
"view", and then the "controls" or event handling.
1.

• In Java, to create a GUI, you (1)
• Specify a Container, using . . .
• a Layout Manager to . . .
• place Components and/or Containers of
  Components . . . on the screen as desired.

I.e. UI form and appearance
TODAY
LATER
2.

• In Java, to make a GUI act as the
• interface for a program, you (2)
• Design human/computer dialog, using Listeners
  and component-generated events

I.e. UI interaction and behavior
12
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
13
GUI Design Creation
There are three essential constructs in any GUI
Containers -- used to hold items (e.g., the
frame) Components -- the widgets or
interactors (e.g., buttons) LayoutManagers
-- the hidden algorithm used to organize the
widgets inside the container
offset
offset
14
Pop Quiz (hint)
What are the three basic constructs used in
every GUI?
15
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
16
Containers
STEP 1
Containers are special components that may
contain other components.
Note Containment is not the same as inheritance
extension. A Frame may contain buttons, but
buttons are not subclasses of Frame.
17
Containers

• A Container is a class that extends from
  java.awt.Container
• As it turns out, the class "Container" is itself
  a Component.
• Containers can have
• Layouts set on them
• Other components or containers added to them.

Object
Component
Container
18
Example
Lets make a simple Frame. When working
with GUIs, you often have to consult the
API. Note the inheritance structure of your
classes.
19
Example
So far, weve used the API to learn how to make a
Frame. We found constructors for public Frame
() public Frame (String strTitle) Now, how
can we set the size of the Frame? We again
return to the API.
20
Example
The class java.awt.Frame does not contain a
method to set its size. But such a method was
inherited from java.awt.Component
21
Example
Likewise, theres no method in java.awt.Frame to
make the Frame visible. Instead, we find the
method "show()" was inherited from java.awt.Window
22
Hello GUI
import java.awt. public class HelloGUI
public static void main (String arg)
System.out.println ("About to make
GUI") Frame f new Frame ("Hello
GUIs") f.setSize( 200, 200 )
f.show() System.out.println
("Finished making GUI") // main //
class HelloGUI
23
(Demonstration)
24
What?
Our program runs, and the frame never goes away.
When we reach the end of main (as our print
statement indicates) why doesnt the program end?

25
Explanation
When the Java VM created our Frame, it entered
into a kind of infinite loop, waiting for
input and events. (This is common of graphical
toolkits.)
while(true) //get user input // handle
event
Since we didnt write any event handlers, not
even the "window disposal" button will work.
26
Solution
To fix this problem, well have to write some
event handling code. But in order to write some
event handling code, we have to create some
components So, for now, youll just have to
use Ctrl-C to end the program. Once the basics
of GUI construction are covered, well return to
this problem.
27
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
28
Design Idea
We really have two choices when working with
top-level containers
java.awt.Frame
MyGUI
MyGUI
java.awt.Frame
29
Design Note
But the tension between inheritance and
composition has been with us.
30
Example
import java.awt. public class
HelloComposition Frame f public
HelloComposition() f new Frame("Composition
Test") f.setSize(200,200)
f.setBackground(Color.red) f.show()
public static void main (String arg)
HelloComposition h new HelloComposition()

31
Example
A few changes allows us to convert between the two
import java.awt. public class HelloInheritance
extends Frame Frame f public
HelloInheritance() f new Frame
super("Composition Test") f
this.setSize(200,200) f this.setBackground
(Color.red) f this.show()
public static void main (String arg)
HelloInheritance h new HelloInheritance()

32
Whos Kung-Fu is Better
Composition
Inheritance
Saves the single inheritance
Use up our single inheritance
"Wasted inheritance" occurs where we subclass,
but fail to override anything.
Useful when you want the "factory settings" for a
GUI, with no changed behavior
Easier to change basic GUI behavior
Often requires more code, more references
33
Container Summary
Creating containers requires careful
study of the API. Watch the inheritance
structure of the classes. A top-level
container, like a Frame, requires event handlers
(covered later). There are many useful methods
for customizing containers. Just look them up in
the API. E.g.
34
Container Summary
We may often use "composition" where --
We dont anticipate changing behaviors --
We need to save our single inheritance We may
often use "inheritance" where -- We
need to change basic GUI behaviors
35
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
36
Components
STEP 2
Most interactions in a Java GUI are with
Components. Another generic term for Component
is other GUIs (e.g. X Windows) is
"widget". Different types of components for
different types of interaction (e.g. buttons,
etc.) User interactions with components create
events (thus, allow event-driven programming) As
a rule, a Component cannot have other components
inside Exceptions to rule pop up menus may have
menu items added to them. And Containers are
themselves components due to inheritance.
37
Component Examples
Demo HelloWidget
38
Component Examples
Component - generic widget that you can
interact with Button - a widget
that you can press Canvas - a
widget that you can draw on Checkbox -
a widget that is checked or not checked
Choice - an option menu that drops
down Container - a generic class that
contains Components Panel - a
Container to be used inside another
container used to split an
existing window Label - a
single line of read-only text List
- a list of Strings Scrollbar
- a horizontal or vertical scrollbar
TextComponent TextArea - multi-line
editable text TextField -
single-line editable text
39
Components--Examples

• Canvas
• typically a drawing surface on which shapes,
  graphs, pictures, etc can be drawn.
• utilize mouse events and mouse motion events to
  interact with the user to accomplish the drawing
  tasks.
• TextField
• a one-line data entry area
• theoretically infinite in length
• can generate Key events to indicate that the
  user has typed a key
• more typically, it generates an Action event
  when the user finishes the data entry and hits
  Return in the TextField.

40
Components--Examples

• Button
• simply a clickable component
• appears as a standard button on whatever
  graphical environment the user happens to be
  running at the time
• generates an Action event when clicked
• Label
• a one-line field of text.
• user cannot change this text directly program
  changes text with setText( ) method.
• usually not used to capture events (but could)
• usually used as a one-way information source to
  provide a message to the user.

41
Joining Components Containers
Containers have a method public void
add (Component c) that allows us to place items
inside. Thus Panel p new Panel() Button
b1 new Button ("Example 1") Button b2 new
Button ("Example 2") p.add (b1)
p.add(b2) In this example, two buttons are
added to the panel.
42
Example
import java.awt. public class HelloComponent
Frame f public HelloComponent() f
new Frame("Component Test")
f.setSize(200,200) f.setBackground
(Color.red) Panel p new Panel()
Button b new Button ("Hello Components")
p.add(b) f.add(p) f.show()
public static void main (String
arg) new HelloComponent()
43
(Demonstration)
44
Agenda
Graphical User Interfaces -- overview --
essential elements Containers -- overview --
composition vs. inheritance Components --
examples Layout Managers -- examples
Our Roadmap
45
LayoutManagers
STEP 3
We can now create Components and Containers. But
how can they be organized? We might be tempted
to call methods that set the x, y location of a
component in a container. Consulting the API, we
find some likely methods public void
setLocation(int x, int y) public void
setSize(int width, int height)
46
Layout Managers -- Motivation

• To arrange items, one could specify the location
  of a Component by specific x and y coordinates.
  The Component class contains the method
  setLocation(int width, int height)
• Frame f new Frame()
• f.setSize(500,500)
• Button myButton new Button ("Click")
• add(myButton)
• myButton.setLocation(25, 75)

NOTE Origin 0,0 at top left
Whats wrong with this approach?
Note Buttons x and y coordinate starts from
top left
47
Layout Managers -- Motivation

• Problems with specifying x, y coordinates for
  Component
• This becomes tedious for even mildly complex
  GUIs.
• Addition of more components requires
  recalculation of every components x, y
  coordinate
• If container resizes (e.g., user expands
  window), calculations have to be redone!
• Solution
• Position components based on a percentage of
  available container size. Or create an
  algorithm to place components . . .
• But Java already does this for you . . .

48
Layout Managers -- AWT Based

• Java provides several layout managers.
• We will concentrate here on several of them
• BorderLayout
• GridLayout
• FlowLayout
• BoxLayout
• To tell a container which layout manager to use,
  invoke the method
• setLayout( )
• and specify a type of layout.
• For example
• To specify a BorderLayout
• setLayout (new BorderLayout())

49
LayoutManagers Two General Flavors

• One can conceptually divide layout managers into
  two types
• Those that attach constraints to their
  components.
• Those that do not.
• What does this mean, "attach constraints"? If
  a manager attaches constraints to a component,
  then information about a components location
  (e.g., compass points) is stored with the object.

50
LayoutManagers Constraints

• BorderLayout specifies constraints corresponding
  to compass regions of a container

NORTH
EAST
WEST
CENTER
SOUTH
51
LayoutManagers Constraints

• BorderLayout then appends constraint information
  on all components, e.g.
• this.setLayout (new BorderLayout())
• Button e new Button ("East")
• Button w new Button ("West")
• Button n new Button ("North")
• add(e, "East") // deprecated
• add("West", w) // works deprecated
• add(n, BorderLayout.NORTH) // preferred

52
LayoutManagers Constraints
53
LayoutManagers Another Example

• import java.awt.
• public class Test extends Frame
• public Test()
• super ("BorderLayout Demo")
• this.setSize(200,200)
• this.setLayout(new BorderLayout())
• this.add (new Button ("North"),
  BorderLayout.NORTH)
• this.add (new Button ("South"),
  BorderLayout.SOUTH)
• this.add (new Button ("East"),
  BorderLayout.EAST)
• this.add (new Button ("West"),
  BorderLayout.WEST)
• this.add (new Button ("Center"),
  BorderLayout.CENTER)
• public static void main (String args)
• new Test().show()
• // test

54
LayoutManager Example

• Giving

55
BorderLayout
BorderLayout specifies the arrangement

• To add components to a BorderLayout, specify the
  position in which the component will reside.
• Only one component (or container) can go in each
  of the five positions.

56
BorderLayout--Example
setLayout (new BorderLayout()) add(new Label
("Hello!"), "North") Canvas myCanvas new
Canvas() // more about Canvas in a moment add
(myCanvas, "Center")
Hello!
a fresh canvas for drawing here
57
Simple Example
import java.awt. public class HelloLayout
public static void main(String args) Frame f
new Frame() f.setSize(400,400) BorderLayout
bord new BorderLayout() f.setLayout(bord) B
utton b new Button ("Hello") f.add(b,
BorderLayout.SOUTH) // HelloLayout
Will this work? Lets run it and find out...
58
(Demonstration)
59
Simple Example
import java.awt. public class HelloLayout
public static void main(String args) Frame f
new Frame() f.setSize(400,400) BorderLayout
bord new BorderLayout() f.setLayout(bord) B
utton b new Button ("Hello") f.add(b,
BorderLayout.SOUTH) f.show() //
HelloLayout
Ahh.. We forgot to set our Frame visible. Now
it works. Welcome to the exciting world of GUI
debugging.
60
LayoutManager No Constraints

• The second type of LayoutManager does not specify
  constraints for the objects it holds.
• Examples
• GridLayout()
• FlowLayout()
• Without constraints, you cannot accurately
  predict layout behavior across platforms

61
LayoutManager No Constraints

• import java.awt.
• public class FlowTest extends Frame
• String Labels "Short", "Short", "Long
  Label",
• "Really Long Label", "Really, really
  long"
• public FlowTest()
• this.setSize(400,200)
• setLayout(new FlowLayout())
• for (int i 0 i
• Button temp new Button (Labelsi)
• add (temp)
• public static void main (String arg)
• new FlowTest().show()
• //class test

62
LayoutManager No Constraints

• Yields

63
LayoutManager No Constraints

• And also

64
Demonstration
65
LayoutManager No Constraints

• Note
• Since pixels, fonts and insets vary with each
  platform, layout without constraints will vary
  greatly.
• Lesson
• Use layout managers without constraints only when
  you have few components, or youve anticipated
  their possible movement.

66
LayoutManager No Constraints

• Dont think that layout managers without
  constraints are not useful!
• One of the most useful constraint-free layout
  manager is "GridLayout".
• public GridLayout()
• public GridLayout(int rows, int cols)
• public GridLayout
• (int rows, int cols, int hgap, int vgap)

67
GridLayout
GridLayout specifies a grid pattern via
setLayout (new GridLayout (rows, columns)) For
example setLayout (new
GridLayout(2,3)) generates
68
GridLayout

• To add components (or containers) to a
  GridLayout, particular locations are not
  specified (unlike BorderLayout).
• Instead, the components (or containers) are
  positioned by the sequence in which they are
  added, as indicated by numerals below.
• Significantly, GridLayout is distortive, meaning
  components are stretched to fill the available
  space in the grid.

1
2
3
4
5
6
69
GridLayout
Optionally, two additional parameters may be used
with GridLayout to specify the horizontal and
vertical spacing (in pixels) between grid
elements
setLayout (new GridLayout (rows, columns,
hspace, vspace)) where hspace specifies
horizontal size, and vspace specifies vertical
size, e.g., setLayout (new GridLayout (2,
2, 7, 5))
70
GridLayout Example

• import java.awt.
• public class CalcPad extends Frame
• public CalcPad()
• setLayout(new GridLayout(5,3))
• add (new Button ("7"))
• add (new Button ("8"))
• add (new Button ("9"))
• add (new Button ("4"))
• add (new Button ("5"))
• add (new Button ("6"))
• add (new Button ("1"))
• add (new Button ("2"))
• add (new Button ("3"))
• add (new Button ("."))
• add (new Button ("0"))
• add (new Button ("/-"))
• add (new Panel())
• public static void main (String arg)

71
GridLayout Example

• import java.awt.
• public class CalcPad extends Frame
• public CalcPad()
• setLayout(new GridLayout(5,3))
• int off-2,2,0
• for (int i9 i 1 i--)
• add (new Button (""(ioffi3)))
• add (new Button ("."))
• add (new Button ("0"))
• add (new Button ("/-"))
• add (new Panel())
• public static void main (String arg)
• CalcPad ti new CalcPad()
• ti.setSize(150,150)
• ti.show()
• //CalcPad

72
Box Layout Motivation
Often, it is desirable to place items in
horizontal or vertical direction. A grid layout
may not be the best choice, since grid components
are resized to fit the available space--its a
distorts its contents.
container
component
A (3, 1) grid forces size changes
Desired look
73
BoxLayout
A BoxLayout provides this feature. It
resembles a FlowLayout, but with directional
control, and other features
Horizontal and vertical flow control
74
BoxLayout How
The BoxLayout has a single constructor
BoxLayout(Container target, int axis) The
target is the container we wish to layout. The
axis is a static field
BoxLayout.X_AXIS BoxLayout.Y_AXIS JPane
l buttonPanel new JPanel() BoxLayout bLayout
new BoxLayout (buttonPanel,
BoxLayout.X_AXIS) buttonPanel.setLayout(bLayout)
75
Questions?
76
Exercise
Lets design a simple class that displays a login
prompt. No events will be handled lets just
experiment with components, containers and
layout managers.
77
Step 1 List Components
Labels
Text Fields
78
Step 2 List Containers
Panel (out container)
Panel (perhaps a grid?)
79
Step 3 Select Layouts
Grid Layout
80
Step 3 Select Layouts (contd)
BorderLayout
81
Step 4 Code
import java.awt. public class LoginPanel
extends Panel TextField password, username
Panel innerPanel public LoginPanel
() this.setLayout(new BorderLayout()) innerPa
nel new Panel() innerPanel.setLayout(new
GridLayout(2,2)) innerPanel.add(new Label("User
Name")) username new
TextField(10) innerPanel.add(username) innerP
anel.add(new Label("Password")) password new
TextField(10) innerPanel.add(password) this.a
dd(innerPanel, BorderLayout.CENTER) this.ad
d(new Label("Please Log In"), BorderLayout.NOR
TH)
82
// class LoginPanel (contd) public static void
main(String args) Frame f new
Frame() f.setSize(400,400) f.add(new
LoginPanel()) f.show() //
LoginPanel
83
Demonstration
84
Step 5 _at_!
What happened?
85
Analysis
Recall that grid layout distorts, and stretches
the cell contents to fit the maximum allowed
space.
86
Revision 1
User Name
Password
Since the grid was distortive, well wrap the
contents in an inner panel. The wrapping panel
will get stretched, but not its contents.
87
import java.awt. public class LoginPanel
extends Panel TextField password, username
Panel innerPanel public LoginPanel ()
this.setLayout(new BorderLayout()) innerPanel
new Panel() innerPanel.setLayout(new
GridLayout(2,2)) innerPanel.add(wrapInPanel(new
Label("User Name"))) username new
TextField(10) innerPanel.add(wrapInPanel(usernam
e)) innerPanel.add(wrapInPanel(new
Label("Password"))) password new
TextField(10) innerPanel.add(wrapInPanel(passwor
d)) this.add(innerPanel, BorderLayout.CENTER)
this.add(new Label("Please Log In"),
BorderLayout.NORTH) public
Panel wrapInPanel(Component c) Panel pTemp
new Panel() pTemp.setLayout(new
FlowLayout()) pTemp.add(c) return pTemp

Here, we wrap the components before adding
88
/ Revised LoginPanel class (contd) / public
static void main(String args) Frame f new
Frame() f.setSize(400,400) f.add(new
LoginPanel()) f.show() //
LoginPanel
89
Demonstration
90
Result Hmmm.
Our solution so far has been adequate for a basic
GUI. But lets see how to really solve
this problem.
This time, its the BorderLayout thats
distorting the grid panel
91
The Fix
We want the components to have their natural size
User Name
A box layout (X_AXIS) will do this.
We also want the sets of widgets to take up
their proper vertical position, as if there
were springs forcing the components away from the
top/bottom.
92
Solution
As it turns out, theres an API call for creating
this spring effect
myContainer.add (Box.createHorizontalGlue()) myC
ontainer.add(new Button ("hi"))
Hi
Horizontal glue pushes the component away
93
import java.awt. import javax.swing. public
class LoginBoxPanel extends Panel
TextField password, username public
LoginBoxPanel () password new
TextField(10) username new TextField(10) Pan
el pInner new Panel() pInner.setLayout (new
BoxLayout(pInner, BoxLayout.Y_AXIS)) Panel
pUser getPanelPair(new Label("User Name"),
username) Panel pPass getPanelPair(new
Label("Password"), password) pInner.add(p
User) pInner.add(pPass)
94
// constructor (contd)...
this.setLayout(new BoxLayout(this,
BoxLayout.Y_AXIS)) Panel prompt new
Panel() prompt.setLayout(new
FlowLayout(FlowLayout.LEFT)) prompt.add(new
Label ("Please Log In")) this.add(prompt)
this.add(Box.createVerticalGlue())
this.add(pInner) this.add(Box.createVerticalG
lue()) public Panel getPanelPair
(Component first,Component second) Panel
pTemp new Panel() pTemp.setLayout
(new BoxLayout(pTemp, BoxLayout.X_AXIS)) pTe
mp.add(first) pTemp.add(second) Panel
pWrapper new Panel() pWrapper.setLayout(new
FlowLayout()) pWrapper.add(pTemp) return
pWrapper
95
public static void main(String args)
Frame f new Frame() f.setSize(400,
200) f.add(new LoginBoxPanel()) f.show()
// main // LoginBoxPanel
96
Demonstration
97
(No Transcript)
98
Ulcer Check
Confused by the preceding? Yeah, its a lot to
take in. BUT THE POINT IS THAT YOU CAN PLACE
CONTAINERS INSIDE OTHER CONTAINERS, and thereby
create a novel layout. For now, stick with the
simple layouts (e.g., the simple BorderLayout/Grid
Layout), and become comfortable with components.
99
Questions?
100
(No Transcript)