Frames, GUI and events. Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling

Size: px

Start display at page:

Download "Frames, GUI and events. Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling"

Randolph Allen
5 years ago
Views:

1 Frames, GUI and events Introduction to Swing Structure of Frame based applications Graphical User Interface (GUI) Events and event handling

2 Introduction to Swing The Java AWT (Abstract Window Toolkit) package is the original Java package for doing GUIs A GUI (graphical user interface) is a windowing system that interacts with the user The Swing package is an improved version of the AWT However, it does not completely replace the AWT Some AWT classes are replaced by Swing classes, but other AWT classes are needed when using Swing Swing GUIs are designed using a form of object-oriented programming known as event-driven programming Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-2

3 What is a frame? Frame object is a window with a title bar that provides the basic attributes of a window such as buttons to minimize, maximize and close.

4 Resizing windows Frame with less width Width reduced further

5 My mental picture of a frame Visualize Graphical User interfaces as pictures to be mounted on this picture frame.

Some Methods in the Class JFrame (Part 1 of 3)

Some Methods in the Class JFrame (Part 2 of 3)

Some Methods in the Class JFrame (Part 3 of 3)

9 The Container Class Any class that is a descendent class of the class Container is considered to be a container class The Container class is found in the java.awt package, not in the Swing library Any object that belongs to a class derived from the Container class (or its descendents) can have components added to it The class JFrame is a descendent class of the class Container Therefore they and any of their descendents can serve as a container Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-9

10 The JComponent Class Any subclass of the class JComponent is called a component class Any JComponent object or component can be added to any container class object We will study a few subclasses of JComponent. Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-10

11 Objects in a Typical GUI Almost every GUI built using Swing container classes will be made up of three kinds of objects: 1. The container itself, probably a panel or window-like object 2. The components added to the container such as labels, buttons, and text areas 3. A layout manager to position the components inside the container Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-11

12 The GUI objects we need to know JLabel class to display messages JTextField class for single line two way communication JTextArea for multiple line displays JButton for buttons that may be pressed.

13 Labels For the problem we are studying we need a GUI to display a message. A label is an object of the class JLabel Text can be added to a JFrame using a label The text for the label is given as an argument when the JLabel is created The label can then be added to a JFrame JLabel greeting = new JLabel("Hello"); add(greeting); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-13

Some Methods in the Class JTextComponent (Part 1 of 2)

Some Methods in the Class JTextComponent (Part 2 of 2)

16 JTextField class Objects of the JTextField class used for two way communication - either to display an object of the String class on say an object of the JFrame class or to allow the user to type in an object of the String class in an object of the JTextField class for retrieval and manipulation. This class is very useful for interacting with lines of text.

17 Useful methods of this class Constructor - JTextField(n) where n gives how many characters are to be displayed. settext(astring) defines the string to be stored in the object. N characters of this string are also displayed. gettext() returns the object of the String class saved in the object.

18 Text Fields A text field is an object of the class JTextField It is displayed as a field that allows the user to enter a single line of text private JTextField name;... name = new JTextField(NUMBER_OF_CHAR); In the text field above, at least NUMBER_OF_CHAR characters can be visible Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-18

19 Text Fields There is also a constructor with one additional String parameter for displaying an initial String in the text field JTextField name = new JTextField( "Enter name here.", 30); A Swing GUI can read the text in a text field using the gettext method String inputstring = name.gettext(); The method settext can be used to display a new text string in a text field name.settext("this is some output"); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-19

20 Text Areas A text area is an object of the class JTextArea It is the same as a text field, except that it allows multiple lines Two parameters to the JTextArea constructor specify the minimum number of lines, and the minimum number of characters per line that are guaranteed to be visible JTextArea thetext = new JTextArea(5,20); Another constructor has one addition String parameter for the string initially displayed in the text area JTextArea thetext = new JTextArea( "Enter\ntext here." 5, 20); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-20

21 Text Areas The line-wrapping policy for a JTextArea can be set using the method setlinewrap The method takes one boolean type argument If the argument is true, then any additional characters at the end of a line will appear on the following line of the text area If the argument is false, the extra characters will remain on the same line and not be visible thetext.setlinewrap(true); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-21

