Graphical User Interfaces in Java

Transcription

1 COMP16121 Graphical User Interfaces in Java COMP16121 Sean Bechhofer

2 Why? With the dominance of windows-based systems, Graphical User Interfaces (GUIs) are everywhere. They have a number of useful characteristics. They can allow us to present large amounts of information in a concise manner. They can make it easier to allow the user to interact with the state of an application and control its execution. They can look much nicer than command line programs. 2

3 Example GUIs GUIs are not always the answer to our problems though, and there are issues relating to their use that we need to be aware of: Human factors Interface design 3

4 Coming up... Java has a wealth of support for building GUIs. GUIs rely on a number of features of the Java language that we have not yet seen in depth. This includes extending existing classes; In our initial examples, we will also meet a number of new concepts relating to GUIs: Frames, Windows, Components, Containers. The next few lectures will introduce these topics. By the end of these lectures you should know enough to be able to build simple Graphical User Interfaces. 4

5 Aside: Swing vs. AWT The original versions of Java contained components for windowing known as the AWT (Abstract Window Toolkit). Swing provides replacements for most of the AWT graphical components, but a number of non-component AWT classes (such as Container) are still in use. It is recommended that you do not mix Swing and AWT components in a single application as this is likely to cause problems. Swing is slightly more complicated, but is now more widely used. We will use Swing in our examples. 5

6 Example: HelloWord In the best traditions of programming, our first example will be a Hello World program. This simply makes a window appear on the screen with a message. HelloWorld 6

7 HelloWorld The example program does the following: Create an object representing a new window which will be displayed on the screen; The constructor method adds a label to the window; Display the window. To understand this we need to understand how to add things to windows which appear on the screen. This is done using Containers and Components. 7

8 Components and Containers The elements we use to build up GUIs are known as Components. Components include Buttons, Labels, Text Fields and other things that appear on GUIs. All components are kinds of java.awt.component. We often refer to the components that appear on GUIs as widgets. Some Components are Containers these are objects that contain other components. Containers allow us to build up GUIs in sections or pieces which are then assembled together. An example of a container is JPanel. 8

9 Components Labels List Buttons Text Box 9

10 Top Level Containers and JFrame Swing provides a number of special kinds of container known as Top Level Containers, one of which is JFrame. A JFrame is a window that typically has decorations such as a border, a title, and buttons for closing and iconifying the window. Applications with a GUI will in general use at least one frame. Otherwise it s probably not a Graphical User Interface!! 10

11 JFrame Anatomy Window Title Window controls added by host windowing system Menu bar Frame content 11

12 JFrame JFrame also allows us to add menu bars or toolbars to windows. The position of menu bars may be left up to the host windowing systems. For example, on the Macintosh, menu bars tend to appear at the top of the desktop rather than at the top of the window. 12

13 A Simple Frame Example import javax.swing.jframe; public class SimpleFrame { /* Main method to drive the program */ public static void main(string [] args) { JFrame theframe = new JFrame(); theframe.settitle("a Frame"); theframe.setsize( 300, 200 ); theframe.setvisible( true ); } // main } // SimpleFrame Our first example creates a new Frame, gives it a title, then asks it to display. SimpleFrame 13

14 Extending Existing Classes Class libraries such as JFrame provide code that we can reuse in our applications. We don t want to have rewrite our own classes for basic GUI components. There are a number of different ways that we can use JFrame. For example, we could have an instance variable which is a JFrame, and then delegate any operations relating to the window to this instance variable. This would work, but in this case an alternative is to extend an existing class. Instance of our new class are then also instances of JFrame. Extending allows us to provide a specialisation of a class. We can reuse the code in the class and add additional instance variables or methods that perform some particular task for our application. 14

15 Extending Existing Classes The class that is extended is known as the superclass or base class. The class that is doing the extending is known as the subclass or derived class. The derived class can directly use public methods and instance variables. In our example, the statement at the beginning of the class declaration states that we are extending JFrame. import java.awt.container; import javax.swing.jlabel; import javax.swing.jframe; public class HelloWorld extends JFrame {... } // HelloWorld We can now use methods from JFrame within our class. 15

16 HelloWorld main() Our class has a main() method that drives the program. /* Main method to drive the program */ public static void main(string [] args) { HelloWorld thehelloworld = new HelloWorld(); thehelloworld.setvisible( true ); } // main The first thing we do is create a new instance of the HelloWorld class using the constructor. 16

17 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld The constructor allows us to create new instances of our HelloWorld class Before any of the code in the method is executed, the no-argument constructor of the base class will be called. This could take care of any initialisation that might be required for the instance variables that come with JFrame. 17

18 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld A method from the base class is used to set the title of the window. This is the title that the host windowing system will place on the title bar of the window. This is also usually also the name that is shown when the window is reduced to an icon. 18

19 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld By default, a JFrame is empty, and contains no components. The JFrame has an area known as the content pane, which contains the contents of the window. When we add components to a JFrame, we don t add them to the JFrame itself, but instead add them to the content pane. We get the contentpane of the JFrame, which is a Container Note the use of a method from the base class. 19

20 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld We then add a label to the content pane, using a new instance of JLabel JLabel provides areas on a GUI for short pieces of text or images The user cannot interact with labels. 20

21 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld The above lines tell the window how it should behave when the user closes it. In this case, we want the application to exit. Another option would be to simply close the window, but keep the object representing the window we might want to show it again later. 21

22 HelloWorld constructor /* Constructor */ public HelloWorld() settitle("hello World"); /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel("Hello World!")); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation(exit_on_close); /* pack the frame */ pack(); } // HelloWorld Finally, we call the pack() operation. This causes the window to be resized to fit the various constraints of its components. In this case, it means that the window will be resized to fit the dimensions of the label that we have added. 22

