GUI components

GUI components

Java has GUI components like those in Grace, though associating actions with components requires a few more steps.

Creating and adding GUI components to the screen

To install and use a GUI component you must:

Declare a variable of the appropriate type and initialize it with the component.
Install it somewhere in the window using a layout manager
If you want your program to react to a use of the component, then you must associate a "listener" with the GUI component and write an appropriate method to perform the action.

Adding graphic user interface (GUI) items to the screen is pretty easy. Here are the steps:

Create the item and initialize it if necessary. E.g.,

      figureMenu = new JComboBox<String>();
      figureMenu.addItem("FramedSquare");
      figureMenu.addItem("FramedCircle");
      figureMenu.addItem("FilledSquare");

Add the items to the window, and validate the pane. E.g.,

      add(figureMenu, BorderLayout.SOUTH);
      add(colorMenu, BorderLayout.NORTH);
      validate();

Let's look at a simplified drawing program to see a few of those steps. DrawingProgram.

First we declare the ComboBox (pop-up menu):

   // The menu determining which kind of object is drawn
   private JComboBox<String> figureMenu;

Then initialize it in the begin method:

   public void begin() {
      // Create menu for selecting figures
      figureMenu = new JComboBox<String>();
      figureMenu.addItem("FramedSquare");
      figureMenu.addItem("FramedCircle");
      figureMenu.addItem("FilledSquare");

      add(figureMenu, BorderLayout.SOUTH);
      validate();
      ...
   }

The first statement creates the menu. The next three add entries to the menu. The add statement adds the figureMenu to the bottom of the screen. The last statement tells Java to arrange all the pieces nicely in the window.

Let's talk briefly about layout managers. The main window generated by WindowController uses BorderLayout. A window with BorderLayout has 5 slots that can hold items. They are the NORTH, SOUTH, EAST, WEST, and CENTER. There are public constants from the BorderLayout class referring to each of those. You can refer to them by prefixing the name with BorderLayout, e.g., BorderLayout.SOUTH.

The add method when you have border layout takes two parameters, one with the component, while the second has where to put the item. (See the code above.) When your class extends WindowController the CENTER portion of the screen will be filled with the drawing canvas.

Each of the slots in the window can hold only one item. Thus if you put the figureMenu is the south slot, then other GUI items must be put elsewhere. Luckily, Java has containers that can hold multiple items and they can be put in one of those slots. The containers in Java are generated by class JPanel. Adding a bit to the complexity, JPanels use a different layout manager than our WindowController. It uses FlowLayout rather than BorderLayout. When you add items to a container using FlowLayout it simply adds them to the container from left to right and centers them. Thus, to add an item to a JPanel, we use an add method that only needs a single parameter, the item to be added to the panel.

The first drawing program that we described when explaining arrays used a JPanel to place three combo boxes in the south part of the window.

   // menus for shape, color, and command
   private JComboBox<String> shapeChoice;
   private JComboBox<String> colorChoice;
   private JComboBox<String> commandChoice;

The begin method then created the menus, put them in the JPanel, and then added the JPanel to the window in the south:

   public void begin() {
      // create panel to hold choice buttons
      JPanel menuPanel = new JPanel();
   
      // menu for selecting or adding
      commandChoice = new JComboBox<String>();
      commandChoice.addItem("Add new item");
      commandChoice.addItem ("Recolor item");
      commandChoice.addItem("Move item");
      commandChoice.addItem("Delete item");
      menuPanel.add(commandChoice);     // Note only a single parameter -- no direction!
   
      // Set up menu for shapes
      shapeChoice = new JComboBox<String>();
      shapeChoice.addItem("Circle");
      shapeChoice.addItem("Square");
      menuPanel.add(shapeChoice);         // Note only a single parameter -- no direction!
   
      // Set up menu for colors
      colorChoice = new JComboBox<String>();
      colorChoice.addItem("Red");
      colorChoice.addItem("Green");
      colorChoice.addItem("Blue");
      menuPanel.add(colorChoice);        // Note only a single parameter -- no direction!
   
      // Add the panel to screen
      add(menuPanel, BorderLayout.SOUTH);  // Two parameters because adding to WindowController
      validate();
   }

Java supports more kinds of GUI components than just JComboBox. A relatively compact introduction to the most popular components and how to use them can be found at http://www.cs.pomona.edu/classes/cs051/handouts/SwingGUICheatSheet.html. These include JButton (corresponding to Button in Grace), JLabel (corresponding to TextBox in Grace), JSlider, JTextField (corresponding to TextField in Grace), and JTextArea.

We will use JButton in examples below. We construct a button via new JButton(s) where s is the label on the string. Methods getText and setText(newS) are available to retrieve and update the label.

GUI components