lec.10 (chapter 8 & 9) gui jiang (jen) zheng june 27 th, 2005

Lec.10 (Chapter 8 & 9) GUI

Jiang (Jen) ZHENG

June 27th, 2005

CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

2

Outline

Intro. To Java GUI AWT & SWING

Java Components Sample Components JFrame, JLabel, JButton, JTextField

Even-Driven Programming Concept Layout Manager

FlowLayout, GridLayout JPanel, BorderLayout

Terminating a GUI ActionListener, WindowListener, MouseListener Updating the Display


3

Graphical Interfaces

So far all of our programs have used Input from the keyboard Output to the console

This is effective but in today’s world is not so user-friendly Users want to use the mouse Users want windows with dialog boxes and

buttons Users need maximum guidance with minimum

room for error


4

Graphical Interfaces

Java has all of the tools for us to design and implement complex graphical interfaces Graphical output Use of a mouse Graphical components for input Ex: Windows with buttons, textfields, pulldown menus,

radiobuttons, labels, and more To use these tools we need to learn some Java

classes and some programming theory But once we learn how to do it we will typically prefer it

over console applications


5

AWT and Swing The AWT (Abstract Windowing Toolkit) was

developed for the first versions of Java Created components such as Frame, Panel,

Button, TextField, Label However, the look and feel of the AWT varied

on different windowing systems The same AWT Java program looks different

when run on MS Windows machines, MACs and Sun Workstations

This is because the underlying windowing systems on those machines differ


6

AWT and Swing Since a goal of Java is to be platform

independent, its look and feel should also be platform independent

Swing was developed from Java v. 1.2 to be more consistent in its look and feel across all platforms It also adds some extra features that did not

exist in the AWT Many Swing components are similar to AWT in

name, but with a “J” in front Ex: JFrame, JPanel, JButton, JTextField, JLabel


7

Components

Components: the objects that make up a GUI JButton JLabel JCkeckbox JTextField JRadioButton JFileChooser …


8

Sample Components

JRadioButtonJCheckBox

JButton

JComboBoxJList

JButton


9

Sample Components

Different Borders

JMenu


10

Sample Components

JScroll Bar

JSlider

Dialog(JOptionPane)


11

Sample Components

File Selection Dialog (JFileChooser)


12

JFrames

JFrames are objects that will be the windows in our graphical applications We can draw/paint graphics within them We can place and manipulate graphical

components within them To use them we:

Create a JFrame object Size it as desired Show it on the display


13

JLabels

JLabels are simple components to show formatted text on the display We can set the font type, size and color We can set and change the text itself as

desired throughout program execution Let’s look at a very simple example:

Create a JFrame, then put a JLabel in it and display it


14

Simple Example

See ex23a.java See the comments to determine how the various objects

are created and set up properly Note that this example does not really do much

No interaction with the user Closing the window does not even terminate the program

We must CTRL-C in the console to terminate

But it does show us some of the basic setup for graphical applications

Let’s now add a bit more functionality Add a button that user can click to change the color of

the label text


15

JButtons JButtons are simple components that can also

show text on the display However, in addition to showing text, they also

respond to clicks of the mouse If a user clicks the mouse within a JButton, an

ActionEvent object is generated in response This object is passed automatically to an

ActionListener object The ActionListener must be registered to “listen” to the

JButton ActionListener is actually an interface with the single

method actionPerformed() Any class that implements actionPerformed() can be an

ActionListener


16

Event-Driven Programming This causes the actionPerformed method within the

ActionListener to execute It is the actionPerformed method that is doing the actual

response to the button click

This idea is called event-driven programming As program executes, user generates events in various

ways Ex: click a button, move the mouse, edit text

Programmer writes code to respond to the various events that may occur

There are many different types of events in Java programs, but the basic idea for all of them is similar:


17

Event-Driven Programming

Some object generates an event object The event object is passed to some event listener

object A method in the event listener executes to handle

the event It is important that event handlers are linked to

the appropriate event generators Otherwise event will still be generated but will not

be responded to See ex23b.java


18

Another Example

Let’s look at another simple example: Toggle Button

Click it once and it does an action Click it again and it does a different action

Each click it alternates between the two actions

The setup of this program is very similar to ex23b.java

Only difference is what the listener is doing See ex23c.java


19

Multiple Components If we want to have multiple components, we need to

