View Basics: JFrames and JPanels

Basically, a JFrame represents a framed window and a JPanel represents some area in which controls (e.g., buttons, checkboxes, and textfields) and visuals (e.g., figures, pictures, and even text) can appear. Windows can contain/display multiple panels, although in the simplest GUIs, we will associate just one panel with a window.

When we discuss JFrames and JPanels, we will discuss just a very few of their many methods: they are highly subclassed (in a deep hierarchy) and therefore inherit many (many) interesting methods. We will discuss only the most useful and important of these methods: the ones used in most GUI applications. When reading this lecture (and programming using these classes) you should always have a Javadoc browser open, and not be afraid to search it for some useful method.

In the process of discussing JFrame and JPanels,, we will also discuss a host of other useful (and simpler) classes: Toolkit, Image, Dimension, Point, Color, Font, FontMetrics, and Graphics. These classes are imported and then used in many GUI applications. We use the last, Graphics, to render visuals (e.g., figures, pictures, and even text) in a JPanel that contains the graphics part of a JFrame.

Students at this point in the course are expected to be able to read the Javadoc of these classes (in Sun's API) to learn about their structure and use and to explore various methods (whose names indicate they might be useful). Note that some of these classes declare static methods and fields (mostly constants), which are easily spotted because their uses in our programs are prefaced by the name of the class (whose first letter is capitalized).

We will also begin to discuss the concept of listeners and adapters, which we will use much more extensively when we discuss the Controller part of the MVC pattern. Finally, we will examine a bit of control flow in GUIs: how methods are called: in Java they can be called explicitly as well as implicitly.

There is a folder that contains various projects associated with this lecture. Please download View Demonstrations and unzip this folder and examine its contents briefly now (we will refer to details later).

By extending JFrame, the View subclass inherits hundreds of methods from not only JFrame, but its superclasses: the JFrame class is in a hierarchy whose superclasses include (going upward) Frame, Window, Container, Component, and finally Object).

At the top of this heirarchy is the Component class, which is abstract; objects from its concrete subclasses are displayable on the screen, and have the following important methods (along with many many more): isVisible/setVisible (with a boolean parameter), getSize/setSize (with either a Dimension or two int parameters), getLocation/setLocation (with either a Point or two int parameters), and repaint (parameterless). The Container class is itself considered a Component, but one that in addition collects together other Components, using a LayoutManager (discussed in the next lecture) to organize them visually; it takes the role of a composite pattern: when we perform an operation on a Container, it performs that operation on all its Components. The Window class represents a raw window (e.g., no border) with its own internal coordinate system: (0,0) is the windows upper-left hand corner. The Frame class represents a window with Border and title area (we can specify various kinds of borders and set its associated icon/title). Finally, the JFrame class represents a Java compatible window: it has an associated content pane, which shows its visual contents.

Typically we define a parameterless constructor and one new method named build, which calls many of these inherited methods to initialize the JFrame's window; this method is called in the main method in Application (after constructing the model, view, and controller). For the simplest GUIs, this is not strictly necessary: we can put all this code in the constructor for the class itself; but for more complicated GUIs, separating construction from building is better.

A JFrame appears as a standard window; the one we will use in the earlist part of this lecture displays as follows.

Every pixel (picture element) on a computer screen is represented by a color, which is a combination of how much red, green, and blue appear there. The upper-left hand corner of the screen has an x coordinate of 0 and a y coordinate 0; thus x coordinates increase from left to right, and y coordinates increase from top to bottom (unlike our standard coordinate system). The bottom-right hand corner has the largest x and y coordinates (this number varies, depending on the size of the screen): a representative high-resolution value is 1280 horizontal by 1024 vertical pixels (for a total of 1,310,720 pixels).

Each JFrame (because it is a subclass of Component) has a location on the screen (for its upper-left hand corner) and size. Two simple JFrame methods (inherited from Component) are getLocation which returns a Point object (which has public instance variables x and y) and getSize which returns a Dimension object (which has public instance variables height and width). Likewise, it has setLocation and setSize methods, which use objects from these classes as parameters, or just two int parameters.

Each JFrame (because it is a subclass of Frame), has a header that contains (going left to right) an icon (little picture; it is optional), a title (text), and way to the right three window control buttons(minimize, midimize/maximize, and terminate). We can change the appearance of the icon by using the method setIconImage; we can change the title using the method setTitle. Likewise there are getIconImage and getTitle methods.