23 HelloWorld main() /* Main method to drive the program */ public static void main(string [] args) { HelloWorld thehelloworld = new HelloWorld(); thehelloworld.setvisible( true ); } // main The HelloWorld constructor doesn t do anything about displaying the window that we have created.? Why not? In order to make the window visible, we call setvisible( true ) This will make the window visible, and then bring it to the front. HelloWorld 23

24 Coursework Task Reimplement the HelloWorld GUI example to greet the world in French (or some other language). 24

25 Layout Our first example simply added a single component to the container. If we want to add more than one component, we need to specify how those components should be layed out on the screen. In Swing, layout is controlled by a LayoutManager. There are a number of different layout managers provided in the system libraries. Three simple ones are: FlowLayout GridLayout BorderLayout These are sufficient to build quite sophisticated interfaces. 25

26 Example: HelloSolarSystem Our next example is an extension of the HelloWorld program. This will make a window appear on the screen with a number of messages. We will use a FlowLayout to control how the messages appear on the screen. In FlowLayout, the components are simply added one after the other, and flow across the screen. HelloSolarSystem 26

27 Example: HelloSolarSystem import java.awt.container; import java.awt.flowlayout; import javax.swing.jlabel; import javax.swing.jframe; public class HelloSolarSystem extends JFrame { /* Constructor */ public HelloSolarSystem() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new FlowLayout() ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); pack(); } // HelloSolarSystem 27

28 HelloSolarSystem constructor /* Constructor */ public HelloSolarSystem() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new FlowLayout() ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); pack(); } // HelloSolarSystem The constructor sets the layout manager for the content pane to be a new instance of FlowLayout. 28

29 HelloSolarSystem constructor /* Constructor */ public HelloSolarSystem() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new FlowLayout() ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); pack(); } // HelloSolarSystem We then add a number of labels, one for each planet. The rest of the constructor is as before. The main() method is similar. HelloSolarSystem 29

30 Coursework Task In early chapters we went from HelloWorld to HelloMyFamily. In this task we do the same, but provide a GUI that greets (some some subset of) your family. Use a FlowLayout to control the layout of the GUI. 30

31 Running HelloSolarSystem As you can see, this produces rather ugly results.? What would happen with 100 planets? Can we improve on this? HelloSolarSystem 31

32 Improving Layout The FlowLayout manager simply puts all the components one after another and flows them across the container. Each component takes as much space as it needs. With lots of components, this doesn t always produce nice looking results. Comp1 Comp2 Comp3 Comp4 Comp5 Comp6 Components flow across Container 32

33 Improving Layout: GridLayout An alternative Layout Manager is GridLayout. GridLayout lays out components in a rectangular grid. The grid is divided into equal sized rectangles, with each component put into one rectangle. The grid is sized so that the biggest component will fit. This is one of the reasons why we call pack() to give the container a chance to calculate all the appropriate sizes. Comp1 Comp2 Comp3 Comp4 Comp5 Comp6 33

34 HelloSolarSystemGrid /* Constructor */ public HelloSolarSystemGrid() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new GridLayout( 0, 3, 10, 10 ) ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); pack(); } // HelloSolarSystem The Constructor is the same apart from the setting of the layout manager Note that we will have to change the import headers. 34

35 Running HelloSolarSystemGrid Much nicer! The components are laid out in a grid as expected. The constructor we used for GridLayout is: GridLayout(int rows, int cols, int hgap, int vgap) If we supply an argument of 0 for rows or columns, this means any number. So in our example, we ve fixed the number of columns at 3 as many rows as necessary will be added to display all the components. HelloSolarSystemGrid 35

36 Coursework Task Repeat, this time using a GridLayout to control the layout of the GUI. Experiment with different values for rows and columns to see what the effects are. Write a program that shows a times table using a JLabel to represent each number. Use a GridLayout to control the layout. 36

