Big Java / Java Concepts Lab 14

Buttons

1.

All problems in this lab are based on the HelloTester program:


/** File HelloTester.java */
import javax.swing.JFrame;

public class HelloTester
{
    public static void main(String args[])
    {
        JFrame frame = new HelloFrame();
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.setTitle("HelloTester");
        frame.setVisible(true);
    }
}

/** File HelloFrame.java */
import javax.swing.JFrame;
import javax.swing.JLabel;
import java.awt.BorderLayout;
import java.awt.Font;

public class HelloFrame extends JFrame
{
    public HelloFrame()
    {
        message = "Hello, World!";
        label = new JLabel(message);
        label.setFont(new Font("serif", Font.PLAIN, DEFAULT_SIZE));
        add(label, BorderLayout.CENTER);

        setSize(FRAME_WIDTH, FRAME_HEIGHT);
    }

    private String message;
    private JLabel label;

    private static int FRAME_WIDTH = 300;
    private static int FRAME_HEIGHT = 300;
    private static int DEFAULT_SIZE = 20;
}

In this problem, you need to add two buttons to the bottom of the frame, like this:

Follow these steps:

1. Make two instance variables of the class JButton:

private JButton smallerButton;
private JButton largerButton;

2. Create a method called createSouthPanel and place the following two lines inside the method to initialize the variables with JButton objects:

smallerButton = new JButton("Smaller");
largerButton = new JButton("Larger");

3. Place the buttons into a panel:

JPanel southPanel = new JPanel();
southPanel.add(smallerButton);

southPanel.add(largerButton);

4. Add the south panel to the frame:

add(southPanel, BorderLayout.SOUTH);

5. In the frame constructor, call the method createSouthPanel:

createSouthPanel();

Make these changes in your program. Run the program to confirm that the buttons appear.

(a) What happens when you click the buttons? Why?

(b) Provide the source code for your createSouthPanel method.


2.

Next, you need to connect the buttons to actions. For each button, carry out these steps:

1. Create a class that implements the ActionListener interface and override the actionPerformed method.

2. Make an object of that class.

3. Install that object as the action listener of the button.

Perform these steps one at a time.

When the "Larger" button is clicked, we want to increase the font size by 25 percent. When the "Smaller" button is clicked, we want to decrease it. To avoid integer rounding errors, keep a floating-point instance variable fontSizeFactor that is initialized with 1. Clicking on the buttons multiplies by 1.25 or 0.8 (because 0.8 = 1/ 1.25).

private double fontSizeFactor = 1;

Here is an appropriate action listener for the "Larger" button.

class LargerFontListener implements ActionListener
{
   public void actionPerformed(ActionEvent event)
   {
      fontSizeFactor = 1.25 * fontSizeFactor;
      label.setFont(new Font("serif", Font.PLAIN,
            (int) (DEFAULT_SIZE * fontSizeFactor)));
      label.repaint();
   }
}

Place this class inside the createSouthPanel method, since actionPerformed needs to access the panel and fontSizeFactor variables.

To connect it to the "Larger" button, you need to create an object of this class and set it as an action listener of the button. Place the following instructions into the frame constructor:

ActionListener largerListener = new LargerFontListener();
largerButton.addActionListener(largerListener);

Add the code, compile the program, and run it. Don't add the code for the "Smaller" button yet.

Click on both buttons several times. What happens?


3.

Repeat the steps above for the "Smaller" button. Make an action listener class and add an instance of that class as an action listener of the smallerButton. Run your program. Both buttons should work.

Provide the complete code for the createSouthPanel method.

Layout Management

4.

In the preceding program, the buttons were placed on the bottom of the frame, next to each other. Change your program so that they are placed on the right of the frame, one above the other other.

What is the code for the HelloFrame class now?

Menus

5.

In this program, we will use a menu instead of a set of buttons to increase and decrease the font size.

As with buttons, you need to solve two unrelated issues:

  • How to place the menu items
  • How to connect actions to the menu items.

In Java, there is a three-level hierarchy for menus.

  1.   A menu bar is attached to a window.
  2.   The menu bar contains menus, rectangular panels with menu strings inside them.
  3.   Menus contain submenus and menu items.

Only menu items have actions associated with them.

Here are the instructions to build the menu for this program.

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

JMenu fontMenu = new JMenu("Font");
menuBar.add(fontMenu);

JMenuItem largerItem = new JMenuItem("Larger");
fontMenu.add(largerItem);

JMenuItem smallerItem = new JMenuItem("Smaller");
fontMenu.add(smallerItem);

Start again with the HelloFrame class.

Create a method called createMenu, and place these instructions inside this mehtod.

Run your program and check that the menu works. Don't forget to call createMenu from within the constructor. (a) What is the code for your HelloFrame class? (b) What happens when you select a menu item?


6.

Next, you need to attach actions to the menu items. This process is identical to attaching actions to buttons.

Attach the actions to the two menu items and run your program. Check that selecting the menu items respectively increases and decreases the font size.