22 Text Fields and Text Areas A JTextField or JTextArea can be set so that it can not be changed by the user thetext.seteditable(false); This will set thetext so that it can only be edited by the GUI program, not the user To reverse this, use true instead (this is the default) thetext.seteditable(true); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-22

23 Numbers of Characters Per Line The number of characters per line for a JTextField or JTextArea object is the number of em spaces An em space is the space needed to hold one uppercase letter M The letter M is the widest letter in the alphabet A line specified to hold 20 M 's will almost always be able to hold more than 20 characters Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-23

24 Buttons A button object is created from the class JButton and can be added to a JFrame The argument to the JButton constructor is the string that appears on the button when it is displayed JButton endbutton = new JButton("Click to end program."); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-24

25 How to show a GUI object? Create the object Attach the object to the frame. Question - Where to attach the object? Decided by the layout manager. The simplest layout manager - the flow layout manager

26 Containers and Layout Managers Multiple components can be added to the content pane of a JFrame using the add method However, the add method does not specify how these components are to be arranged To describe how multiple components are to be arranged, a layout manager is used There are a number of layout manager classes such as BorderLayout, FlowLayout, and GridLayout Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-26

27 Flow Layout Managers The FlowLayout manager is the simplest layout manager setlayout(new FlowLayout()); It arranges components one after the other, going from left to right Components are arranged in the order in which they are added Since a location is not specified, the add method has only one argument when using the FlowLayoutManager add.(label1); Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-27

28 How does a flow layout manager work? It works by placing the GUI objects left to right top to bottom. Example of picture frame Suppose we have 3 pictures to mount. How do we proceed? Take the first picture Put it on. Take the second picture. Put it on. etc

29 Where does the next picture go? Look for space - place from left to right, top to bottom. There is enough space for the first 2 pictures in the top row.

30 Where will the last picture go? Since there is no place in the top row, it goes to the next row.

31 What if the window is resized? The layout manager automatically moves the position of the GUI objects, moving them from row to row as needed.

32 Problem 1 Show a window with two messages on it.

33 General form of a frame based program import javax.swing.*; import java.awt.*; import java.awt.event.*; public class your_application_name extends JFrame implements an interface // Optional not needed now { Variables needed for your application Constructor method other methods as needed methods needed for the interface // not needed now main method }

34 import java.awt.*; // import the java.awt package import javax.swing.*; public class MyFirstFrame extends JFrame{ JLabel myquestion, yourresponse; public MyFirstFrame(){ super("an example of a Frame"); //Define the label on the titlebar setlayout( new FlowLayout() ); // Define what layout manager // will be used. myquestion = new JLabel("How are you?"); // Create a GUI object. // My mental image - get hold of a picture add(myquestion); //Add it to the frame. // My mental image - mount the picture in the next available place yourresponse = new JLabel("I am fine"); add(yourresponse); }

35 Net result : two GUI objects of JLabel class are displayed on the frame

36 The main method public static void main(string args[]) { MyFirstFrame aframe = new MyFirstFrame(); aframe.setsize(250, 100); aframe.setvisible(true); } // Define a variable of the class I just defined // Create an object of this class //Define the size of the frame to be displayed // Display the frame

37 What does the frame look like? We have already seen this before

38 What is an event? An event is something that happens in the outside world that our program should be aware of. Examples : pressing the Carriage Return (CR) pressing a Java button clicking or dragging a mouse button (not to be covered in this course)

39 Events Event-driven programming is a programming style that uses a signal-and-response approach to programming An event is an object that acts as a signal to another object know as a listener The sending of an event is called firing the event The object that fires the event is often a GUI component, such as a button that has been clicked Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-39

40 Listeners A listener object performs some action in response to the event A given component may have any number of listeners Each listener may respond to a different kind of event, or multiple listeners might may respond to the same events Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-40

41 Event Handlers A listener object has methods that specify what will happen when events of various kinds are received by it These methods are called event handlers The programmer using the listener object will define or redefine these event-handler methods Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-41

43 Event-Driven Programming Event-driven programming is very different from most programming seen up until now So far, programs have consisted of a list of statements executed in order When that order changed, whether or not to perform certain actions (such as repeat statements in a loop, branch to another statement, or invoke a method) was controlled by the logic of the program Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-43