determine how to lay them out To do this we use a layout manager

These determine how components appear in a window and how much space is allocate for them

There are many layout managers in Java Two simple ones are:

FlowLayout Places components as we read a book – left to right top to

bottom GridLayout

Places components in an equally sized 2-dimensional rectangular grid


20

Multiple Components

Multiple components may also need to interact with each other Listener for one component may need to access the

other component In this case we must allow the listener access to all

components involved -- so it must be different from how we did it in ex23b.java and ex23c.java

Ex: Consider a JTextField This is a component in which the user can enter text Once user hits “Enter”, the component generates an

ActionEvent Same event generated by a JButton


21

Multiple Components We can use this to process input from a user For example to change the contents of a JLabel or a

JButton

Let’s look at another example Our JFrame will have a JButton and a JTextField

The JButton will behave as in ex23b – clicking it will change the color of the text

The JTextField will allow us to enter new text for the JButton

We will also set things up differently to allow for more convenient access

See ex23d.java


22

JPanel

What if we want different parts of our window laid out differently? There is a GridBagLayout that allows for

arbitrary configurations, but it is quite complicated to use

A simpler solution is to subdivide our window We can do this with JPanels

Have most of the functionality of JFrames, except without the title/menu bar

Can store other components and lay them out using a layout manager


23

BorderLayout So now we can use the layout manager of our JFrame to

store our JPanels We can then use our JPanels to store our other

components See drawing on board

When doing this, a common way of laying out our JFrame is BorderLayout

BorderLayout subdivides our window into 5 areas NORTH, SOUTH, EAST, WEST, CENTER

We can put a component in each area or just some of them

If the component is a JPanel, we can then put our other components within that


24

How to Terminate GUIs

How to terminate a graphical program? So far we have seen that closing the window does not

necessarily stop the program This is because graphical applications in Java must be

explicitly terminated using the System.exit(0);

method call However, we need to make sure the method is called

only when we really want to quit the program In the text, they show how you can set up a button to

stop the program This is fine, but most users would like closing the window

to also stop the program


25

ActionListener, WindowListener

We can handle this with another listener So far we have only discussed ActionListener,

which listens for ActionEvents Another useful listener in Java is

WindowListener, which listens for WindowEvents Ex: opening, minimizing, closing, activating, etc. See API

Because there are many different things a WindowEvent can represent, we have multiple methods in the WindowListener interface

However, we are only interested in one for now:

windowClosing()


26

WindowListner

However, to be a WindowListener, a class must implement all methods in the interface

So we would have to implement all 7 methods, even though we only really need one

For the other 6 we would just have empty braces To avoid this problem, Java has adapter classes for

most of its event handling interfaces These trivially implement ALL of the methods in the

interface We then extend the adapter and override only the methods

we need In this case WindowAdapter

See Counters.java


27

MouseEvents and MouseListeners One of the most useful events in Java is the MouseEvent

Allows us to act based on users manipulation of the mouse

There are two different listeners for the mouse One for "change of state"

Pressing or releasing a button Entering or leaving a component

One for "motion" Moving the mouse Dragging the mouse

Let's see how to do this See ex24.java


28

Updating the Display Often an event will cause some change on the

display A JLabel or JButton will be changed

These are updated on the display automatically, so we don't have to take any extra action

Some graphics are drawn In this case we DO have to take action Components have a Graphics context that allows

graphics to be painted on the screen Graphics are drawn through execution of the

method paint() or paintComponent()


29

Updating the Display

Note that there are a LOT of different ways of drawing and updating the display in Java, using JFrames, JPanels, JComponents, JCanvas, etc.

However, they all have one important requirement: By default graphics are only drawn when "necessary"

Ex: If the window is covered and then uncovered, or minimized and then restored

If we want them to be drawn at other times, we must request this via the method repaint()

This asks the window to be redrawn when it otherwise would not have been


30

Updating the Display

For example, if we are drawing a line as we move the mouse, we must repaint the screen after EACH PIXEL in order to see its effect

Let's look at another example See ex25.java

lec.10 (chapter 8 & 9) gui jiang (jen) zheng june 27 th, 2005

Documents

components components

department of computer

university of pittsburgh

errorcs401coe401 summer

2005cs401coe401 summer

displaycs401coe401 summer

jlabelcs401coe401 summer

mouse graphical components