What is the complete source code for your frame class now?

Combo Boxes

7.

In this exercise, you will see how to offer a user a selection among multiple choices. You can place all choices into a combo box.


To build such a combo box, you add items to it:

final JComboBox comboBox = new JComboBox();
comboBox.addItem("Small");
comboBox.addItem("Medium");
comboBox.addItem("Large");

comboBox.addItem("Extra Large");

Then place the combo box in the south end of the content pane.

add(comboBox, BorderLayout.SOUTH);

Add a createSouthPanel method and paste the lines indicated above inside the method. Try it out. Don't forget to call the createSouthPanel method from within the constructor. Run the program and compare it against the figure.

The program looks different. Why?



8.

The border layout grows all items to their maximum size. To avoid this, enclose the combo box inside a panel, even though it is a single item.

JPanel southPanel = new JPanel();
southPanel.add(comboBox);
add(southPanel, BorderLayout.SOUTH);

Try it out. Add the combo box to the frame of the HelloTester program. Compile and run the program. Pull down the item list of the combo box to see the items.

What happens if you select one of the items?



9.

To activate the combo box, you need to attach an action listener. The actionPerformed method needs to determine which item the user selected.

class ComboListener implements ActionListener
{
   public void actionPerformed(ActionEvent event)
   {
      String item = (String) comboBox.getSelectedItem();
      . . .
   }
}

You need to cast the return value of the getSelectedItem method to a String because it is possible to put other objects, such as icons, into a combo box.

Now you simply set the correct font size, depending on the item string.

int messageSize = DEFAULT_SIZE;
if (item.equals("Small")) { messageSize = SMALL_SIZE; }
else if (item.equals("Medium")) { messageSize = MEDIUM_SIZE; }
else if (item.equals("Large")) { messageSize = LARGE_SIZE; }
else if (item.equals("Extra Large")) { messageSize = EXTRA_LARGE_SIZE; }
label.setFont(new Font("serif", Font.PLAIN, messageSize));
label.repaint();

Define the size constants as follows:

public static final int SMALL_SIZE = 12;
public static final int MEDIUM_SIZE = 18;
public static final int LARGE_SIZE = 24;

public static final int EXTRA_LARGE_SIZE = 36;

Add the combo action listener and try out your program. When you select an item from the combo box, the message should be displayed in the appropriate size.

Provide the complete source code for your createSouthPanel method.


Radio Buttons and Check Boxes

10.

Radio buttons are another way to offer the user a selection among multiple alternatives.



These buttons are called radio buttons because they work like the channel buttons on a radio. When you select a radio button, the previously selected radio button is turned off.

However, radio buttons take up more screen "real estate" than combo boxes and therefore are best used when you need to offer users only a small selection.

Here are the instructions to construct two radio buttons:

helloButton = new JRadioButton("Hello");
goodbyeButton = new JRadioButton("Goodbye")
;

To get the "radio button" effect, where all other buttons are turned off when one of the buttons is clicked, you need to place the buttons in a button group:


ButtonGroup group = new ButtonGroup();
group.add(helloButton);

group.add(goodbyeButton);

Finally, you want to turn the first button on:


helloButton.setSelected(true);

The button group is a logical grouping of the buttons. You still need to physically lay out the buttons on the screen:

JPanel southPanel = new JPanel();
southPanel.add(helloButton);
southPanel.add(goodbyeButton);
add(southPanel, BorderLayout.SOUTH);

Add the two radio buttons to the frame of the HelloTester program. Add a createSouthPanel method, just like you did in the previous problems. (a) What is the code for your HelloFrame class? (b) Run the program. What happens when you click the radio buttons?



11.

Now change the message text when the user clicks a radio button. To assemble the correct text, simply check which button is currently selected.

class MessageListener implements ActionListener
{
   public void actionPerformed(ActionEvent event)
   {
      String message = "";
      if (helloButton.isSelected()) message = "Hello";
      else if (goodbyeButton.isSelected()) message = "Goodbye";
      message = message + ", World!";
      label.setText(message);
   }

}

Note that you can attach the same action object to both buttons.

Add the action listener and attach it to the radio buttons. Run the program. Observe how clicking the buttons changes the message text.

What is the complete source code for your HelloFrame class?



12.

Check boxes are used to allow users to select a single logical alternative, typically of the form "do X" or "do nothing". Here, a check box is used to allow the user to specify whether the word "cruel" should be added to the message text:



Follow these steps to add the check box to the program.

1. Construct the check box.

cruelCheckBox = new JCheckBox("Cruel");

2. Attach the same action listener to the check box and the radio buttons.

cruelCheckBox.addActionListener(listener);

3. Add the check box to the south panel.

southPanel.add(cruelCheckBox);

4. In the actionPerformed method of the MessageAction class, check

if (cruelCheckBox.isSelected()) . . .

Run the program. Observe how clicking the check box changes the message text.

What is the complete source code for your HelloFrame class now?