44 Event-Driven Programming In event-driven programming, objects are created that can fire events, and listener objects are created that can react to the events The program itself no longer determines the order in which things can happen Instead, the events determine the order Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-44

45 Event-Driven Programming In an event-driven program, the next thing that happens depends on the next event In particular, methods are defined that will never be explicitly invoked in any program Instead, methods are invoked automatically when an event signals that the method needs to be called Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-45

46 Action Listeners and Action Events Clicking a button fires an event The event object is "sent" to another object called a listener This means that a method in the listener object is invoked automatically Furthermore, it is invoked with the event object as its argument In order to set up this relationship, a GUI program must do two things 1. It must specify, for each button, what objects are its listeners, i.e., it must register the listeners 2. It must define the methods that will be invoked automatically when the event is sent to the listener Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-46

47 A diagram showing event handling

48 Tip: Inputting and Outputting Numbers When attempting to input numbers from any Swing GUI, input text must be converted to numbers If the user enters the number 42 in a JTextField, the program receives the string "42" and must convert it to the integer 42 The same thing is true when attempting to output a number In order to output the number 42, it must first be converted to the string "42" Copyright 2008 Pearson Addison-Wesley. All rights reserved 17-48

49 An interface already defined in Java that we will use here interface ActionListener { public void actionperformed(actionevent e); } Any concrete class C implementing ActionListener must include the abstract method actionperformed with exactly the specified signature and return type. When the action listener uses an object of class C, it is necessary to ensure that the object of class C can handle the event. This guarantee is available since C implements ActionListener.

50 Problem 2 Step 1) allow user to type in a line of text in an input area, followed by a CR indicating end of line. Step 2) display in an output area the line typed in and clear the input area. Step 3) go to step 1.

51 An example: type lines and it is displayed in another GUI object

52 What happens after another line is typed in

53 What GUI objects do we need? A label nother label A place to type a line A box to display results

