teaching machines

CS1: Lecture 37 – Chat Continued

December 9, 2019 by . Filed under cs1, fall 2019, lectures.

Dear students,

Today we extend the networked chat application that we started writing last week. Beyond getting it functional, we’ll also give the client a graphical user interface (GUI). Java is one of the few languages that ships with a builtin windowing library.

Dialogs

If your program only prompts the user for simple input, like a confirmation, some text, a selection from a list, or a file, then you can probably get by using just the dialog boxes provided by the classes JOptionPane and JFileChooser.

For our chat client, we want to get the chatter’s user name. JOptionPane has a method showInputDialog for grabbing text from the user, as seen here:

String name = JOptionPane.showInputDialog("What's your screen name?");

It has several other static methods, including showConfirmDialog for a yes-no-cancel interaction and showMessageDialog for showing an alert.

Windows

For more advanced graphical interfaces, we create our own window and place graphical components in it. Java provides a class JFrame that we extend to create a custom window, like so:

public class ChatGuiClient extends JFrame {
  public ChatGuiClient(String username) {
    // ...
  }

  public static void main(String[] args) throws IOException, InterruptedException {
    String name = JOptionPane.showInputDialog("What's your screen name?");
    new ChatGuiClient(name);
  }
}

When we run this code, nothing shows up. We need to explicitly display the window, and there are a few other things we should do too, like set its size and make the application stop when the window closes. Let’s add those calls, either in the constructor or in main.

public ChatGuiClient(String username) throws IOException {
  // ...

  setSize(400, 600);
  setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
  setVisible(true);
}

Now we have a blank window. Let’s fill it with widgets. For our chat client, we want three widgets: a big text box that shows all the messages in chronological order, a small text input for adding a new message, and a send button.

Java’s Swing library ships with most standard interface widgets. It’s worth looking through them to see what all you can do. For the big text box, we can use a JTextArea. After we create it, we need to position it in the window. In the early days of GUIs, we might have treated the window as a Cartesian grid and manually positioned and sized the widget on this grid. The problem with this manual arrangement is that if the window gets resized, we need to go back and reposition and resize our widgets. But then some folks came along and wrote code to automatically do this repositioning and resizing according to some common needs. These automatic arrangers are called layout managers.

A JFrame by default has a BorderLayout arranging its widgets. This layout manager breaks the window up into five cells, one expanding cell in the center and four constrained cells in along the edges. There are several other layout managers with different arrangement strategies. We’ll stick with the default BorderLayout.

Let’s now create our messages box and place it in the center so it expands to fill the window. Probably we don’t want the messages box to be editable.

public ChatGuiClient(String username) throws IOException {
  private JTextArea messagesBox;

  public ChatGuiClient(String username) throws IOException {
    // ...

    messagesBox = new JTextArea();
    messagesBox.setEditable(false);
    add(messagesBox, BorderLayout.CENTER); 

    // ...
  }
}

On the bottom edge of the window, I want a input box and a button. Here’s how I add an input box:

JTextField inputBox = new JTextField();
add(inputBox, BorderLayout.SOUTH);

But it doesn’t expand. I also need a button. Can I put them both in the southern cell?

JTextField inputBox = new JTextField();
add(inputBox, BorderLayout.SOUTH);

JButton sendButton = new JButton("Send");
add(sendButton, BorderLayout.SOUTH);

The answer is no. BorderLayout only allows on component in each cell, and the widgets in the edges don’t automatically expand. What do I do? I create a container widget. Let’s put a JPanel in the southern cell. The JPanel itself will have another BorderLayout managing its widgets, and we can put the input box in its expanding center cell. Like this:

JPanel panel = new JPanel(new BorderLayout());
add(panel, BorderLayout.SOUTH);

JTextField inputBox = new JTextField();
panel.add(inputBox, BorderLayout.CENTER);

JButton sendButton = new JButton("Send");
panel.add(sendButton, BorderLayout.EAST);

The layout is looking pretty good, so let’s make it functional. When the user types in the input box and hits the send button, we need to ship the text up to the server. But how do we write code that gets run when the button is pressed? We have no idea when that will happen.

Most graphical user interface systems manage this by having a separate thread of execution whose sole job is to listen for mouse clicks, window reshaping, and keypresses. This thread will tell us when an event happens and run some code that we register to handle that event. To register a handler, we hand off a method to this thread. How we do this in Java has changed quite a bit in recent years, and we will register our code in the modern way using something called an anonymous function or a lambda. For our chat client, we write this handler for button clicks:

sendButton.addActionListener(e -> {
  out.println(username + ": " + inputBox.getText());
  inputBox.setText("");
});

Down in our receiving thread, we had code like this before:

public void run() {
  while (in.hasNextLine()) {
    String line = in.nextLine();
    System.out.println(line);
  }
  System.exit(0);
}

Instead of echoing to System.out, we want our incoming message to show up in the messages box. We could write this:

messagesBox.append(line + System.lineSeparator());

But we’re not supposed to mess with the widgets outside of the event-handling thread. To schedule this code to run on that thread, we use a lambda and a helper method named invokeLater, like so:

SwingUtilities.invokeLater(() -> {
  messagesBox.append(line + System.lineSeparator());
});

Final Draft of Client

And now we have a barebones but functioning graphical user interface for our chat application!

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.net.Socket;
import java.util.Scanner;

public class ChatGuiClient extends JFrame {
  private Socket socket;
  private PrintWriter out;
  private JTextArea messagesBox;

  public ChatGuiClient(String username) throws IOException {
    socket = new Socket("138.68.15.70", 10001);
    out = new PrintWriter(socket.getOutputStream(), true);

    ReceiveThread serverListener = new ReceiveThread(socket.getInputStream());
    serverListener.start();

    messagesBox = new JTextArea();
    messagesBox.setEditable(false);
    add(messagesBox, BorderLayout.CENTER);

    JPanel panel = new JPanel(new BorderLayout());
    add(panel, BorderLayout.SOUTH);

    JTextField inputBox = new JTextField();
    panel.add(inputBox, BorderLayout.CENTER);

    JButton sendButton = new JButton("Send");
    panel.add(sendButton, BorderLayout.EAST);

    sendButton.addActionListener(e -> {
      out.println(username + ": " + inputBox.getText());
      inputBox.setText("");
    });

    setSize(400, 600);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    setVisible(true);
  }

  public static void main(String[] args) throws IOException, InterruptedException {
    String name = JOptionPane.showInputDialog("What's your screen name?");
    new ChatGuiClient(name);
  }

  class ReceiveThread extends Thread {
    private Scanner in;

    public ReceiveThread(InputStream in) {
      this.in = new Scanner(in);
    }

    public void run() {
      while (in.hasNextLine()) {
        String line = in.nextLine();
        SwingUtilities.invokeLater(() -> {
          messagesBox.append(line + System.lineSeparator());
        });
      }
      System.exit(0);
    }
  }
}

TODO

See you next class!

Sincerely,

P.S. It’s time for a haiku!

Doug demoed the mouse
You won’t believe what followed
A big press release

P.P.S. Here’s the code we wrote together…