Prerequisites Aims DCS235 Software Engineering Exercise Sheet 2: Introducing GUI Programming Version 1.1, October 2003 You should be familiar with the basic Java, including the use of classes. The luej development environment should be installed on your machine and you should be able to use it. This exercise was prepared using luej version 1.2.2. Alternatively, you can use Together, though you will need to add a main program. You should be able to use the Java API documentation provided by Sun at http://java.sun.com/j2se/1.4.2/docs/api/index.html (or in the locally at http://www.dcs.qmul.ac.uk/manuals/j2sdk/ ) 1. The aim of this exercise is to understand GUI programming in Java, based on the AWT framework: GUI components and containers. Events and event listeners. An outline of the way AWT uses threads. The idiom of using a nested class for a listeners. A very simple GUI application is provided. The first part of the exercise is to examine this application and its behaviour. The knowledge is then used to enhance the application. Preparatory Reading Section 8.3 The Graphical User Interface Framework AWT and Swing of Jia s book Object-Oriented Software using Java is a good introduction to Java Swing. However, do not worry if you do not grasp this material in full at first. This exercise is intended to help you develop your understanding. Chapter 5 of Jia s book, at least to the end of section 5.3, covers the material on Java class declarations, including interfaces, that you need to be familiar with. 1.Load and Examine the utton Counter Project Load the luej project. You can run the program in luej by executing the constructor of the CounterFrame class. Run the program and test it out. It should look like this: Read the source code of the program; answer the following questions. You may also generate the Project Documentation and view it using a browser. 1. List the classes. 2. The class CounterFrame extends the AWT class Frame. Look at the Java API documentation for this class. What package is it in? 3. Which other AWT classes are used in the program? How many instances of them are there? 1 If you work at home it is a good idea to download the Java documentation for use locally. DCS 235 Exercise 2 (version 1.0_1, Oct 17, 03) Page 1 of 5
Note: there is no main program, since in luej we do not need one. You can add one if you wish to run the program outside of luej: public class Exercise2 { public static CounterFrame frame; public static void main(string[] args) { frame = new CounterFrame() ; 2.Inspect the Counter Use the luej inspector to examine the value of the Counter instance and compare it to the value shown on the screen. 1. Inspect the CounterFrame instance. The first line of the object fields compartment of the inspector is: public VisualCounter vcount = <object reference> Highlight this line and use the Get button of the inspector to add this instance of the VisualCounter alongside the CounterFrame instance. 2. Inspect the VisualCounter instance. There are 7 object references. Get the reference to the Counter object count. Click the red square representing this object with the right mouse and try executing the inc() and dec() methods several times. What happens to the button and counter display? What happens when you click the + or - buttons? Your display should should something like: This picture shows the count field of the instance of Counter equal to 2, while the displayed value is 0! This inconsistent state was reached by calling the inc() method of the count object. The next section examines how the value of the counter is connected to the value displayed. DCS 235 Exercise 2 (version 1.0_1, Oct 17, 03) Page 2 of 5
3.Connecting the utton to the Label: Listeners Look at the code of the IncListener class and answer the following questions: 1. Where is a listener (an instance of this class) constructed? What are the values of label and count attributes when the listener is created? 2. What does the Java implements ActionListener do? (See section 4.4.7, page 117 of Jia s book if you are unsure of about interfaces.) Look up ActionListener in the Java API documentation. 3. The method ActionPerformed include the single statement: label.settext(integer.tostring(count.inc())); Explain the purpose of the 3 method calls in this statement. 4. When the listener has been constructed, it is added to the button. This statement is from the VisualCounter class: plus.addactionlistener(pluslistener); Read the Java API documentation for the addactionlistener method which class is it in? This method registers the listener with the GUI component (a button in this case). When the button is pressed, the listener is called. 5. Modify the way the label is updated by the code in the listener classes ( IncListener and DecListener ). For example, try to set the background colour (using the method setackground ) to one colour for even numbers and another colour for odd numbers. (Colours are from java.awt.color). Summary In this section, you have understood that to execute code when a button is pressed: the code must be in the actionperfomed method of a class that implements the ActionListener interface, and the listener must be registered with the button, using the addactionlistener method. In the next section, you investigate how the actionperformed method gets called. 4.How is the Listener s ActionPerformed Method Called? Use the luej debugger to understand the flow of control in a Java GUI program. 1. Set a breakpoint in the constructor for CounterFrame class. Create a new CounterFrame instance. When does it appear on your screen? Is the actionperformed() method called? Your display may look like: DCS 235 Exercise 2 (version 1.0_1, Oct 17, 03) Page 3 of 5
2. Set a breakpoint in the actionperformed method. Press the + or - button of the utton and Counter application. Notice that the method has been called by a thread called AWT- EventQueue-0, not by the main thread used to construct the VisualCounter and the instances of the GUI components. We call this thread the event handling thread. (It is not the aim of this exercise to understand threads in detail, but you can read about threads in Jia s book: either read Section 11.1 or study the example in Section 4.7. Programming with threads is covered in another course.) 3. A GUI application such as the utton and Counter program, may have to do some work even when nobody is using it! I imagine that as you work on this exercise, you are switching from one application to another. Sometimes, when you open one application, another utton and Counter possibly is covered up. When it is uncovered, it may need to be repainted. GUI components have a paint method. Paint is rather like actionperformed, except that it is called to repaint the component, rather than to respond to a button press. The components in utton and Counter use standard implementations of paint, inherited from base classes. Let try to modify the paint methods to see what is going on. Add the following declarations to the VisualCounter class: private int pcount = 0 ; public void paint(graphics g) { pcount++; System.out.println("Painting the VisualCounter " + pcount); super.paint(g) ; You can also add the following new class to the program and make the counter value label an instance of this class, rather than the standard AWT Label class. DCS 235 Exercise 2 (version 1.0_1, Oct 17, 03) Page 4 of 5
import java.awt.* ; public class MyLabel extends Label { private int pcount = 0 ; public MyLabel(String s) { super(s) ; public void paint(graphics g) { pcount++; System.out.println("Painting the CounterLabel " + pcount); super.paint(g) ; Play with the modified utton and Counter application. When are the paint methods called? You may also set breakpoints in the new code, but expect strange behaviour when the event handling thread is interrupted. 5.Simplify the Listeners. In this section, we simplify the two listener classes and learn a common Java idiom for creating listeners. 1. The two listener classes IncListener and DecListener are almost the same they differ just by the call to inc() or dec() method. Notice also that we make no use of the ActionEvent parameter to the actionperformed method. Read the documentation for ActionEvent to find out how to distinguish the event from the different buttons. Use this information and some trial and error to prepare a single listener class for our application. 2. Listener classes are often small. Rather than put them in a separate file, it is possible to nest the class in another class (see Jia Section 4.4). Reorganize the utton and Counter application in this way. 6.Changes to the utton and Counter Application. 1. Develop some variations of the utton and Counter application. For example: 2. Challenge: create a simple calculator application: DCS 235 Exercise 2 (version 1.0_1, Oct 17, 03) Page 5 of 5