Unit 5
Unit 5
Programming
Unit
5
Intro
to
GUI
with
Swing.
Event-Driven
Programming.
AWer
creaXng
JFrame
(one
of
the
containers)
add
UI
controls
to
it,
for
example:
JButton myButton = new JButton ("Click me");!
add(myButton);!
GridLayout!
Say,
your
container
needs
to
allocate
8
elements
of
the
same
size.
You
may
do
it
in
4
columns
and
2
rows:
4x2=8
cells.
!
JPanel windowContent= new JPanel();!
!
!// Set the layout manager for the panel!
!GridLayout gl = new GridLayout(4,2); !
!windowContent.setLayout(gl);!
!
// Code to add components to the panel goes here!
!
// To disable window resizing
frame.setResizable(false);!
(c)
Yakov
Fain
2014
Walkthrough
1
1.
Download
and
import
into
Eclipse
the
source
code
of
the
Lesson8
2.
Run
SimpleCalculator.
Stretch
the
window
and
observe
the
changes
in
the
window
layout.
3.
Run
SimpleCalculatorGrid.
Stretch
the
window
and
observe
the
changes
in
the
window
layout.
BorderLayout!
BorderLayout
divides
a
UI
container
into
5
imaginary
areas:
South,
West,
North,
East,
and
Center.
Add
components
to
all
The
calculator
below
uses
only
the
North
and
Center.
The
Center
area
uses
GridLayout
for
allocaXng
buIons.
!
(c)
Yakov
Fain
2014
CardLayout!
In
a
deck
of
cards
only
the
top
card
is
visible.
Use
CardLayout
if
you
need
to
display
several
panels
one
at
a
Xme.
See
a
CardLayout
demo
at
hIp://bit.ly/NbmfRs
Absolute
Layout
Its
like
not
having
any
automaXc
layout.
windowContent.setLayout(null);
!
JButton myButton = new Button("New Game");!
!
//Specify X and Y coordinates of each component!
myButton.setBounds(100,200,40,20);!
GridBagLayout!
Allows
laying
out
components
of
dierent
sizes
by
assigning
constraints
to
each
grid
element.
For
example
this
cell
will
be
6
Xmes
wider
than
other
cells
in
the
grid:
!
(c)
Yakov
Fain
2014
Using
GridBagConstraints
// Set the GridBagLayout for the windows content pane!
GridBagLayout gb = new GridBagLayout();!
this.setLayout(gb);!
!
// Create an instance of the GridBagConstraints!
// Youll have to repeat these lines for each component!
// that youd like to add to the grid cell!
GridBagConstraints constr = new GridBagConstraints();!
!
//set constraints for the Calculators displayField:!
!
constr.gridx=0; // x coordinate of the cell
constr.gridy=0; // y coordinate of the cell // proportion of horizontal space taken by this!
// component!
!
constr.weightx = 1.0;
!
// this cell has the same height as others!
!
constr.gridheight =1;!
// proportion of vertical space taken by this
!
component
!
// this cell is as wide as 6 others!
constr.weighty = 1.0;
constr.gridwidth= 6;
!
!
!
// position of the component within the cell!
// fill all space in the cell!
constr.anchor=constr.CENTER;
!
constr.fill= constr.BOTH; !
!
displayField = new JTextField();!
!
// set constrains for this field!
gb.setConstraints(displayField,constr); !
!
// add the text field to the window!
windowContent.add(displayField);!
(c)
Yakov
Fain
2014
Events from UI
Event
Loop
GUI
UI
content
modicaXons
Data
processor
Calling
UI
components
To
process
buIon
events
in
your
Calculator,
there
should
be
a
class
that
implements
the
AcXonListener.
It
can
be
the
same
class
or
another
one,
e.g.
CalculatorEngine
public class CalculatorEngine implements ActionListener {!
!
public void actionPerformed(ActionEvent e){
!
// Place the click-processing code here !
}!
}!
(c)
Yakov
Fain
2014
MVC:
Model-View-Controller
events
results
Calculator:
View
CalculatorEngine: Controller
CalculatorEngine: Controller
Walkthrough
2
1.
Download
and
import
the
code
from
Lesson
9
and
review
it
with
the
instructor.
2.
Run
the
Calculator
program
and
see
if
the
buIons
react
to
clicks.
BoxLayout!
Arrange
GUI
components
either
verXcally
or
horizontally.
Homework
1.
Get
familiar
with
the
layout
manager
GridBagLayout.
2.
Do
the
assignment
from
the
Try
It
secXon
from
Lesson
8
and
9
from
the
textbook.
3.
Go
over
the
Java
Swing
tutorial
at
hIp://bit.ly/1hHLUKZ
.
4.
Modify
Calculator.java
to
use
BoxLayout.
AddiXonal Reading
Observer
Design
PaIern
Tutorial:
hIp://bit.ly/1dZbNq6
(c)
Yakov
Fain
2014