Core Java

User Interface Components with Swing

Slide navigation: Forward with space bar, → arrow key, or PgDn. Backwards with ← or PgUp.

Understand how Swing uses the model-view-controller design pattern

The Model-View-Controller Pattern

• A user interface component has three characteristics:
  • Content (current selected value, entered text, ...)
  • Visual appearance (color, size, ...)
  • Behavior (reaction to events)
• Three classes:
  • Model is pure data with no visual appearance.
  • View displays the data.
    
  • Controller handles AWT events.
• With JButton: ButtonModel, BasicButtonUI, ButtonUIListener
• Programmers need to know about the model with complex components (such as lists, trees, or tables).

Be able to arrange user interface components in a window

Layout Managers

• In Swing, you lay out user interfaces programmatically.
  • No declarative layout.
  • IDEs provide visual GUI builders.
• Container components have layout managers.
• Default for JPanel is FlowLayout.
• Can override default layout manager:

  panel.setLayout(new GridLayout(4, 4));

Border Layout

• Default for the content pane of a JFrame.
• Five named areas:

  frame.add(panel, BorderLayout.NORTH);

• Components grow to fill the entire area.
• Caution: Don't put a button directly into an area.
• Put buttons into a JPanel, and add the panel.

Grid Layout

• Grid layout arranges all components in rows and columns:

  panel.setLayout(new GridLayout(4, 4));
  panel.add(new JButton("1"));
  panel.add(new JButton("2"));
  

• Components grow to fit the entire cell.
• If row or column count is zero, an arbitrary number of components can be added:

  toolbar.setLayout(new GridLayout(1, 0));
  

• Can achieve simple layouts by nesting panels with border layout, flow layout, grid layout.

calculator

Process text input

Text Fields

• Construct JTextField with default text and size:

  JTextField textField = new JTextField("Default input", 20);

• Read user input:

  String input = textField.getText();
  

• Use a JPasswordField to mask user input. The input is returned as a char[] array:

  char[] input = passwordField.getPassword();
  // Overwrite contents when you are done with it
  

• Use labels to label input fields:

  JLabel label = new JLabel("Password: ", JLabel.RIGHT);
  

• Tip: Label text can contain HTML for markup.

Text Areas

• Construct JTextArea with number of rows and columns:

  textArea = new JTextArea(8, 40); // 8 lines of 40 columns each
  

• Call getText/setText to read and write contents.
• Enable line wrapping:

  textArea.setLineWrap(true); // long lines are wrapped

• Or enclose in scroll pane:

  textArea = new JTextArea(8, 40);
  JScrollPane scrollPane = new JScrollPane(textArea);
  // Add scrollPane to container
  

text

Present choices in a user interface

Check Boxes

• Provide label in constructor:

  boldBox = new JCheckBox("Bold");

• Checkbox can be unchecked or checked.
• Call isSelected/setSelected to read/write state:

  boldBox.setSelected(true);
  

• Install an action listener:

  boldBox.addActionListener(event ->
  {
     if (boldBox.isSelected()) . . .
  })

checkBox

Radio Buttons

• Use radio buttons for choosing one of several options.
• Buttons must be inside a ButtonGroup:

  ButtonGroup group = new ButtonGroup();
  JRadioButton smallButton = new JRadioButton("Small", false);
  group.add(smallButton);
  JRadioButton mediumButton = new JRadioButton("Medium", true);
  group.add(mediumButton);
  

• Button group only controls the behavior. For layout, add radio buttons to a panel.
• Add action listener to each button. It is called when the option is selected.

  smallButton.addActionListener(event -> label.setFont(new Font("Serif", Font.PLAIN, 8)));
  

• Note: There is no convenient way to get the currently selected button from the ButtonGroup.

radioButton

Borders

• Usually want to put button groups inside a panel with a border.
• Can apply a border to any JComponent.
• Can apply multiple decorations, like this:

  Border etched = BorderFactory.createEtchedBorder();
  Border titled = BorderFactory.createTitledBorder(etched, "A Title");
  panel.setBorder(titled);

border

Combo Boxes

• Use combo boxes when there are more than a handful of choices.
• Call setEditable to allow editing of the options.
  • A combo box is a combination of a text field and a list of choices.
• JComboBox is a generic class: JComboBox<String>, JComboBox<Integer>.
• Get the selected item like this:

  JComboBox<String> faceCombo = . . .;
  Object item = faceCombo.getSelectedItem();
  String item = faceCombo.getItemAt(combo.getSelectedIndex()); // if not editable
  