37 Beyond Simple Text We ve seen JLabel used to display a piece of text. A JLabel can also be used to display an image: This can help in providing more interesting GUIs. /* Get the contents of the frame and add a label to it */ Container contents = getcontentpane(); contents.add(new JLabel( new ImageIcon( "smiley.jpg" ) ); We create a new ImageIcon object and pass that to the JLabel. HelloShark 37

38 Aside: LayoutManager as a parameter The constructors for HelloSolarSystem and HelloSolarSystemGrid are identical apart from the creation of the FlowLayout or GridLayout. /* Constructor */ public HelloSolarSystem() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new FlowLayout() ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); /* Constructor */ public HelloSolarSystemGrid() settitle("hello Solar System"); /* Get the contents of the frame and add labels to it */ Container contents = getcontentpane(); /* Set the layout manager */ contents.setlayout( new GridLayout( 0, 3, 10, 10 ) ); contents.add(new JLabel("Hello Mercury!")); contents.add(new JLabel("Hello Venus!")); contents.add(new JLabel("Hello Earth!")); contents.add(new JLabel("Hello Mars!")); contents.add(new JLabel("Hello Jupiter!")); contents.add(new JLabel("Hello Saturn!")); contents.add(new JLabel("Hello Uranus!")); contents.add(new JLabel("Hello Neptune!")); contents.add(new JLabel("Hello Pluto!")); setdefaultcloseoperation(exit_on_close); pack(); } // HelloSolarSystem pack(); } // HelloSolarSystemGrid We could move the creation of the layout manager out of this method and pass it in as an argument to the constructor this would give us some extra flexibility and make it easier to experiment with other layouts. 38

39 Summary Elements of GUIs Windows and Frames JFrame Components JLabel Containers Extending Existing Classes Reusing classes and adding new functionality Layout Management FlowLayout GridLayout 39

40 COMP16121 Interacting with GUIs COMP10081 Sean Bechhofer

41 Interacting with a GUI The HelloWorld and HelloSolarSystem examples provide GUIs that the user doesn t really interact with. We can t press buttons to change the state or make the application do anything (other than close down). Swing provides a number of components that allow us to build interactive interfaces E.g. Buttons to start or stop an application The next example is a simple stop clock timer that the user can stop and start by pressing a button. StopClock 41

42 Event Driven Programming The programs that you have seen up to now are procedural: the flow of execution is controlled by loops and decision statements. E.g. do A, then B, then while some condition is true, do C. This is known as procedural programming In event driven programming, code is executed when events occur. This is appropriate when programs need to react to external events, such as the action of a user 42

43 Event Driven Programming A Procedural Program is like a recipe It gives a series of instructions that are to be performed in sequence. Making a burger: 1. Turn the grill on 2. Grill burger until cooked 3. Turn the grill off 4. Butter bun 5. Put burger on bun 6. If cheeseburger, add cheese 7. Add salad 8. Add top of bun Of course there may be many more steps with complicated loop or control structures. But the instructions are followed in sequence. 43

44 Event Driven Programming In the burger example, we know exactly what we re going to do, and what s going to happen There s no need to react to external events. Consider a burger van: Sam Larry 44

45 Burgers Larry doesn t know what the orders are going to be at the beginning of the evening, so can t know beforehand what he has to do. Instead, he reacts to external events (orders) as they come in from Sam Within the handling of each particular order, he may then follow a simple procedural path (for example, someone might order a cheese burger) 45

46 Events Java provides a rich event model: a framework for handling events. In particular this includes libraries for events relating to GUIs. There are many different kinds of event. Here, we will be interested in ActionEvent ActionEvents occur when a user performs some kind of action on a GUI, for example pressing a button. We say that the event has been raised. Events can also represent other things: The user typed something at the keyboard A window has been closed The state of an object has been changed. 46

47 Sources and Listeners In the Java Event model, actions involve at least two participants The source produces an event, The listener receives the event. There is also an object that represents the event itself. 47

48 Sauces and Listeners Consider our burger van example The customer tells Sam what she wants. Sam shouts this out, creating an order The order is thus passed to Larry, who (hopefully) then cooks the appropriate food. Customer Order Make Choices Shout Order Order to Larry Sam Larry 48

49 Sources and Listeners A general pattern for this is as follows User Action ActionEvent Object Trigger event Generate event Notify listener Source Object Register with Source Listener Object Note that the listener must register with the source, telling it that it is interested in receiving events. 49

50 In our example, Sam is playing the role of a widget on a user interface. Widgets can be the source of events Larry plays the role of an event listener, an object that reacts to events as they are raised. 50

51 Events In the Java Event model, events are represented as objects. This means that the object can carry around some state with it For example, we can find out the object that caused the event to happen (the source)? Why would we want to know about the source? 51

52 Interfaces Interfaces in Java allow us to specify particular methods that we want classes to implement. The interface advertises the fact that instances of the class will supply some particular methods. A class that implements the interface then has to provide code for the methods named. Interfaces are like protocols They specify some agreed behaviour 52

53 Implementing Interfaces For example, the ActionListener interface has a single method: public void actionperformed( ActionEvent e ) If a class implements this interface, instances of the class will be able to respond in some appropriate manner when they receive ActionEvents. Because the class implements the interface, instances can be registered as listeners with objects such as JButton, that are sources of ActionEvents. 53

