CSC 161 Week 2 Lab 1: Layout Managers and Action Listeners

The GridLayout

The GridLayout manager lays out components in a two-dimensional rectangular grid of cells. When you create a GridLayout, you have to specify the number of rows and columns for the grid like this:

 GridLayout layout = new GridLayout(2, 3);

This will create a grid with 2 rows and three columns. In general, the constructor for GridLayout takes two integer parameters:

GridLayout(int rows, int cols) 

When you have a container with a GridLayout, the layout manager will place any components added into as as many rows as you specify, dividing the number of components added equally among the rows. The last row may not have as many components as the other rows if the number of components added is not evenly divisible by the number of rows.

We can try out the GridLayout by creating an array of JButton and adding them to a frame with GridLayout manager. First, create a project called GridLayoutProject, and in the program, create a JFrame called myFrame. Set its default close operation, and set it layout to a GridLayout with 3 rows and 2 columns.

 myFrame.setLayout(new GridLayout(3, 2));

Now we want to add 6 buttons to the frame. We will use 1, 2, 3, 4, 5, 6 for the text on the buttons. We can do this by setting the text of the k'th button to the string value of the number (k+1). So the code for adding the 6 buttons will look like this:

       JButton [] buttons = new JButton[6];
       for (int k = 0; k < buttons.length; k++)
          //create the button in position k
          buttons[k] = new JButton(String.valueOf(k+1));
          //add the button to the frame

Use the above code to add some buttons to a JFrame with a GridLayout. Run the program. Change the number of buttons from 6 to 7, run the program, and see what happens.

Using JOptionPane

The JOptionPane class has several methods that show dialog boxes that allow you do simple interactions with users. The simplest of these methods is the static method

  void showMessageDialog(Component parentComponent, Object message)

If you make the call shown in the method below

    public static void main(String[] args)
      JOptionPane.showMessageDialog(null, "Hello Message dialog!");

you get a message dialog box as shown on the right. Usually, you call showMessageDialog when you want the dialog box to display some object (the message) on top of some user interface component (typically a JFrame). If there is no user interface component you want the message dialog to be displayed on top of, you pass null for the first parameter.

You need to import javax.swing.*

to use JOptionPane.

Using ActionListeners

Now we will write a GUI program that uses an ActionListener to respond to a button press. When the button is pressed, the attached ActionListener will display a message dialog as shown below:

Follow the following steps to create the program with the ActionListener.

  1. Click on the File menu in Netbeans, Select New Project and create a new project named ListenerProject.
  2. Modify the main method supplied to you by Netbeans to create a JFrame named myFrame.
  3. Set the size of the JFrame to 300 by 100, and set the JFrame to have a FlowLayout layout manager. Set the default close operation as usual.
  4. Create a button called myButton with text Press Me! and add it to the frame.
  5. Add code to make the frame visible.

Run the program to make sure everything is Ok. You should see a JFrame as the one below:

Adding an ActionListener

Follow the following steps to create an ActionListener and add it to the button:

Define a class called MyListener to use as the listener and have the class implement the ActionListener interface:

 class MyListener implements ActionListener

At this point you see a little red bulb and a red squilly line indicating that something is wrong.

Double-click on the little red bulb. A little context menu will appear.

Click on the import java.awt.ActionListener item. This will automatically add an an import statement for the ActionListener interface. After that, you will see a yellow light bulb

Click on the Implement All Abstract Methods. When you do that, Netbeans will insert an actionPerformed method into your class:

 class MyListener implements ActionListener
    public void actionPerformed(ActionEvent e)
        throw new UnsupportedOperationException("Not supported yet.");

Delete the throw statement inside the method, and replace it a JOptionPane showMessageDialog to print the message.

Then next step is to add an ActionListener object to the button you created before. Carry out this step and run the program.

What to Hand in

Write a program that has 6 buttons in GridLayout in a frame as you did at the beginning of this lab. Create a single actionListener object that you add to all the buttons. When a user clicks on any of the 6 buttons, the action listener should display a message dialog box identifying which button was clicked.

How to Submit

When you have the program working correctly, use Windows explorer to find the folder that contains your project. Right click on the folder, and select Send to Zip Folder. Once the zip folder is created, right-click on it, and select Send to GroupWise Recipient. Email the zipped up folder to the instructor (type in Muganda, Godfrey). Make sure the email goes to Muganda, Godfrey, not Muganda, Grace.

This lab is due tomorrow at midnight. Please read the late policy on the syllabus.