54 The problem public class MySecondFrame { // GUI objects we need // Constructor // event handler // main method which will // display the JFrame object }

55 A Frame based program for event handling import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MySecondFrame extends JFrame implements ActionListener{ JLabel prompt, outputtitle; JTextField inputarea; // input value here JTextArea outputarea; // output displayed here

56 public MySecondFrame() { super("an example of a Frame"); //setup the gui components and setlayout(new FlowLayout()); // initialize variables prompt = new JLabel( "Type a line" ); // prompt user to input value add( prompt ); // attach prompt to frame inputarea = new JTextField( 10 ); inputarea.addactionlistener(this); // we want to listen for an // ActionEvent add( inputarea ); //attach input Area to frame outputtitle = new JLabel( "Output produced by program" ); add( outputtitle ); // attach outputtitle to frame } outputarea = new JTextArea(10, 20); // we initially allow 10 lines // each with 20 chars/line add( outputarea ); // attach outputarea to frame

57 // process user's action on the input text field public void actionperformed( ActionEvent event) { String userinput; userinput = inputarea.gettext();//extract the input typed by the user outputarea.append("you typed - " + userinput + " \n"); // display the inputarea.settext(""); // input on the outputarea and clear // the inputarea. }

58 public static void main(string args[]) { } MySecondFrame aframe = new MySecondFrame(); aframe.setsize(250, 300); aframe.setvisible(true); }

59 Problem 3 Same as problem 2 except that there is a button which, when pressed, clears the output area.

60 Initial appearance The user can type a line of text followed by CR

61 Appearance after typing two lines The user can press the button at any time to reset the output area.

62 Idea Add a button to the frame. When pressed, the button creates an event also of the same ActionEvent class. The event handler analyzes the event and if the event happened in the object of JTextField work as before If the event happened in the object of the JButton class, clear the output area. Note object of JButton class

63 import java.awt.event.*; import java.awt.*; import javax.swing.*; public class MyThirdFrame extends JFrame implements ActionListener { JLabel prompt, outputtitle; JTextField inputarea; JTextArea outputarea; JButton mybutton; /* A new object same idea

64 public MyThirdFrame() { super("use of buttons"); setlayout(new FlowLayout()); prompt = new JLabel( "Type a line" ); add( prompt ); inputarea = new JTextField( 10 ); inputarea.addactionlistener(this); add( inputarea ); outputtitle = new JLabel( "Output produced by program" ); add( outputtitle ); outputarea = new JTextArea(10, 20); add( outputarea ); mybutton = new JButton("Clear Output"); mybutton.addactionlistener(this); add( mybutton ); setsize(250, 300); // setsize and setvisible may appear in constructor setvisible(true); }

65 public void actionperformed( ActionEvent event){ String userinput; if (event.getsource() == inputarea) { outputarea.append("you typed - " + event. getactioncommand() + " \n"); // Notice use of getactioncommand() to extract the string // associated with the event inputarea.settext(""); } else outputarea.settext(""); } } public static void main(string args[]){ MyThirdFrame aframe = new MyThirdFrame(); }

66 Problem 4 Same as problem 3 except that we now use a different object to handle the event in the button. Question Why do we need to handle a different object in the first place? Answer If the same event handler deals with events occurring in various objects, its task becomes complex Solution is to let different objects deal with events from various sources. The task for each event handler becomes simpler.

67 import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MyFourthFrame extends JFrame implements ActionListener { JLabel prompt, outputtitle; JTextField inputarea; JTextArea outputarea; JButton mybutton;

68 public MyFourthFrame() { super("use of buttons"); setlayout(new FlowLayout()); prompt = new JLabel( "Type a line" ); add( prompt ); inputarea = new JTextField( 10 ); inputarea.addactionlistener(this); add( inputarea ); outputtitle = new JLabel( "Output produced by program" ); add( outputtitle ); outputarea = new JTextArea(10, 20); add( outputarea ); mybutton = new JButton("Clear Output"); mybutton.addactionlistener(new ButtonEventHandler(this)); add( mybutton ); setsize(250, 300); setvisible(true); }

69 public void actionperformed( ActionEvent event){ outputarea.append("you typed - " + event. getactioncommand() + " \n"); inputarea.settext(""); } } public static void main(string args[]) {MyFourthFrame aframe = new MyFourthFrame(); }

70 import javax.swing.*; import java.awt.*; import java.awt.event.*; class ButtonEventHandler implements ActionListener{ MyFourthFrame local_frame; public ButtonEventHandler(MyFourthFrame frame_sent){ local_frame = frame_sent; } } public void actionperformed( ActionEvent e ){ local_frame.outputarea.settext("");; }

71 Inner Class and anonymous class Until now, we have defined classes that were defined at file scope which can be used in any valid context. Inner classes, including anonymous classes, where a class is defined inside another class is another concept to remember.

72 Simple Uses of Inner Classes Inner classes are classes defined within other classes The class that includes the inner class is called the outer class There is no particular location where the definition of the inner class (or classes) must be place within the outer class Placing it first or last, however, will guarantee that it is easy to find Copyright 2008 Pearson Addison-Wesley. All rights reserved 13-72

73 Simple Uses of Inner Classes An inner class definition is a member of the outer class in the same way that the instance variables and methods of the outer class are members An inner class is local to the outer class definition The name of an inner class may be reused for something else outside the outer class definition If the inner class is private, then the inner class cannot be accessed by name outside the definition of the outer class Copyright 2008 Pearson Addison-Wesley. All rights reserved 13-73

74 Simple Uses of Inner Classes There are two main advantages to inner classes They can make the outer class more self-contained since they are defined inside a class Both of their methods have access to each other's private methods and instance variables Using an inner class as a helping class is one of the most useful applications of inner classes If used as a helping class, an inner class should be marked private Copyright 2008 Pearson Addison-Wesley. All rights reserved 13-74

75 Tip: Inner and Outer Classes Have Access to Each Other's Private Members Within the definition of a method of an inner class: It is legal to reference a private instance variable of the outer class It is legal to invoke a private method of the outer class Within the definition of a method of the outer class It is legal to reference a private instance variable of the inner class on an object of the inner class It is legal to invoke a (nonstatic) method of the inner class as long as an object of the inner class is used as a calling object Within the definition of the inner or outer classes, the modifiers public and private are equivalent Copyright 2008 Pearson Addison-Wesley. All rights reserved 13-75

79 A new version of an application you have see before using inner classes import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MyFifthFrame extends JFrame implements ActionListener { JLabel prompt, outputtitle; JTextField inputarea; JTextArea outputarea; JButton mybutton;

80 public MyFifthFrame() { super("use of buttons"); setlayout(new FlowLayout()); prompt = new JLabel( "Type a line" ); add( prompt ); inputarea = new JTextField( 10 ); inputarea.addactionlistener(this); add( inputarea ); outputtitle = new JLabel( "Output produced by program" ); add( outputtitle ); outputarea = new JTextArea(10, 20); add( outputarea ); mybutton = new JButton("Clear Output"); mybutton.addactionlistener(new ButtonEventHandler()); add( mybutton ); setsize(250, 300); setvisible(true); }

81 } public void actionperformed( ActionEvent event){ outputarea.append("you typed - " + event. getactioncommand() + " \n"); inputarea.settext(""); } public static void main(string args[]){ MyFifthFrame aframe = new MyFifthFrame(); } class ButtonEventHandler implements ActionListener{ public void actionperformed( ActionEvent e ) { outputarea.settext("");; } }

82 Why use a separate class for different events? The original program had a complex actionperformed where we check where the event occurred and act accordingly. In this version, code for the inner class is simple since it inherits the JTextfield from the outer class. Next we will eliminate any named class from this all together!! Idea the class has a very limited role to play and we don t need to give the class a name.

83 Anonymous Classes If an object is to be created, but there is no need to name the object's class, then an anonymous class definition can be used The class definition is embedded inside the expression with the new operator Anonymous classes are sometimes used when they are to be assigned to a variable of another type The other type must be such that an object of the anonymous class is also an object of the other type The other type is usually a Java interface Copyright 2008 Pearson Addison-Wesley. All rights reserved 13-83

87 Idea of using anonymous classes. You extend a built-in adapter class called ActionListener by adding just the methods you need the actionperformed method in this case. Similar adapter classes are available for handling other events.

88 Anonymous class In event handling, of the type described in this program, we don t need to care what is the class of the object that is actually handling the event. This is a simple method to specify only what is to be done to handle the type of event of interest to us. The adapater class has empty bodies for all methods required in the interface. ActionEvent is not a good example to illustrate the advantage of adapter classes.

89 Mouse Listener The MouseListener interface has 5 methods for the following events: Mouse pressed, mouse released, mouse clicked, mouse entered and mouse exited. Most of the time the user is interested in a few of these events. Using adapter classes you only specify what you are interested in.

90 Application showing use of anonymous class import javax.swing.*; import java.awt.*; import java.awt.event.*; public class MySixthFrame extends JFrame implements ActionListener { JLabel prompt, outputtitle; JTextField inputarea; JTextArea outputarea; JButton mybutton;

91 public MySixthFrame() { super("use of buttons"); setlayout(new FlowLayout()); prompt = new JLabel( "Type a line" ); add( prompt ); inputarea = new JTextField( 10 ); inputarea.addactionlistener(this); add( inputarea ); outputtitle = new JLabel( "Output produced by program" ); add( outputtitle ); outputarea = new JTextArea(10, 20); add( outputarea );

92 mybutton = new JButton("Clear Output"); mybutton.addactionlistener(new ActionListener(){ public void actionperformed(actionevent e) { outputarea.settext(""); } } ); add( mybutton ); setsize(250, 300); setvisible(true); } public void actionperformed( ActionEvent event){ outputarea.append("you typed - " + event. getactioncommand() + " \n"); inputarea.settext(""); } } } public static void main(string args[]){ MySixthFrame aframe = new MySixthFrame();

93 Problem to discuss Design a teller for a grocery store.

Graphical User Interface (Part-3) Supplementary Material for CPSC 233

Graphical User Interface (Part-3) Supplementary Material for CPSC 233 Menu Bars, Menus, and Menu Items A menu is an object of the class JMenu A choice on a menu is called a menu item, and is an object