54 Designing the StopClock There are (at least) two things we need to think about when designing our Stop Clock class The information that the stop clock holds What the clock will look like on the screen What information do we show? What controls will the clock have? The two are obviously related We can t display information that the clock isn t holding! 54

55 Class Design What information should the clock hold? When it was started. When it was stopped. Whether it is running. These can all be represented using instance variables. For the first two, we can use a Date. The third is a boolean value. 55

56 GUI What should the clock look like? When building GUIs, it s often useful to sketch something out on paper first. 56

57 StopClock instance variables public class StopClock extends JFrame implements ActionListener {... /* Local instance variables */ private boolean isrunning = false; private Date startdate; private Date stopdate; private JLabel starttimejlabel = new JLabel( "Not started" ); private JLabel stoptimejlabel = new JLabel( "Not started" ); private JLabel elapsedtimejlabel = new JLabel( "Not started" );... } Private instance variables hold the state of the clock isrunning, startdate, stopdate We will display the values using labels, so we also have variables that represent the labels used on the clock, and provide them with initial values. 57

58 StopClock constructor public class StopClock extends JFrame implements ActionListener {... public void actionperformed( ActionEvent evt ) {... }... } The class header tells us that the class is going to implement ActionListener. We must then provide code for the required actionperformed () method. If we don t provide the method required by the interface, the compiler will report an error. 58

