cse 501n fall ‘09 18: java gui (swing) 10 november 2009 nick leidenfrost
TRANSCRIPT
CSE 501NFall ‘0918: Java GUI (Swing)
10 November 2009
Nick Leidenfrost
2
Lecture Outline Lab 7 questions? Application Programming Interfaces (APIs) Java Graphical User Interface basic concepts
Basic classes Layout management
Java Components / Controls Labels Buttons Text boxes Text areas Others
3
Application Programming Interface
Most often referred to by its acronym, API The set of public fields and methods a class
makes available to a programmer A.k.a. a class’s published interface
The API encompasses any interaction that can be made with a module in a program
Simple but important concept (I will probably* ask you to explain this on the final
exam.) (*and by probably, I mean definitely)
4
Graphical User Interface
A.k.a. GUI (goo – ee) Most programs provide a graphical interface for the user
to interact with (duh.)
The benefits of using a GUI are numerous More logical presentation of data More intuitive interaction with the user Without GUIs, we would have no way of displaying silly clip-art (I can’t stand to see you cry, little orange man)
5
Java GUI The Java Library provides two ways of creating
Graphical User Interfaces (GUIs) Abstract Windowing Toolkit (AWT)
Java asks the underlying operating system (OS) to supply the implementation for some graphical elements: buttons, text fields, etc.
Contained in the package java.awt Swing
Graphical elements are implemented internally, with little dependency on OS support
Provides higher levels of functionality Looks more standardized across platforms Contained in the package javax.swing
6
Java GUI
The history of AWT and Swing can provide some insight when working with the libraries
AWT came first Many classes which “support” GUIs, but do not
themselves have graphical representation are contained in AWT These classes are used by Swing classes and are not
duplicated in Swing Many Swing classes with graphical
representation may seem like duplicates, or mirrors of their respective AWT classes
7
Java GUIjava.awt
Component
Container
Window
Frame
javax.swing
JComponent
JWindow
JFrame
What the ??? Why is there no Swing equivalent!?
8
Java GUI JComponent
Extends Component A basic graphical object, e.g., buttons, labels, images, etc.
Container Something that you can place other graphical objects on Is an abstract class.
In the most pure sense of a “Container”, most often we will be using a JPanel A Container is-a Component As the name suggests, a container contains additional graphical objects
(components)
JWindow Represents an application window on your desktop A JWindow is-a JContainer
JFrame A window with a title bar, and buttons to close, minimize and maximize A JFrame is-a JWindow Can put any content inside it
Is-A(G
enerally)
9
JFrame
To create a GUI which creates a window, simply extend the JFrame class
public class MyFrame extends JFrame {
public MyFrame() {super(“My First Frame”);
}
// Other methods
}
10
JContainer
The most common container is the JPanel Think of it as a flat tray on which you can lay out other
components (or containers) You can add components by using the add method You may also remove components from the panel
public void addToPanel (Component c) {JPanel panel = new JPanel();panel.add(c);
}
11
JComponent
There are many types of JComponentFor example, a JButton is a JComponent
public void addButtonToPanel() {JPanel panel = new JPanel();JButton button = new JButton(“Click Me”);panel.add(button);
}
12
Representing Choices in the GUI
Radio buttons JRadioButton
Check boxes JCheckBox
Combo boxes JComboBox
13
Radio Buttons
For a small set of mutually exclusive choices, use radio buttons or a combo box
In a radio button set, only one button can be
selected at a time
When a button is selected, previously selected button in set is automatically turned off
14
Radio Buttons
In previous figure, font sizes are mutually exclusive:
JRadioButton smallButton = new JRadioButton("Small"); JRadioButton mediumButton = new JRadioButton("Medium"); JRadioButton largeButton = new JRadioButton("Large");
// Add radio buttons into a ButtonGroup so that // only one button in group is on at any time ButtonGroup group = new ButtonGroup(); group.add(smallButton); group.add(mediumButton); group.add(largeButton);
15
Radio Buttons Button group does not add buttons to the
container for you It only creates a mutually exclusive relationship
between buttons
You still have to add buttons to the container
ButtonGroup group = new ButtonGroup();
group.add(smallButton);
group.add(mediumButton);
group.add(largeButton);
container.add(smallButton);
container.add(mediumButton);
container.add(largeButton);
16
Radio Buttons isSelected: called to find out if a button is
currently selected or not if
To set a default, call setSelected(true) on a radio button in group before making the enclosing frame visible
if (largeButton.isSelected()) size = LARGE_SIZE;
17
Check Boxes
Two states: checked and unchecked Use one checkbox for a binary choice
(or a boolean choice: yes / no, on / off, true / false)
Use a group of check boxes when one selection does not exclude another
Example: "bold" and "italic" in previous figure
18
Check Boxes
Construct by giving the name in the constructor:
Don't place into a button group
JCheckBox italicCheckBox = new JCheckBox("Italic");
19
Combo Boxes
For a large set of choices, use a combo box Uses less space than radio buttons
"Combo": combination of a list and a text field The text field displays the name of the
current selection
20
Combo Boxes
Figure 4:An Open Combo Box
21
Combo Boxes
If combo box is editable, user can type own selection Specified with setEditable method
Add strings with addItem method:
JComboBox fontCombo = new JComboBox(); fontCombo.addItem("Serif"); fontCombo.addItem("Sans Serif"); . . .
22
Combo Boxes
Get user selection with getSelectedItem (return type is Object)
Select an item programmatically with setSelectedItem
String selectedString =
(String) fontCombo.getSelectedItem();
23
Borders
Place a border around a panel to group its contents visually
EtchedBorder: three-dimensional etched effect
Can add a border to any component, but most commonly to panels:
Jpanel panel = new JPanel ();panel.setBOrder(new EtchedBorder ());
Continued…
24
Borders
TitledBorder: a border with a title
panel.setBorder(new TitledBorder(new EtchedBorder(), “Font Style”));
25
Menus A frame can contain a menu bar The menu bar contains menus A menu contains submenus and menu items
Menu Bar
File
Menu
Menu Items
New
Close
Open
Menu Items
Sub Menu (really just a Menu inside a Menu)
Open Recent
26
Menus Create Menu Bars with the JMenuBar class Create Menus with JMenu class Create Menu Items with JMenuItem class
JMenuBar
File
New
Close
Open
Open Recent
JMenuItem
JMenu
JMenuItem
JMenu
28
Text Areas Use a JTextArea to show multiple lines of text You can specify the number of rows and columns:
setText: to set the text of a text field or text area append: to add text to the end of a text area
final int ROWS = 10; final int COLUMNS = 30; JTextArea textArea = new JTextArea(ROWS, COLUMNS);
29
Text Areas
Use newline characters to separate lines:
To use for display purposes only: (do not let users edit the Text Area)
textArea.append(account.getBalance() + "\n");
textArea.setEditable(false); // program can call setText and append to change it
30
Text Areas
31
Scrolling with JScrollPane
To add scroll bars to a text area, or any component:
JTextArea textArea = new JTextArea(ROWS, COLUMNS); JScrollPane scrollPane = new JScrollPane(textArea);
32
Text Field
Input a single line of text Can set it to be editable or not Can obtain the text using the getText()
methodMy First GUI
Submit
34
What else?
Swing offers many more classes and options to tweak the look and feelExplore using APIs in Javadoc onlineGreat tutorialsAnything in the javax.swing package is fair
game
35
Layout Management
By default, we have had very limited control over how components are positioned When we used a panel, it arranged the
components from the left to the right
36
Layout Management Each Container has a layout manager that directs the
arrangement of its components
Three useful layout managers: BorderLayout GridLayout GridBagLayout
Layout managers are part of the java.awt package (although they affect display, they themselves have no graphical
representation)
37
Layout Management
By default, JPanel places components from left to right and starts a new row when needed
Panel layout carried out by FlowLayout layout manager
Can set other layout managers
panel.setLayout(new BorderLayout());
38
Border Layout
Border layout groups container into five areas: center, north, west, south and east
39
Border Layout
Default layout manager for a frame (technically, the frame's content pane)
When adding a component, specify the position like this:
Expands each component to fill the entire allotted area If that is not desirable, place each component inside a
panel
panel.add(component, BorderLayout.NORTH);
40
Grid Layout
Arranges components in a grid with a fixed number of rows and columns
Resizes each component so that they all have same size
Expands each component to fill the entire allotted area
41
Grid Layout
Add the components, row by row, left to right:
JPanel numberPanel = new JPanel(); numberPanel.setLayout(new GridLayout(4, 3)); numberPanel.add(button1); numberPanel.add(button2); numberPanel.add(button3); numberPanel.add(button4); . . .
42
Grid Layout
43
Grid Bag Layout Tabular arrangement
of components Columns can have
different sizes Components can span
multiple columns Quite complex to use
Will not cover or assign in labs
If you are a masochist, this is the layout manager for you!
44
Grid Bag Layout
Fortunately, you can create acceptable-looking layouts by nesting panels Give each panel an appropriate layout
manager Panels don’t have visible borders Use as many panels as needed to organize
components
45
Example
Expanding the simple GUI Next time: How do we make the GUI come
alive?
46
Prompting a User for Input
A graphical application can obtain input by displaying a JOptionPane
The showInputDialog method displays a prompt and waits for user input
The showInputDialog method returns the string that the user typed
String input = JOptionPane.showInputDialog("Enter x");double x = Double.parseDouble(input);
47
Reading Text Input
48
Colors
Standard colors Color.BLUE, Color.RED, Color.PINK etc.
Specify red, green, blue between 0.0F and 1.0F Color magenta = new Color(1.0F, 0.0F, 1.0F); // F = float
Specify RGB values between 0 and 255 int
Color c = new Color(255, 0, 0);
49
Conclusion
Questions? I’ll be in lab now until 6:45