Creating User Interfaces

versjon 2002-04-17Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal.

ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002 The Research Foundation TISIP, http://tisip.no/engelsk/

Chapter 15

Java the UML Wayhttp://www.tisip.no/JavaTheUmlWay/

Creating User Interfaces

Menues page 2-3Tollbars page 4Dialog windows, introduction page 5-9An ordinary OK-Cancel dialog page 10Trasferring data between parent window

and dialog window page 11-12The renovation case, a new GUI page 13GridBagLayout as layout manager page 14-16Is it possible to control the size of the components? page 17The GUI component JTable page 18-19The renovation case GUI page 20

Only to be used in connection with the book "Java the UML Way", by Else Lervik and Vegard B. Havdal.ISBN 0-470-84386-1, John Wiley & Sons Ltd 2002 The Research Foundation TISIP, http://tisip.no/engelsk/

Chapter 15, page 2

Menus in General

You’ll find MenuLookDemo via JMenu(How to use Menus) in the online API documentation.


Chapter 15, page 3

Menus in this book

class WindowWithMenu extends JFrame { private Container guiContainer; public WindowWithMenu() { setTitle("MenuTest"); setDefaultCloseOperation(

JFrame.EXIT_ON_CLOSE); guiContainer = getContentPane(); MenuListener theListener = new MenuListener(); JMenu theMenu = new JMenu("Color"); JMenuItem menuItem = new JMenuItem("Yellow"); theMenu.add(menuItem); menuItem.addActionListener(theListener); //.. the same for red and blue… JMenuBar menuBar = new JMenuBar(); menuBar.add(theMenu); setJMenuBar(menuBar); } private class MenuListener implements ActionListener { public void actionPerformed(ActionEvent event) { String command = event.getActionCommand(); if (command.equals("Yellow"))

guiContainer.setBackground(Color.yellow); else if (command.equals("Red"))

guiContainer.setBackground(Color.red); else guiContainer.setBackground(Color.blue); } }}

A menu choice generates an ActionEvent.

Solve problem 1, page 457.

JMenuBarJMenu

JMenuItem


Chapter 15, page 4

Toolbars