• An ActionEvent is fired when an item is selected:

  faceCombo.addActionListener(event ->
     label.setFont(new Font(
        comboBox.getItemAt(faceCombo.getSelectedIndex()), Font.PLAIN, DEFAULT_SIZE)));

comboBox

Sliders

• Sliders offer a choice from a continuum of values:

  JSlider slider = new JSlider(min, max, initialValue);

• Capture slider change with a change listener:

  ChangeListener listener = event ->
  {
     JSlider slider = (JSlider) event.getSource();
     int value = slider.getValue();
     . . .
  };
  

• Can show slider ticks:

  slider.setMajorTickSpacing(20);
  slider.setMinorTickSpacing(5);
  slider.setPaintTicks(true);
  slider.setPaintLabels(true);
  

• Can supply tick labels that are arbitrary components:

  Hashtable<Integer, Component> labelTable = new Hashtable<>();
  labelTable.put(0, new JLabel("A"))
  . . .
  slider.setLabelTable(labelTable);
  

slider

Implement menus and toolbars

Menus

• Menu terminology:
  • Menu bar = Bar of top-level menus.
  • Menu = Rectangle with menu items and submenus.
  • Menu item = Selection resulting in an action.
• Add a menu bar to the frame:

  JMenuBar menuBar = new JMenuBar();
  frame.setJMenuBar(menuBar);

• Add menus to the menu bar:

  JMenu editMenu = new JMenu("Edit");
  menuBar.add(editMenu);

• Add menu items, separators and submenus to the menu:

  JMenuItem pasteItem = new JMenuItem("Paste");
  editMenu.add(pasteItem);
  editMenu.addSeparator();
  JMenu optionsMenu = . . .; // a submenu
  editMenu.add(optionsMenu);

Menu Item Actions

• When the user selects a menu item, an action event occurs:

  pasteItem.addActionListener(event -> . . .);

• Use Action objects to describe actions that can be triggered by menus, toolbar buttons and keystrokes:

  Action exitAction = new AbstractAction("Exit") // menu item text goes here
     {
        public void actionPerformed(ActionEvent event)
        {
           System.exit(0);
        }
     };
  JMenuItem exitItem = fileMenu.add(exitAction);
  

Special Menu Items

• Add icon to menu item:

  JMenuItem cutItem = new JMenuItem("Cut", new ImageIcon("cut.gif"));
  

• Or better, add the icon to the Action.
• Check box in menu item:

  JCheckBoxMenuItem readonlyItem = new JCheckBoxMenuItem("Read-only");

• Radio buttons in menu items:

  ButtonGroup group = new ButtonGroup();
  JRadioButtonMenuItem insertItem = new JRadioButtonMenuItem("Insert");
  insertItem.setSelected(true);
  JRadioButtonMenuItem overtypeItem = new JRadioButtonMenuItem("Overtype");
  group.add(insertItem);
  group.add(overtypeItem);
  optionsMenu.add(insertItem);
  optionsMenu.add(overtypeItem);

Pop-Up Menus

• Create a menu with items as usual, but this time with a JPopupMenu on the top level:

  JPopupMenu popup = new JPopupMenu();
  JMenuItem item = new JMenuItem("Cut");
  popup.add(item);
  . . .
  

• Pop up the menu when the right mouse button is clicked on a component:

  component.setComponentPopupMenu(popup);

Keyboard Mnemonics and Accelerators

• Mnemonic = Underlined character in menu:

  aboutAction.putValue(Action.MNEMONIC_KEY, new Integer('A'));

• Or use the setMnemonic method:

  JMenu helpMenu = new JMenu("Help");
  helpMenu.setMnemonic('H');

• Accelerator key = Key that directly selects the action:

  openItem.setAccelerator(KeyStroke.getKeyStroke("ctrl O"));

• Accelerators are automatically displayed:
  

Enabling and Disabling Menu Items

• Can temporarily disable a menu item:

  saveItem.setEnabled(false);

• Disabled items are grayed out:
  

menu

Toolbars

• Toolbar = Button bar for quick access to common operations.
• User can move toolbars around or detach them.
• Add components to the toolbar:

  JToolBar bar = new JToolBar();
  bar.add(blueButton);
  bar.add(yellowAction); // Can also add Action objects
  bar.addSeparator();

• Add the toolbar to the frame:

  frame.add(bar, BorderLayout.NORTH);

• Add tooltip:

  blueButton.setToolTipText("Blue");
  yellowAction.putValue(Action.SHORT_DESCRIPTION, "Yellow");
  

toolBar

Solve complex layout management tasks

