Download User Interfaces - CCSA225-1

Chapter 15
Creating User Interfaces
Chapter 12 GUI Basics
§10.2, “Abstract Classes,” in Chapter 10
Chapter 13 Graphics
Chapter 14 Event-Driven Programming
§10.4, “Interfaces,” in Chapter 10
Chapter 15 Creating User Interfaces
Chapter 16 Applets and Multimedia
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
1
Objectives
F
F
F
F
F
To create graphical user interfaces with various user-interface
components: JButton, JCheckBox, JRadioButton, JLabel,
JTextField, JTextArea, JComboBox, JList, JScrollBar, and JSlider
(§15.2 – 15.12).
To create listeners for various types of events (§15.2 – 15.12).
To use borders to visually group user-interface components
(§15.2).
To create image icons using the ImageIcon class (§15.3).
To display multiple windows in an application (§15.14).
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
2
Components Covered in the Chapter
FIntroduces
the frequently used GUI components
FUses borders and icons
JButton
Component
Container
JComponent
AbstractButton
JCheckBox
JToggleButton
JRadioButton
JLabel
JTextArea
JTextComponent
JTextField
JPasswordField
JComboBox
JList
JScrollBar
JSlider
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
3
Buttons
A button is a component that triggers an action event
when clicked. Swing provides
1- regular buttons,
2- toggle buttons,
3-check box buttons,
4-radio buttons.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
4
JButton Constructors
The following are JButton constructors:
JButton()
JButton(String text)
JButton(String text, Icon icon)
JButton(Icon icon)
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
5
JButton Properties
F
text
F
icon
F
mnemonic
F
horizontalAlignment
F
verticalAlignment
F
horizontalTextPosition
F
verticalTextPosition
F
iconTextGap
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
6
Set mnemonic keys
Set keyboard mnemonics:
F
jbtLeft.setMnemonic('L');
F
jbtRight.setMnemonic('R');
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
7
Horizontal Alignments
Horizontal alignment specifies how the icon and
text are placed horizontally on a button. You can set
the horizontal alignment using one of the five
constants: LEADING, LEFT, CENTER, RIGHT,
TRAILING. At present, LEADING and LEFT are
the same and TRAILING and RIGHT are the same.
Future implementation may distinguish them. The
default horizontal alignment is
SwingConstants.TRAILING.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
8
Vertical Alignments
Vertical alignment specifies how the icon and
text are placed vertically on a button. You can
set the vertical alignment using one of the
three constants: TOP, CENTER, BOTTOM.
The default vertical alignment is
SwingConstants.CENTER.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
9
Horizontal Text Positions
Horizontal text position specifies the
horizontal position of the text relative to the
icon. You can set the horizontal text position
using one of the five constants: LEADING,
LEFT, CENTER, RIGHT, TRAILING. The
default horizontal text position is
SwingConstants.RIGHT.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
10
Vertical Text Positions
Vertical text position specifies the vertical
position of the text relative to the icon. You
can set the vertical text position using one of
the three constants: TOP, CENTER. The
default vertical text position is
SwingConstants.CENTER.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
11
JCheckBox
JCheckBox inherits all the properties such as text, icon,
mnemonic, verticalAlignment, horizontalAlignment,
horizontalTextPosition, verticalTextPosition, and selected
from AbstractButton, and provides several constructors to
create check boxes.
javax.swing.AbstractButton
javax.swing.JToggleButton
javax.swing.JCheckBox
+JCheckBox()
Creates a default check box button with no text and icon.
+JCheckBox(text: String)
Creates a check box with text.
+JCheckBox(text: String, selected:
boolean)
Creates a check box with text and specifies whether the check box is
initially selected.
+JCheckBox(icon: Icon)
Creates a checkbox with an icon.
+JCheckBox(text: String, icon: Icon)
Creates a checkbox with text and an icon.
+JCheckBox(text: String, icon: Icon,
selected: boolean)
Creates a check box with text and an icon, and specifies whether the check
box is initially selected.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
12
JRadioButton
Radio buttons are variations of check boxes. They are
often used in the group, where only one button is
checked at a time.
javax.swing.AbstractButton
javax.swing.JToggleButton
javax.swing.JRadioButton
+JRadioButton()
Creates a default radio button with no text and icon.
+JRadioButton(text: String)
Creates a radio button with text.
+JRadioButton(text: String, selected:
boolean)
Creates a radio button with text and specifies whether the radio button is
initially selected.
+JRadioButton(icon: Icon)
Creates a radio button with an icon.
+JRadioButton(text: String, icon: Icon)
Creates a radio button with text and an icon.
+JRadioButton(text: String, icon: Icon,
selected: boolean)
Creates a radio button with text and an icon, and specifies whether the radio
button is initially selected.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
13
Grouping Radio Buttons
ButtonGroup btg = new ButtonGroup();
btg.add(jrb1);
btg.add(jrb2);
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
14
GUI Classes (Components) for
Handling Text
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
15
GUI Classes for Handling Text
F
The Swing GUI classes JLabel,
JTextField, and JTextArea deal with text.
F
A JLabel object displays uneditable text (or image).
A JTextField object allows the user to enter a single line
of text.
A JTextArea object allows the user to enter multiple lines
of text. It can also be used for displaying multiple lines of
uneditable text.
F
F
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 16
JLabel
javax.swing.JComponent
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
javax.swing.JLabel
A label
is a display area for a short text,
-text: String
The label’s text.
javax.swing.Icon
an-icon:image,
or both. The label’s image icon.
-horizontalAlignment: int
The horizontal alignment of the text and icon on the label.
-horizontalTextPosition: int
The horizontal text position relative to the icon on the label.
-verticalAlignment: int
The vertical alignment of the text and icon on the label.
-verticalTextPosition: int
The vertical text position relative to the icon on the label.
-iconTextGap: int
The gap between the text and the icon on the label (JDK 1.4).
+JLabel()
Creates a default label with no text and icon.
+JLabel(icon: javax.swing.Icon)
Creates a label with an icon.
+JLabel(icon: Icon, hAlignment: int)
Creates a label with an icon and the specified horizontal alignment.
+JLabel(text: String)
Creates a label with text.
+JLabel(text: String, icon: Icon,
hAlignment: int)
Creates a label with text, an icon, and the specified horizontal alignment.
+JLabel(text: String, hAlignment: int)
Creates a label with text and the specified horizontal alignment.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
17
JLabel Constructors
The constructors for labels are as follows:
JLabel()
JLabel(String text, int horizontalAlignment)
JLabel(String text)
JLabel(Icon icon)
JLabel(Icon icon, int horizontalAlignment)
JLabel(String text, Icon icon, int
horizontalAlignment)
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
18
JLabel Properties
JLabel inherits all the properties from
JComponent and has many properties
similar to the ones in JButton, such as
text, icon, horizontalAlignment,
verticalAlignment,
horizontalTextPosition,
verticalTextPosition, and iconTextGap.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
19
Using Labels
// Create an image icon from image file
ImageIcon icon = new ImageIcon("image/grapes.gif");
// Create a label with text, an icon,
// with centered horizontal alignment
JLabel jlbl = new JLabel("Grapes", icon,
SwingConstants.CENTER);
// Set label's text alignment and gap between text and icon
jlbl.setHorizontalTextPosition(SwingConstants.CENTER);
jlbl.setVerticalTextPosition(SwingConstants.BOTTOM);
jlbl.setIconTextGap(5);
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
20
JLabel with an Image
JLabel imgLabel = new JLabel(new ImageIcon("cat.gif"));
Frame.add(imgLabel);
JLabel
(with a text)
JLabel
(with an image)
JTextField
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 21
JTextField
A text field is an input area where the user can type in
characters. Text fields are
useful in that they enable
The get and set methods for these data fields are provided in
the class, but omitted in the UML diagram for brevity.
thejavax.swing.text.JTextComponent
user to enter in variable
data (such as a name or a
-text: String
The text contained in this text component.
description).
-editable: boolean
Indicates whether this text component is editable (default: true).
javax.swing.JTextField
-columns: int
The number of columns in this text field.
-horizontalAlignment: int
The horizontal alignment of this text field (default: LEFT).
+JTextField()
Creates a default empty text field with number of columns set to 0.
+JTextField(column: int)
Creates an empty text field with specified number of columns.
+JTextField(text: String)
Creates a text field initialized with the specified text.
+JTextField(text: String, columns: int)
Creates a text field initialized with the specified text and columns.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
22
JTextField Constructors
F
JTextField(int columns)
Creates an empty text field with the specified
number of columns.
F
JTextField(String text)
Creates a text field initialized with the specified text.
F
JTextField(String text, int columns)
Creates a text field initialized with the
specified text and the column size.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
23
JTextField Properties
F
text
F
horizontalAlignment
F
editable
F
columns
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
24
JTextField Methods
F
getText()
Returns the string from the text field.
F
setText(String text)
Puts the given string in the text field.
F
setEditable(boolean editable)
Enables or disables the text field to be edited. By default,
editable is true.
F
setColumns(int)
Sets the number of columns in this text field.
The length of the text field is changeable.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved. 0-13-222158-6
25
JTextArea
F
F
F
We use a JTextArea object to display or allow the user to enter
multiple lines of text.
The setText method assigns the text to a JTextArea, replacing the
current content.
The append method appends the text to the current text.
JTextArea textArea
= new JTextArea( );
. . .
Hello
the lost world
textArea.setText("Hello\n");
textArea.append("the lost ");
textArea.append("world");
JTextArea
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 26
JTextArea
• We want to create a frame with a JTextField and a JTextArea
• When the user enters a text in the JTextField, and then
presses Enter or clicks the ADD button,the entered text will
be appended to the JTextArea
• When the user clicks CLEAR the text in the JTextArea will
be cleared
JTextArea
JTextField
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 27
JTextArea
Example_TextArea.java
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 28
JTextArea
Example_TextArea.java
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 29
JTextArea
Example_TextArea.java
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 30
F
The state of a text Area after six words are
entered.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 31
Adding Scroll Bars to
JTextArea
F
By default a JTextArea does not have any
scroll bars. To add scroll bars, we place a
JTextArea in a JScrollPane object.
JTextArea
textArea
= new JTextArea();
. . .
JScrollPane scrollText = new JScrollPane(textArea);
. . .
contentPane.add(scrollText);
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 32
With Scroll Bars
F
A sample Ch14TextFrame3 window when a
JScrollPane is used.
Liang, Introduction to Java Programming, Sixth Edition, (c) 2007 Pearson Education, Inc. All
rights reserved.
0-13-222158-6
©The McGraw-Hill Companies, Inc. Permission
required
for reproduction or display.
Chapter 14 - 33