class WindowWithToolbar extends JFrame { private Container guiContainer; private JButton yellowButton; private JButton redButton; private JButton blueButton; public WindowWithToolbar(){ setTitle("Toolbar Test"); setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); guiContainer = getContentPane(); ButtonListener theListener = new ButtonListener(); JToolBar toolbar = new JToolBar(); Icon icon = new ImageIcon("yellow.gif"); yellowButton = new JButton(icon); yellowButton.addActionListener(theListener); toolbar.add(yellowButton); // ….the same for red and blue… guiContainer.add(toolbar, BorderLayout.NORTH); } private class ButtonListener implements ActionListener { public void actionPerformed(ActionEvent event) { JButton button = (JButton) event.getSource(); if (button == yellowButton) guiContainer.setBackground(Color.yellow); else if (button == redButton) guiContainer.setBackground(Color.red); else guiContainer.setBackground(Color.blue); } }}

JToolBarJButton

The toolbar is dragged awayfrom its ordinary place,becoming a window of its own

The toolbar in its ordinary place


Chapter 15, page 5

Dialog Windows, an Example

The new name is enteredand sent to the primary window

The name is edited, and the resultis sent to the primary window


Chapter 15, page 6

Dialog Windows

• A dialog window is a secondary window, that means it should always be connected to a parent window.

• A modal dialog window prevents the user access to other windows as long as this window is open.

• A nonmodal window is more practical to the user, but it demands more of the programmer because more than one window have to be kept updated synchronously.

• In this book we only look at modal dialog windows.


Chapter 15, page 7

The Most Basic Dialog Window

showDialog()

1

2


Chapter 15, page 8

The Message Exchange Between the Parent Window and the Dialog Window

System.out

parentWindow

buttonListener

push

buttondialogBox

buttonListenerokButton“client”

actionPerformed()

showDialog()

pushactionPerformed()

setVisible(true)

setVisible(false)

println(”OK pressed…”)

setVisible(true)1

2

3

4

5

6

7

8

9

10

in the parent window in the dialogbox

no return until the messagesetVisible(false) is sent to

thedialog box


Chapter 15, page 9

Summary: Making a Modal Dialog Window

1. A dialog window is always a subclass of JDialog. What we have to provide is a constructor that calls one of the JDialog’s constructors with modal parameter. If we do not do this, the constructor with empty parameter list will be used. And that constructor creates a nonmodal dialog window. The argument to the modal parameter has to be true, for example:super(parent, "Minidialog", true);

2. Each individual dialog has a method with the name showDialog() (or something similar). We find the call setVisible(true) inside the method.

3. All activity in the dialog has to end with the call setVisible(false). With this, the dialog is closed, and the program then goes on to the first statement after setVisible(true).

4. Let the dialog window be an instance variable in the parent window.

Show program listing 15.3, pp. 464-466.

Solve the problem, page 475.


Chapter 15, page 10

An Ordinary OK Cancel Dialog• ”OK” means that what the user has done in the window should apply.• ”Cancel” means that what the user has done in the window should not

apply.• We make a class describing a dialog with these two buttons, and then

our other dialogs may be subclasses of this class.• The class is named MyDialog and put in the myLibrary package.• Other functionality:

– The class has a method okData(). A subclass may have its own version of this method. If the user presses OK, it will not be accepted unless okData() returns true.

– If the user tries to close the window by pressing in the upper right corner, she will get a question ”Do you want input data to be saved?”. If the user answers yes, the window is closed only if okData() returns true.

– Acceleration keys are linked to the buttons. The Enter key is linked to the OK-button (requires the OK button having focus). The Escape key is linked to the Cancel button (independent of focus).



Chapter 15, page 11

Transferring Data Between a Parent Window and a Dialog Window

Johnson, John

Johnson, John Peter


Chapter 15, page 12

Testing PersonDialog


ParentWindow extends JFrame

PersonDialog extends MyDialog

JOptionPane,this box is displayed if user

clicks the X in the upper right corner


Chapter 15, page 13

The Last Version of the Renovation Case- the Classes From Chapter 12 With New GUI

JTableJList


Chapter 15, page 14

GridBagLayout as Layout Manager

• GridBagLayout is the most general of all the layout managers, and often the only applicable.

• It’s not suited for the trial end error method.

• To use it you have to do a careful planning. Use pen and paper!

• The manager has many parameters, and an error may give unpredictable results.

• First, create a sketch of the window:– Divide the window into rectangular cells by using vertical and horizontal

lines.

– Not more than one GUI component in every cell.

– A GUI component may cover more than one cell.

• This sketch makes it possible to state the requirements of every component.


Chapter 15, page 15

An Example

toolbar

table on the left

list onthe right

backgr. text at the ottom

text box at the bottom

gridx 0 0 3 1 2

gridy 0 1 1 2 2

gridwidth 4 3 1 1 1

gridheight 1 1 1 1 1

fill NONE BOTH BOTH NONE HORIZONTAL

anchor WEST CENTER CENTER EAST WEST


Chapter 15, page 16

The Example, cont.

Container guiContainer = getContentPane();guiContainer.setLayout(new GridBagLayout()); // don’t forget this!GridBagConstraints constraints = new GridBagConstraints();

/* The following variables are fixed for all components */constraints.insets = new Insets(5, 5, 5, 5); // space around and between the componentsconstraints.weightx = 0.5; constraints.weighty = 0.5;

/* Then each component has to be handled according to the table */

/* The Toolbar */constraints.gridx = 0;constraints.gridy = 0;constraints.gridwidth = 4;constraints.gridheight = 1;constraints.fill = GridBagConstraints.NONE;constraints.anchor = GridBagConstraints.WEST;guiContainer.add(toolbar, constraints);// ..and so on, for all the components


Chapter 15, page 17

Is It Possible to Control the Size of the GUI Components?

• What about the setSize() method in the Component class? – It’s inherited by all the GUI components.– We’ve used it to set the size of windows.– For other components, the setSize() method is only effective if we don’t

use any layout manager at all. Then the components are laid out according to given pixel values.

• What about the setMaximumSize(), setMinimumSize(), and setPreferredSize() methods in the JComponent class?– They are all inherited by every Swing component.– BorderLayout and GridLayout do not consider any of the wishes set up in

these methods.– FlowLayout and GridBagLayout consider a component’s ”preferred size”.– BoxLayout (see the online API documentation) considers all these wishes. – All these methods take as argument an instance of the Dimension class.

This class has the following constructor:• Dimension(int width, int height).

– An example: list.setPreferredSize(new Dimension(500, 300))


Chapter 15, page 18

The GUI Component JTable

• A class with a lot of possibilities. We limit ourselves to the following:– The table has a fixed number of columns with fixed column names.

– The user can adjust the width of the individual columns in the table. This results in the other columns becoming narrower.

– The user can’t adjust the size of the table (the overall width and height of the table).

– The user can’t change the data in the table.

– The program can insert and delete rows in the table. In order to change the data, the program can delete a row and insert a new row in its place.

– The user can select individual rows in the table. The program determines whether or not multiple rows can be selected, just as with lists.

– The program handles the selection by having the user push a pushbutton, not by listening to row selections.


Chapter 15, page 19

The ”Data Model” Behind

• If the contents of the table are to be changed, we have to update the ”data model” in the same way as we did for lists.

– Repetition:DefaulListModel data = new DefaultlistModel();JList list = new JList(data);data.add(object); // the toString() method is used when presenting the data

• For tables, we use the DefaultTableModel with a little correction:– The default model allows the user to edit the cells in the table; our programs do not

handle this.– We create a subclass of the DefaultTableModel class where this is prevented:

package myLibrary;import javax.swing.table.*;public class MyTableModel extends DefaultTableModel { public MyTableModel(String[] columnNames) { super(columnNames, 0); } public boolean isCellEditable(int row, int column) { return false; }}


Chapter 15, page 20

GUI For the Renovation Case

• The file named Dialogs.java:– One dialog window for each of the main objects in our problem:

• SurfaceDialog, PaintDialog, WallpaperDialog and FlooringDialog.

• The file named Constants.java:– An interface with named constants used in the different windows.

– Examples are commands, menu items, and text field lengths.

– Classes which need these constants implements the interface.

• The file named RenovationChap15.java:– The primary window

– main()

Show program listings 15.7, 15.8 and 15.9, from page 484 and so on.

Creating User Interfaces

Documents

Transcript of Creating User Interfaces