The Grid Bag Layout

• Like HTML table with cells that can span multiple rows and columns.
• Set the layout manager:

  GridBagLayout layout = new GridBagLayout();
  panel.setLayout(layout);

• For each component, set the constraints:

  GridBagConstraints constraints = new GridBagConstraints();
  constraints.weightx = 100;
  constraints.weighty = 100;
  constraints.gridx = 0;
  constraints.gridy = 2;
  constraints.gridwidth = 2;
  constraints.gridheight = 1;
  panel.add(component, constraints);
  

Grid Bag Constraints

• gridx, gridy, gridwidth, gridheight: Location and spans in the grid.
• weightx, weighty: Set to 100 if size should grow, or to 0 if size should stay constant when form is resized.
• fill, anchor: If a component shouldn't fill the entire cell, then use GridBagConstraints constants to specify fill mode and anchor position.
• insets: spacing around the component.
• ipadx, ipady: added to the minimum size of the component.
• Check out the GBC helper class in the sample code.

gridbag

Custom Layout Managers

• You can define your own layout managers.
• For good clean fun, here is one that lays out components along a circle or ellipse.
• Implement the LayoutManger interface and override these methods:

  void addLayoutComponent(String s, Component c);
  void removeLayoutComponent(Component c);
  Dimension preferredLayoutSize(Container parent);
  Dimension minimumLayoutSize(Container parent);
  void layoutContainer(Container parent);

circleLayout

Use and implement dialog boxes

Dialog Boxes

• Dialog box pops up from application window.
• Modal dialog: Must be completed before other windows become active again.
• Modeless dialog: Stays in place for as long as needed.
• Standard dialogs:
  • Option pane
  • File chooser
• In custom dialogs, you need to transfer information between the dialog and the application.

Option Dialogs

• JOptionPane class has ready-made dialogs for a single piece of information:
  • showMessageDialog shows a message.
  • showConfirmDialog gets a confirmation such as OK/Cancel.
  • showOptionDialog makes user select from a set of options.
  • showInputDialog gets an input string.
• Follow this recipe:
  1. Choose the dialog type (message, confirm, option, input).
  2. Choose an icon (error, information, warning, question, none, or custom)..
  3. Choose a message (string, icon, custom component, or a stack of them).
  4. For a confirmation dialog, choose the option type (default, Yes/No, Yes/No/Cancel, or OK/Cancel).
  5. For an option dialog, choose the options (strings, icons, or custom components) and the default option.
  6. For an input dialog, choose between a text field and a combo box.
• Example:

  int selection = JOptionPane.showConfirmDialog(parent, "Message", "Title",
     JOptionPane.OK_CANCEL_OPTION, JOptionPane.QUESTION_MESSAGE);

optionDialog

Creating Dialogs

• Dialog extends the JDialog class:

  public AboutDialog extends JDialog
  {
     public AboutDialog(JFrame owner)
     {
        super(owner, "About DialogTest", true);
        add(new JLabel(
           "<html><h1><i>Core Java</i></h1><hr>By Cay Horstmann</html>"),
           BorderLayout.CENTER);
        . . .
        setSize(250, 150);
     }
  }

• To display the dialog:

  JDialog dialog = new AboutDialog(this);
  dialog.setVisible(true);

• When the user selects OK, hide the dialog:

  ok.addActionListener(event -> setVisible(false));

dialog

Data Exchange

• Normally, dialog gets complex user input.
• Data needs to be transmitted back to the application.
• Make a class for the data:

  public class User { . . .}
  

• Make methods for setting, getting data:

  public class PasswordChooser 
  {
     public void setUser(User u) { . . . }
     public User getUser() { . . . }
     . . .
  }
  

• Pop up the dialog:

  public boolean showDialog()
  {
     JDialog dialog = new JDialog(frame, true /* modal */);
     dialog.add(panel);
     dialog.pack();
     dialog.setVisible(true);
  }

dataExchange

File Dialogs

• Often want to ask user for a file name.
• Make a JFileChooser object and set the directory:

  JFileChooser chooser = new JFileChooser();
  chooser.setCurrentDirectory(new File("."));
  

• If you want to restrict the files, set the file filter:

  chooser.setFileFilter(new FileNameExtensionFilter("Image files", "gif", "jpg"));

• Pop up the dialog:

  int result = chooser.showOpenDialog(parent);
  int result = chooser.showSaveDialog(parent);
  

• If the result is JFileChooser.APPROVE_OPTION, get the file:

  File filename = chooser.getSelectedFile();

fileChooser