To read an icon from a file and put it into the header first requires calling the getImage method in the Toolkit class, passing its result to the setIconImage method. The getImage method can be called with a String parameter that names the file that stores the icon (in .gif, .jpeg, .png format). It returns a reference to an Image of that icon (or null if the file cannot be found, or it does not store information of the required type). Here is the standard code to perform all these operations; the methods are called inside the View class:

  Toolkit tk        = Toolkit.getDefaultToolkit();
  Image   titleIcon = tk.getImage(gifFileName);
  setIconImage(titleIcon);

  Toolkit tk        = Toolkit.getDefaultToolkit();
  setIconImage(tk.getImage(gifFileName));

We cannot change the appearance of the window control buttons, but we can change the behavior of each (using the method addWindowListener, which we discuss below). This method is inherited from the Window superclass.

The JFrame stores a reference to its content pane. The JFrame class itself defines getContentPane and setContentPane methods; the content pane itself is a Container. When we learn about the JPanel class we will explore this connection further. In the simplest the content pane is just one panel; but, we can use the add method (inherited in Container) to add many Components into the content pane of a JFrame; Java uses a layout manager (it is told which one to use via setLayoutManager) to determine the how these components are arranged Layout managers are the topic of the next lecture. We will also see that every JPanel has its own coordinate system, with (0,0) as the upper-left hand corner, which greatly simplifies programming it.

Finally, the method setVisible (with a boolean parameter) determines whether a JFrame appears on (or disappears from) the screen.

The JFrame class inherits (from the Window class) the addWindowListener method from the Window superclass. It "listens" for certain components being clicked and call the appropriate method for each component. Its parameter must be a reference to an object constructed from a class that implements an interface named WindowListener. In fact, the WindowAdapter class implements this interface by defining each of its methods, as a stubs. Thus we can write in a JFrame method

  addWindowListener(new WindowAdapter());

  public class Terminator extends WindowAdapter {
    public void windowClosing(WindowEvent e)
    {
      System.out.println("Window closing selected: terminating program");
      System.exit(0);
    }
  }

  addWindowListener(new Terminator());

Notice that we are defining this subclass just to construct one instance of it, to pass to the addWindowListener method. This is exactly what anonymous classes are useful for: to supply a more compact (but complex) syntax for constructing one object from a class that is never needed again. Recall that it involves constructing an object from an anonymous (nameless) class. The syntax in this case is

  addWindowListener(new WindowAdapter() {
    public void windowClosing(WindowEvent e)
    {
      System.out.println("Window closing selected: terminating program");
      System.exit(0);
    }
  });

Note that we have discussed two different concepts here.

• The concept of an adapter class (which implements an interface with stub methods). We can use such classes directly or more likely construct subclasses of them (and then use objects constructed from these subclasses instead). The key to an adapter class is that it already implements an interface, with default method meanings; we can easily create a subclass from it, overriding a method or two, to specify different behavior for some action(s).

• The concept of an anonymous class (based on an adapter class). When we need to construct just one object from a subclass, we don't really even need to name the subclass. Instead, we can use special Java syntax to construct an object from a subclass of a named superclass by specifying the superclass name and the overridden methods.

You can experiment with the methods called to attempt to get other forms of interesting behavior, including special behavior for other methods specified by the WindowAdapter.

To override the inherited paintComponent method, we must write a void method with one parameter: a reference to an object of type Graphics (called the Graphics context: see the next section for a short discussion of this class), which contains all the methods for drawing figures, images, and text (see its Javadoc for details). The Java runtime system automatically calls this paintComponent method whenever the size of its JFrame is changed, whenever other windows are moved to uncover part of the JFrame, and whenever the JFrame is deiconified after being iconified (subclasses of the WindowAdapter can add special behavior for such events as well).

In all cases, the paintComponent method is called to redisplay the contents of the JPanel, now that the amount of it that is visible has been "changed". The Java runtime automatically supplies the paintComponent method with the right Graphics context (we never have to worry about that).

If we want to explicitly call the paintComponent method, say call it repeatedly to force Java to animate some actions in a JPanel, we cannot call it directly, because we cannot access its Graphics context. Instead, we must call the void, parameterless method repaint (either on a specific JPanel or on its JFrame, which automatically calls it on each JPanel in its content pane).