59 StopClock actionperformed() public void actionperformed( ActionEvent evt ) { if (! isrunning) { /* Start the clock */ startdate = new Date(); starttimejlabel.settext( "" + startdate ); stoptimejlabel.settext( "Running..." ); elapsedtimejlabel.settext( "Running..." ); isrunning = true; // Need to pack again because label size may have changed pack(); } else { /* Stop the clock and show the updated times */ stopdate = new Date(); stoptimejlabel.settext( "" + stopdate ); long elapsedmilliseconds = ( stopdate.gettime() - startdate.gettime() ); elapsedtimejlabel.settext( "" + elapsedmilliseconds / ); isrunning = false; // Need to pack again because label size may have changed pack(); } } // actionperformed If the clock isn t running, start it and make a note of the start time. Otherwise, stop the clock and update the display. 59

60 Running StopClock StopClock 60

61 StopClock Sources and Listeners What happens in the stop clock? evt Press Button Generate event Event passed to listener actionperformed( evt ) startstopjbutton thestopclock startstopjbutton.addactionlistener( this ) When the button is pressed, a new ActionEvent object is created and passed to the StopClock object. The actionperformed() method is then invoked with the event as argument. 61

62 Who calls the method? Within our StopClock class, we defined a method actionperformed() that was never explicitly called. However it does get called sometime during the execution of the program if the button gets pressed. This is a common feature of event-driven programming The methods you write may not be called explicitly within your code. This can make such programs hard to debug hard to test But where is the method called? 62

63 Threads: Parallel Execution Consider a busy lecturer He has many things to do in a day: Write a paper Mark some work Give a lecture Keep up with Important s may get missed He may be writing collaboratively Instead, he can (appear to) perform the tasks in parallel He can only do one thing at a time (he s a man). He could do one after the other, but that might cause problems What he s actually doing though, is switching between them. 63

64 Threads: Parallel Execution We have grown used to being able to perform many tasks simultaneously with computers. Several programs running at the same time What s usually happening though is that each program has its own process, and the resources of the central processor are shared between the processes. There are various strategies for dividing time between processes. The swapping between processes is rapid enough for you not to notice this (most of the the time) In Java, we have the notion of threads, which allow a single program to perform a number of tasks. 64

65 Threads: Main Thread When a Java program starts, the virtual machine (VM) creates the main thread. This executes the main() method, along with any method calls there might be within the body. When the thread reaches the end of the body, the thread terminates. If the main thread was the only thread, then the virtual machine ends the program. Otherwise, the program will continue to run until all threads have terminated. Up to now, the programs you have been writing have had a single thread. So the programs end when the main thread gets to the end of the main body. The situation is a little different when we begin to use GUI components. 65

66 Threads: GUI Thread When a program creates a window on the screen, the virtual machine creates a new thread -- the GUI thread. This thread actually spends much of its time asleep. When the user does something interesting (e.g. presses a button), the operating systems tell the VM, and the VM wakes up the GUI thread. The GUI thread then checks to see if the event really was interesting, and if so, executes the appropriate code. Once it s done, the GUI thread goes back to sleep again. Note that the processor isn t necessarily executing tasks in parallel, but will (usually) be swapping between the threads. Again though, this is so rapid, we don t notice this. 66

67 ... imports...! /**! * Simple frame with a single button.! <a href="mailto:sean.bechhofer@manchester.ac.uk">sean Bechhofer</a>! */! public class Button extends JFrame implements ActionListener {! private JButton thebutton = new JButton( "Press Me!" );! /* Constructor */! public Button() {!!settitle("one Button");!!/* Get the contents of the frame and add a label to it */!!Container contents = getcontentpane();!!contents.add( thebutton );!!thebutton.addactionlistener(this);!!/* Specify appropriate behaviour when the window is closed */!!setdefaultcloseoperation(exit_on_close);!!/* pack the frame */!!pack();! } // OneButton! public void actionperformed( ActionEvent evt ) {!!System.out.println("Pressed!");! }! /* Main method to drive the program */! public static void main(string [] args) {!!Button thebutton = new Button();!!theButton.setVisible( true );! } // main! } // OneButton! 67

68 Threads Java s system libraries provide a number of classes that allow us to explicitly create and manage threads. What kind of issues might come up? For the programs that we are creating, and for our GUI programs, we don t need to worry about this, and can happily allow the VM to take care of our threading needs. 68

69 StopClock with a Split time Now, we decide that we want to be able to record split times while the clock is running. We can add a second button for this When it is pressed, the clock continues to run, but updates to display the value of the split time. StopClockSplit 69

70 StopClockSplit changes We need to add another label and another button. We need to change the constructor in order to add the field and button in the appropriate place. The first half of actionperformed() will be (almost) the same. 70

71 StopClockSplit actionperformed() When the clock is running, we now have a problem. The user can either press Start/Stop, to stop the clock (as before), or can press Split to record a split time (but leave the clock running). These two actions should have different consequences. The StopClock will be registered as a listener with both buttons, but has a single actionperformed() method. How do we know which button has been pressed? 71

72 ActionEvent sources As we ve seen, in the Java Event Model, events are represented by objects. In our example, instances of ActionEvent are used to represent actions such as the user pressing a button. These objects carry information around with them. So for example, we can ask an event for it s source -- the object that caused the event to be raised. This is done by calling the getsource() method on the event object. In our example, the source of the event object will be the JButton that was pressed. This then allows us to check which button was pressed, and take appropriate action. 72

73 Running StopClockSplit StopClockSplit 73

74 Coursework Task Take the StopClock example and change the code to provide a split time button. When the split time button is pressed, the clock should continue to run but the split or elapsed time should be displayed. The split button can be pressed any number of times when the clock is running, with the elapsed time updating each time it is pressed. 74

75 Summary Events and the Java Event Model Event Sources Event Listeners Implementing Interfaces ActionListener Multiple sources, one listener ActionEvent Threads 75

76 COMP16121 Entering Information & Layout COMP10081 Sean Bechhofer

77 Interacting with a GUI In our previous example, we provided the user with the opportunity to interact with a GUI by pressing buttons. Up to now, the only way that we ve been able to pass information or data into a program has been via arguments to main(). Now we re going to add components to an interface that allow the user to enter data. Our example will be an interface to the GCD code that we have already seen. 77

78 JTextField Our new GUI will allow the user to enter some data This is done using text fields. JTextField is a component that displays some text. Unlike JLabel, however, the user can interact with the text field and can enter new values. 78

79 GCD instance variables public class GCD extends JFrame implements ActionListener {... private JTextField number1jtextfield = new JTextField( 20 ); private JTextField number2jtextfield = new JTextField( 20 ); private JTextField resultjtextfield = new JTextField( 20 );... } We have three text fields that will hold the text to be displayed. When creating a text field we can specify how big it should be this then allows the interface to size itself appropriately. The field will start off with an empty string as content. It s also possible to provide a JTextField with some initial value: JTextField myfield = new JTextField( "hello" ); 79

80 GCD constructor public GCD() { settitle("gcd"); Container contents = getcontentpane(); contents.setlayout( new GridLayout( 0, 1 ) ); contents.add( new Label( "Number 1" ) ); contents.add( number1jtextfield ); contents.add( new Label("Number 2" ) ); contents.add( number2jtextfield ); JButton computejbutton = new JButton( "Compute" ); contents.add( computejbutton ); computejbutton.addactionlistener( this ); contents.add( new Label( "GCD of Number 1 and Number 2" ) ); contents.add( resultjtextfield ); /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation( EXIT_ON_CLOSE ); pack(); } // GCD The text fields are added to the GUI just like any other components. 80

81 GCD actionperformed() public void actionperformed(actionevent e) { int number1 = Integer.parseInt( number1jtextfield.gettext() ); int number2 = Integer.parseInt( number2jtextfield.gettext() ); int thegcd = greatestcommondivisor( number1, number2 ); resultjtextfield.settext( "" + thegcd ); } // actionperformed In actionperformed(), we can get the values that the user has entered into the text fields, and then compute the GCD based on those values. Note that as the result of gettext() is a String, we need to parse the string to an int before we can process it. This is similar to the original example where the arguments were passed in from the command line Once we ve calculated the GCD, we can then set the value of the result field. 81

82 Running GCD GCD 82

83 Coursework Task Provide a GUI that allows you to input three numbers and calculate their GCD. 83

84 Enabling and Disabling Components Components like buttons and text fields allow the user to interact with them We can press buttons or enter text into text fields Sometimes in a GUI we might want to disable a component. For example, in a mailer, we might not want the user to be able to send a message unless a valid mail address has been entered into the To: field. We could do this by: Allowing the user to press the Send button, but raising an error if the mail address is invalid Disabling the Send button until a valid mail address has been given. Java Components can be enabled and disabled through the setenabled( boolean ) method. 84

85 Disabling Text Fields In our GCD example, it doesn t make any sense for the user to be able to type text into the result field. We can prevent this happening by disabling it.? A disabled JTextField seems a bit like a JLabel. Why have both? GCDDisabled 85

86 Coursework Task Reimplement StopClock with a split time making the following changes: Use JTextField instead of JLabel to display the start/stop date and elapsed time. Change the behaviour of the split time button so that it is disabled when the clock isn t running. 86

87 JTextArea A JTextField is good for input or display of a single line of text. If we want to display more than one line, a JTextArea is appropriate. An example using a JTextArea is an application that displays a times table. 87

88 TimesTable instance variables public class TimesTable extends JFrame implements ActionListener {... private JTextField multiplierjtextfield = new JTextField( 5 ); private JTextArea displayjtextarea = new JTextArea( 15, 20 );... } The TimesTable GUI has a single text field for input of a value, and a text area to display the results of calculating the table. When we create a text area, we say how many rows and columns we expect it to have again as with the text fields, this allows the layout manager to work out how much space it should give the text area. 88

89 BorderLayout The TimesTable GUI is going to use a third layout manager that we haven t yet seen BorderLayout. This is slightly more complicated than FlowLayout and GridLayout, but provides more flexibility. Combinations of FlowLayout, GridLayout and BorderLayout will allow us to build quite sophisticated interfaces. 89

90 BorderLayout In BorderLayout, the container is divided into five areas: North, South, East, West and Center North West Center East South When we add a component to a container that s using a BorderLayout, we say which area we want the component to appear in: Constants from the BorderLayout class are used to indicate this. contents.add( mycomponent, BorderLayout.NORTH ) 90

91 TimesTable constructor public TimesTable() { settitle("times Table"); Container contents = getcontentpane(); contents.setlayout(new BorderLayout()); contents.add( multiplierjtextfield, BorderLayout.NORTH ); contents.add( displayjtextarea, BorderLayout.CENTER ); JButton displayjbutton = new JButton( "Display ); contents.add( displayjbutton, BorderLayout.SOUTH ); displayjbutton.addactionlistener( this ); pack(); } // TimesTable The constructor is similar to those we ve seen before, but here, when we add the components, we tell the layout manager which area of the layout we want them to appear in. Order is no longer important. We could add the button first and it would still appear at the bottom of the screen. With BorderLayout we have to be careful that we don t add two components to the same area. 91

92 TimesTable actionperformed() public void actionperformed( ActionEvent e ) { displayjtextarea.settext( "" ); int multiplier = Integer.parseInt( multiplierjtextfield.gettext() ); displayjtextarea.append( " \n" ); displayjtextarea.append( " Times table for " + multiplier + "\n" ); displayjtextarea.append( " \n" ); for (int thisnumber = 1; thisnumber <= 10; thisnumber = thisnumber + 1) displayjtextarea.append( " " + thisnumber + " x " + multiplier + " = " + thisnumber * multiplier + "\n" ); displayjtextarea.append( " \n" ); } // actionperformed In actionperformed(), the first thing we do is clear the text area by using settext() to set it to be the empty string. settext() will replace any existing text. We can then append text to the text area using append(). This doesn t replace the area, but adds the text on to the end. We can include new lines in the text by including the newline character "\n". 92

93 TimesTable actionperformed() public void actionperformed( ActionEvent e ) { displayjtextarea.settext( " ); int multiplier = Integer.parseInt( multiplierjtextfield.gettext() ); displayjtextarea.append( " \n" ); displayjtextarea.append( " Times table for " + multiplier + "\n" ); displayjtextarea.append( " \n" ); for ( int thisnumber = 1; thisnumber <= 10; thisnumber = thisnumber + 1 ) displayjtextarea.append( " " + thisnumber + " x " + multiplier + " = " + thisnumber * multiplier + "\n" ); displayjtextarea.append( " \n" ); } // actionperformed A for loop is used to append the times table to the text area. 93

94 Running TimesTable TimesTable 94

95 JPanel: Building things up from pieces So far, all our interfaces have been relatively simple. We ve been able to use a single container to hold the pieces that we wanted. Often, however, our interfaces will be made up of a number of different parts or panels, that we want to combine together into one big piece. For example, think of Mozilla s mail interface. In this case, having a single container and layout manager won t be enough. Java provides a lightweight container known as JPanel that allows us to do build things up. A JPanel is a blank area that we can add things to. The JPanel can then be added to other containers. 95

96 GCDWithPanels constructor public GCDWithPanels() { settitle("gcd"); Container contents = getcontentpane(); contents.setlayout(new GridLayout(0, 1)); JPanel numberfieldspanel = new JPanel(); numberfieldspanel.setlayout( new GridLayout( 0, 2 ) ); contents.add( numberfieldspanel ); numberfieldspanel.add( new JLabel( "Number 1" ) ); numberfieldspanel.add( new JLabel( "Number 2" ) ); numberfieldspanel.add( number1jtextfield ); numberfieldspanel.add( number2jtextfield );... } // GCDWithPanels In the constructor, we build a number of different instances of JPanel. Each one has its own layout manager, and panels can then be added to other panels or the contents of the JFrame. Note that the order in which we add things here doesn t matter. The panel is added to the container before the labels and fields are added to the panel. Calling pack() at the end of the constructor makes sure that everything gets sized properly. 96

97 Running GCDWithPanels GCDWithPanels 97

98 Anatomy of GCDWithPanels numberfieldspanel with a 2-column grid layout contents with a 1- column grid layout buttonandresultpanel with a 2-column grid layout. Note that the Compute button is the same size as the combined label and field on the right hand side resultpanel with a 1-column grid layout 98

99 Information Overload! In our TimesTable example, we created a JTextArea that was big enough for the text that we wanted to display: private JTextArea displayjtextarea = new JTextArea( 15, 20 );? What happens if we put more than 15 lines of text into this? We can test this by changing the interface. We add a field that allows the user to input the size of table required and then change the termination condition of the for loop. private JTextField tablesizejtextfield = new JTextField(5); int tablesize = Integer.parseInt(tableSizeJTextField.getText()); for ( int thisnumber = 1; thisnumber <= tablesize; thisnumber = thisnumber + 1 ) displayjtextarea.append( " " + thisnumber + " x " + multiplier + " = " + thisnumber * multiplier + "\n" ); 99

100 Running TimesTable Once the text area is full, the text gets lost and doesn t appear on the screen. We can move the cursor off the bottom, but we still can t see anything. A solution to this is to use a Scroll Bar. TimesTable2 100

101 Scroll Bars Scroll Bars are often used in windowing applications when components are too big to fit into the available space. They serve a number of purposes: They allow the user to navigate (scroll) the area to find the right place They provide an indication of where we are in the text They give an indication of how much text is hidden the smaller the bar, the smaller the proportion of the text that is being shown. 101

102 Scroll Bars This scrollbar is telling me that I m at the top of the text and I m seeing around 10% of what there is. 102

103 JScrollPane JScrollPane is a component that provides a scrollable wrapper around a component. If the component will fit into the available space, then (by default) nothing happens and no scroll bars are shown. If the component is too big, the JScrollPane will provide scrollbars that allow you to see all the text. 103

104 TimesTableScroll constructor public TimesTableScroll() {... contents.add( multiplierjtextfield, BorderLayout.NORTH ); contents.add( new JScrollPane( displayjtextarea ), BorderLayout.CENTER );... } // TimesTableScroll The constructor is the same as before, except this time we create a new JScrollPane containing the JTextField and add that to the contents. 104

105 Running TimesTableScroll Now we can scroll down to see all the results of the table. TimesTableScroll 105

106 Coursework Task Implement a GUI that gives an interface to the Three Weights problem that you saw in Chapter 3. The GUI should allow you to enter three values for the weights, and will then display in a text area the possible weights that could be measured using the given values. 106

107 Containment Hierarchies Containers like JPanel allow us to build up nested collections of components. In order to appear on the screen, every GUI component must be part of a containment hierarchy. A containment hierarchy is a tree of components that has an instance of a Top Level Container (such as JFrame) as its root. 107

108 Summary Components for displaying and entering text JTextField JTextArea More sophisticated layout management BorderLayout Building up interfaces in pieces JPanel JScrollPane 108

109 COMP16121 Multiple Windows & Models COMP10081 Sean Bechhofer

110 More than one Window So far, all our programs have used a single window (or frame) This doesn t have to be the case We can have a number of different windows open at the same time. To demonstrate this, we ll extend our GCD example to allow the user to open up another window. GCDWithNew 110

111 GCDWithNew changes As with the StopClock example, we add a new button to the window. The class is changed to add buttons as instance variables We also change the constructor to add the button to the screen and register the GCDWithNew object with the button as a listener. 111

112 GCDWithNew actionperformed() public void actionperformed(actionevent e) { if ( e.getsource() == computejbutton ) { int number1 = Integer.parseInt(number1JTextField.getText()); int number2 = Integer.parseInt(number2JTextField.getText()); int thegcd = greatestcommondivisor(number1, number2); resultjtextfield.settext("" + thegcd); } else if ( e.getsource() == newjbutton ) { GCDWithNew newone = new GCDWithNew(); newone.setvisible( true ); } } // actionperformed The code computing the GCD is the same. However, this is only executed if the Compute button was pressed. If the New button is pressed, we create a new object and then ask it to display on the screen. Recall that the constructor doesn t make the window display. 112

113 Running GCDWithNew GCDWithNew 113

114 Problem I The new window opens up directly on top of the old one. This is because we haven t said anything about where we expect the window to appear By default the window appears in the top left hand corner A solution would be to tell the new window that it should open up in a slightly different place. 114

115 Locations We can solve this problem by: Getting the location of the current window Setting the location of the new window to be a position relative to the location of the current window. We can get the location of a window using method: public Point getlocation() We can set the location of a window using method: public void setlocation( Point p ) Point is a class from the Java libraries that represents a pair of (x, y) coordinates. GCDWithNew2 115

116 Problem II What happens when we close one of the windows? All of the windows disappear and the program exits. This is exactly how we told the application to behave! public GCDWithNew2() {... /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation( EXIT_ON_CLOSE );... } // GCDWithNew This means that the application terminates when any of the windows are closed.? Why might this be a problem? 116

117 Setting the Default Close Operation In our code we have been using EXIT_ON_CLOSE as the default action. This means that the entire application quits An alternative is to use DISPOSE_ON_CLOSE /* Specify appropriate behaviour when the window is closed */ setdefaultcloseoperation( DISPOSE_ON_CLOSE ); This means that the window will be hidden, then the object representing the frame will be disposed of. If we do this, it means that when one window is closed, the application will continue to run, and other windows will still be there. GCDWithNew3 117

118 When does the application terminate? With the use of EXIT_ON_CLOSE, we can be sure that the application will terminate when a window is closed. With DISPOSE_ON_CLOSE, as long as we have been careful about the creation of our windows and listener objects, the application will terminate when all the windows have been closed. The GUI thread(s) will terminate and the virtual machine will end the program. Recall our earlier discussion of threads 118

119 A Simple Log Book application Your logbook is used to record information as you work. In this example, we provide a GUI where messages can be typed into a window and then collected together in a single log. We can open separate windows for different tasks. The GUI has: A field for a label A text area for the message Buttons for Log and New actions. LogGUI 119

120 LogBook import java.text.simpledateformat; import java.util.date; /** A class that records information. */ public class LogBook { private String logname; private String log; private SimpleDateFormat dateformat; /* Constructor */ public LogBook( String alogname ) { logname = alogname; dateformat = new SimpleDateFormat( "hh:mm:ss" ); log = ""; } }... The LogBook has a name There is also an instance of SimpleDateFormat This is a helper class from the Java libraries that can print out Date objects in a nice way. 120

121 LogBook /** Log a message. */ public void logmessage( String label, String message ) { Date now = new Date(); String logmessage = "Time: " + dateformat.format( now ) + "\n" + "Label: " + label + "\n"+ "Note: " + message; /* Add the message to the log */ log = log + logmessage + "\n"; /* Display the message */ System.out.println( " " ); System.out.println( logmessage ); System.out.println( " " ); } There is a method on LogBook that can be called when somebody wants to log a message. The method takes a label and the message. The message is printed out to the console along with the time. 121

122 LogGUI public class LogGUI extends JFrame implements ActionListener {... /* The LogBook that we will send messages to */ private LogBook logbook; } public LogGUI( LogBook alogbook ) { logbook = alogbook;... } // LogGUI... LogGUI provides us with a window where we can log messages. An instance of LogGUI has a reference to a LogBook This is passed in to the constructor. 122

123 LogGUI public void actionperformed( ActionEvent e ) { if ( e.getsource() == logbutton ) { /* Log the message */ logbook.logmessage( labelfield.gettext(), messagetextarea.gettext() ); /* Now clear the text */ messagetextarea.settext(""); } else if ( e.getsource() == newbutton ) { /* Create a new GUI with the same logbook */ LogGUI newloggui = new LogGUI( logbook ); newloggui.setvisible( true ); } } // actionperformed If the Log button is pressed, then the text that has been typed into the text area is passed to the room object s logmessage() method. This will result in the message being printed out on the console. We then clear the text area ready for the next message. 123

124 LogGUI public void actionperformed( ActionEvent e ) { if ( e.getsource() == logbutton ) { /* Log the message */ logbook.logmessage( labelfield.gettext(), messagetextarea.gettext() ); /* Now clear the text */ messagetextarea.settext(""); } else if ( e.getsource() == newbutton ) { /* Create a new GUI with the same logbook */ LogGUI newloggui = new LogGUI( logbook ); newloggui.setvisible( true ); } } // actionperformed If the New button is pressed, then we create a new instance of LogGUI, but pass in the same LogBook instance. This means that any messages sent from the new window will be sent to the same LogBook instance. LogGUI 124

125 Multiple GUIs, one object What we re seeing here is a situation where we have more than one window or GUI manipulating a single object, sometimes referred as the model. We re also seeing that the state of the GUI may be held indirectly by other objects It does not necessarily have to be held as direct instance variables of the GUI class itself. LogGUI LogGUI LogBook 125