Lecture 3 - Graphical User Interfaces
❒ java.awt - Original GUI toolkit in JDK 1.1,
❒ GUI toolkits in Java API
❒ JFrame
❒ GUI components
❒ Input in Frames
❒ Reading:
❍ Horstmann, Chapters 4, 10 and 12
❍ Swing tutorial
❍ Java tutorial, Chapter on Swing (downloadable)
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Java API
Lect 3 - GUI -1
implemented using native GUI libraries of
the operating systems. (Problem:
portability.)
❒ javax.swing - Portable GUI toolkit added in
Java 2, extending java.awt. (Gives
platform-independent operation, though it is
slower.)
❒ Many other third party GUI toolkits, e.g.,
SWT in Eclipse.
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -2
Creating JFrames
JFrame
❒ In many application programs one needs to
//1. Optional: Specify who draws the window decorations.
JFrame.setDefaultLookAndFeelDecorated(true);
import both java.awt and javax.swing.
❒ To avoid confusion, the common class
names in Swing are are prefixed with the
letter “J”, e.g., JFrame, JApplet,
JButton, JMenubar etc.
//2. Create the frame.
JFrame frame = new JFrame("FrameDemo");
❒ Frame – The Java term for a GUI window.
//5. Size the frame.
frame.pack();
//3. Optional: What happens when the frame closes?
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
//4. Create components and put them in the frame.
//...create emptyLabel...
frame.getContentPane().add(emptyLabel,
BorderLayout.CENTER);
//6. Show it.
frame.setVisible(true);
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -3
Creating JFrames - Commentary
1.
2.
3.
4.
5.
6.
Asks that the frame should be decorated with
borders etc.
Creates an instance of the JFrame class.
Specifies that the program should exit when the
frame is closed. (If you don’t put this, the
program might hang.)
Adds something called “emptyLabel” as a GUI
component to the frame.
Asks that the frame be automatically sized based
on its contents and their preferred sizes.
Makes the frame visible. (Otherwise, it would
be hidden by default.)
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -5
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -4
Components and Containers
❒ The things that you can display in GUI
windows are called components. Examples
are buttons, text fields, tables etc.
❒ Some of the components are containers,
i.e., they can contain other components
inside them (which might again be
containers etc.).
❒ A JFrame is a container of a specialized
sort. It has several “panes” as its
components, the important one being its
contentPane.
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -6
The contentPane
JPanel and JApplet
❒ The contentPane is a container. So, we can add
components to it.
❒ They support graphics, in addition to user
interface components.
Container pane = frame.getContentPane();
pane.add(new JLabel(
new ImageIcon(
“world.gif”))));
pane.add(new JLabel(“Hello World!”));
pane.add(new JButton(“Click Me”));
❒ Applets are frames that can be drawn inside
web pages, included using a HTML tag
such as:
<APPLET code=“MyApplet.class”
width=400 height=300>
If you Java-enable your browser, you will see applet.
</APPLET>
❒ Or, we can create a new contentPane:
JPanel pane = new JPanel();
frame.setContentPane(pane);
pane.add(new JLabel(“Hello World!”));
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -7
GUI Components
❒ Basic controls: text fields, buttons, radio
buttons, check-boxes, option lists, comboboxes (drop-down lists), menus, sliders.
❒ Containers: panels, scroll-panes, split-panes,
tabbed-panes, toolbars.
❒ Fancy displays: tables, tree-displays.
❒ Fancy controls: file chooser, color chooser.
❒ See
http://java.sun.com/docs/books/tutorial/uiswing/components/components.html
MSc Workshop - © S. Kamin, U. Reddy
2003-01-27
Lect 3 - GUI -9
extending the JPanel class.
public class MyPanel extends JPanel {
int count = 0; // the state
JButton button = new JButton(“Click me”);
JLabel label = new JLabel(“0”);
public MyPanel() {
add(button); add(label);
}
}
❒ It is even necessary when you need to include graphics
painting.
2003-01-27
Lect 3 - GUI -10
JTextField t = new JTextField(4);
❒ Reading the value in a text field involves
four changes to what we’ve seen:
1
public class MyPanel extends JPanel
implements ActionListener {
2
MSc Workshop - © S. Kamin, U. Reddy
MSc Workshop - © S. Kamin, U. Reddy
Input in panels (cont.)
❒ Users enter text in text field components
2003-01-27
Lect 3 - GUI -8
❒ Good design practice to define panels as classes,
Input in panels
import java.swing.*;
import java.awt.event.*;
MSc Workshop - © S. Kamin, U. Reddy
Using Inheritance to define Panels
❒ Display elements: text labels, image labels.
2003-01-27
❒ Panels are simple lightweight containers.
Lect 3 - GUI -11
public MyPanel () {
...
add(t);
t.addActionListener(this);
}
3
public void actionPerformed (ActionEvent e) {
... t.getText() ...
......
4
}
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -12
Input in panels (cont.)
1
2
3
“import java.awt.event.*” must appear
verbatim (the event-handling library).
“implements ActionListener” must appear
verbatim (to say that it handles action events).
JTextField variable, say t, is declared as
instance variable
In the constructor, in addition to calling add,
call
Input in applets (cont.)
4
Define actionPerformed method.
Called when user types Enter key in the text
field.
❍ Use getText method of JTextField class to
get the String contained in t.
❍
t.addActionListener(this);
(to say that this object will handle the action
events from t).
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -13
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
The event model
Layout
❒ The code above is one instance of the event
model.
❒ With the event model, the panel can
respond to button clicks, mouse movements,
etc.
❒ Can also use multiple text fields and
distinguish which one was modified.
❒ More in the next lecture...
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -14
Lect 3 - GUI -15
❒ Layout of GUI panels is a tricky business.
❍
❍
Need to allow for resizing of windows.
Need to be flexible about the text labels etc.
❒ Java library defines a number of “Layout
Managers” to facilitate layout.
❒ Or, you can define your own or import third
party libraries.
❒ http://java.sun.com/docs/books/tutorial/uiswing/mini/layout.html
2003-01-27
MSc Workshop - © S. Kamin, U. Reddy
Lect 3 - GUI -16