Chapter 06
Intro to GUI using Window Builder
Why GUI?
• Decent user interface.
• Gets past the ask-respond-ask-respond
nonsense of console I/O
• Let a user fill in all the relevant data, and press
a button.
• When the button is pressed, read the fields
and do the work.
A little different from the book…
• Building an effective user experience using
Graphical User Interface (GUI) tools can be very
daunting.
• It often draws novice programmers into a maze of
advanced object-oriented concepts and difficult
syntax.
• Some time ago, Microsoft pioneered a much
more intuitive approach with Visual Basic
• Recently, Window Builder has brought this ease
to Java. Let’s use it and focus the tools of GUI.
Use the book as a reference
• But don’t get too tied up in how to write the
code.
• Use Window Builder to build the code, and
the book to help understand how it works.
Install Window Builder
• It is pre-installed on TCC lab computers
• https://eclipse.org/windowbuilder/
• https://www.youtube.com/watch?v=EYTbnBs8uig
• Remember: GIYF (Google Is Your Friend!)
Let’s build a really simple example
• How about a calculator?
• One of the biggest challenges in getting user
input will be to convert strings to numbers,
and handle flakey user input.
Begin by setting Absolute Layout
A word on Layouts
• How will your program look on different
displays, with possibly different resolutions?
• Sun/Java tried to solve this with an approach
called layout, which would supposedly
magically fix it so your program would work
fine in any window on any display.
Absolute layout
• “Easy Fixes” often don’t work, and this is one
of them.
• Better to use absolute layout (with a
coordinate system you understand).
• For beginning, just assume that the screen will
accommodate a reasonable-sized window.
• As you become advanced, you can have your
program determine the screen/window size
and adapt appropriately.
GUI Components
• Now you can drag and drop GUI components
on to your window.
Here are some useful ones
• Jlabel – just text on your window to describe
other components
• JTextField – a field that lets the user type in
text including numbers. Your program will be
able to read them later.
• JButton – An item the user can click on. You
will usually have one or more of these, and
you will write the code that runs when the
button press event occurs.
Other Components
• You’ll probably recognize others of these from
the programs you’ve been using for some
time.
• For example, JCheckBoxes and JRadioButtons
let users check or un-check options. Usually
you don’t worry about the events, just read
the current choices in code that runs when a
button is pressed.
We can make a simple calculator
• With just JLabel, JTextField, and JButton.
• The JLabel will describe the fields the user can
type in.
• The JTextField components will provide places
for the user to type (and an output field that
isn’t editable)
• The JButton components will do the
calculations.
• You can modify its size by clicking on the
“handles”, and its text over in the Properties
window. Labels usually don’t need an
evocative name, but the text is the important
thing.
Editing the label
• The Variable is where
the name goes.
Component names
usually start with a
type identifier like lbl
• The text field is where
you put in the text
you want.
Adjusting your label
• Drag the control handle
to re-size the label.
• Make it a bit bigger than
you need – often the
font at run time doesn’t
exactly match the font at
design time.
Drag in a JTextField
• Drag in the field
• Adjust its size with the
drag handles
• Give it an appropriate
name, and default
contents if you like.
Put in a second label and text field
• Give it an
appropriate name,
location, and size.
• A colon “:” at the
end of a label can
help the user
relate the label to
what it is labeling.
The output field is non-editable
Now put in some action buttons
• Drag in a
Jbutton
• Name it:
btnPlus
• Set its text to
“+”
• You can also
put a picture
on a button.
Repeat for other buttons
Now we link actions to the buttons
• Double-click on a button, and Eclipse opens up
the code window, where we can write the
code that will execute when the button is
clicked.
• There are more advanced ways to attach
Swing Actions to different things the user can
do to trigger events, but this is enough to get
us started.
This is what we see when we doubleclick on the “+” button
The outline box helps remember names
The getText() method returns the text the user typed in. In order to turn it into a
number, we’ll have to parse it. Just in case, let’s do it in a try block, so we’ll know if
the user has typed in un-parseable text.
That’s all it takes to add!
How to get the other 4 buttons?
• We could copy-and-paste, changing that “+” in
line 88.
• Whenever we repeat a lot of stuff like that,
maybe a method would save repeated code.
• One advantage of repeated code is that, if you
decide to change something, you only have to
change it in one place.
How to modularize?
• Lines 84-85 are tempting, but they are in a try
block, so scope might be an issue.
• How about a routine that does it all, just
passing in a code for the operation?
• Top-down, write the call first:
doParseAndOperation('+');
doParseAndOperation('+');
And here is the result
Hmm. That second label field got truncated. I warned
you about that. But I did make the output field wider.
6.2 Graphics and Painting
• Sigh. There was graphics before GUI.
• You have to know a bit to get going.
• You need graphics context and JPanel
Java assumes Raster Graphics
• There are two approaches to computer
graphics:
– Vector graphics, in which objects are describe by
their geometry and (perhaps device-independent)
coordinates
– Raster graphics, dealing with pixels of different
colors.
• Java supports a mélange of both.
You need an object on which to paint
• The object (a Panel) will have a method named:
paintComponent(Graphics g)
• You will override the default method with one
you write.
• You will always begin your paintComponent
method with a call to
“super.paintComponent(g)”
• You then put in the graphics primitives and
attributes to draw your image.
Primitives are methods of “g”
•
•
•
•
•
•
drawString(String str, int x, int y)
drawLine(int x1, int y1, int x2, int y2)
drawRect(int x, int y, int width, int height)
drawOval(int x, int y, int width, int height)
drawRoundRect, draw3DRect, draw Arc
fillRect, fillOval, fillRoundRect,…
Attributes are methods of “g”
• They are “modal” – they affect subsequent
primitives
• setColor sets color, requires a color object
• setFont sets font, requires a font object
6.3 Mouse and other events
• There is, behind the scenes, an “event loop” that
waits for the user to do something, and calls
event handlers when events occur.
• Your job is to write these handlers and link them
up to the appropriate objects.
• Fortunately, Window Builder makes this
straightforward.
• In a beginning class, we mostly need to focus on
click events of buttons.
• Other things like dragging and keystrokes, are
useful but take a bit of studying.
6.4 Timers, Key Events, and State Machines
• Timers are nice. You put a timer object in your
project, tell it how often to “go off”, and write
an action handler. This can be used for
animation.
• Keyboard Events happen all the time, and you
usually don’t worry about them. But
sometimes taking control of them can make
nicer user interface.
6.5 Basic components
• Common methods:
– getWidth and getHeight
– setEnabled
– setVisible
– setFont
– setBackground
– setOpaque
– setToolTipText
– setPreferredSize
Components
•
•
•
•
•
•
JButton
JLabel
JCheckBox
JTextField and JTextArea (with JScrollPane)
Jslider
Radio Buttons
6.6 Layout and borders
• Layouts:
–
–
–
–
FlowLayout
BorderLayout
GridLayout
Absolute or null
• Borders
– BorderFactory creates them
– Use the component.setBorder method with an object
created by BorderFactory.createLineBorder(color)
Null or Absolute layout
• For those of us who understand coordinates,
and realize that we have to design our GUIs
the way we want them. I’m not a big fan of
things like flowLayout where components
jump around when the user re-sizes a window.
6.7 Menus and Dialogs
• You’ve all used pull-down menus. This is how
you write applications that use them.
• Window Builder is a big help here.
• Dialogs are windows that you create and make
visible. Modal Dialogs “pause” your program
until they make themselves invisible.