The biggest conceptual problem that students have about GUIs is that they THINK the screen stores all the information written to it. When a JPanel paints itself, all the figures, images, and text are written into the screen: some are visible, some are not (because they go beyond the window's boundary, or is covered by another window). The hidden information is GONE. If the JPanel needs to redisplay any part of itself, it can do so only by calling paintComponent again (which typically displays it all). For sophisticated applications, overloaded versions of the paintComponent method might be able to determine what part of its image to repaint, but in simple applications, it just repaints everything.

So, if we need to display a bunch of objects in a JPanel, we must store information about each of these objects (say in a collection class), and then the paintComponent method should iterate through this collection, displaying each object in the JPanel

Note that every JPanel objects inherits from Component the getBackground and setBackground methods, which has a Color as return value/parameter respectively. Finally, we should always call super.paintComponent() before doing anything graphical in the paintComponent method.

  void drawArc(int x, int y, int width, int height,
              int startAngle, int arcAngle) 
  void drawLine(int x1, int y1, int x2, int y2) 
  void drawOval(int x, int y, int width, int height) 

  void drawPolygon(int[] xPoints, int[] yPoints, int nPoints) 
  void drawPolygon(Polygon p) 
  void drawPolyline(int[] xPoints, int[] yPoints, int nPoints) 
  void drawRect(int x, int y, int width, int height) 
  void drawRoundRect(int x, int y, int width, int height,
                     int arcWidth, int arcHeight)

Likewise, there are simlar methods that draw filled-in shapes.

  void fillArc(int x, int y, int width, int height,
               int startAngle, int arcAngle) 
  void fillOval(int x, int y, int width, int height) 
  void fillPolygon(int[] xPoints, int[] yPoints, int nPoints) 
  void fillPolygon(Polygon p) 
  void fillRect(int x, int y, int width, int height) 
  void fillRoundRect(int x, int y, int width, int height,
                     int arcWidth, int arcHeight)

Examine the folder named figures jpanel in the View Demonstrations download. It shows a short program (small DrawPanel class, tiny View and Application class) that illustrates how to use javax.swing.JPanel for drawing figures in a JFrame.

 boolean drawImage(Image img, int x, int y,
                     ImageObserver observer)
  boolean drawImage(Image img, int x, int y,
                    int width, int height, ImageObserver observer)

Examine the folder named images jpanel in the View Demonstrations download. It shows a short program (small DrawPanel class, tiny View and Application class) that illustrates how to use javax.swing.JPanel for drawing images. It draws a bunch of hot dogs, and moves them a bit each time enter is pressed in the console window.

Objects in the Font class are constructed, specified by a font name (e.g., SanSerif), style (e.g., plain, bold, italic), and size (e.g., 12 point: specified in points, which is 1/72 of an inch). Objects in the FontMetrics class describe a font, with lots of interesting information: the height and width of characters in the font, ascent and descent, etc.

Here are prototypes for the simplest text methods in the Graphics class.

  void drawString(String str, int x, int y) 
  Font getFont() 
  FontMetrics getFontMetrics() 
  FontMetrics getFontMetrics(Font f) 
  void setFont(Font font)

  Font        f1  = new Font("SansSerif", Font.BOLD, 14);
  FontMetrics f1m = g.getFontMetrics(f1);
  g.setFont(f1);
  g.setColor(Color.blue);

Examine the folder named text jpanel in the View Demonstrations download. It shows a short program (small DrawPanel class, tiny View and Application class) that illustrates how to use javax.swing.JPanel for drawing text. It also illustrates some uses of the Font and FontMetrics classes, which are both defined in the java.awt package.

Standard buttons are constructed from the JButton class (in the javax.swing package). As with other controls, they inherit hundreds of methods. The typical constructor specifies a String to use as a label for the button (or we can call setLabel with any String later). We can also call inherited methods such as setFont, setBackground, and setForeground, although most standard buttons use default values for these. We can also call the setEnabled method (with a boolean parameter) to tell Java whether a button is pressable (if not, its label will appear as a faded color).

Here is an example of declaring a JButton and performing many of these operations.

  JButton b = new JButton("Cold");
  b.setFont(new Font("Monospaced",Font.BOLD,12));
  b.setBackground(Color.yellow);
  b.setForeground(Color.blue);

Examine the folder named button jpanel in the View Demonstrations download. It shows a short program (tiny DrawPanel class, small View class and tiny Application class) that illustrates how to use javax.swing.JPanel for drawing buttons.

If you get stumped on any problem, go back and read the relevant part of the lecture. If you still have questions, please get help from the Instructor, a CA, or any other student.

1. None yet.