Full HTML for
Given by Nancy McCracken at NPAC Java Academy February--April 99 on March 1999. Foils prepared March 26 1999
Outside Index
Summary of Material
These slides present a simplified view of the Abstract Windowing Toolkit (AWT), which is used in Java to build Graphical User Interfaces (GUI)s.
|
| Note that components should not be put in the same applet area as drawing with Graphics. |
Denote Foils where Image Critical
Denote Foils where Image has important information
Denote Foils where HTML is sufficient
denotes presence of Additional linked information which is greyed out if missing
Java Academy: Graphical User Interface
Part 2A: Graphical User Interface
Labels
Button
The ActionListener Interface
Handling Button Events
TextFields
TextAreas
Layouts
GridLayout
BorderLayout
Nesting Layouts with Panels
Example of Nested Layout
Canvas
Defining another class
Using the new class
Animation
Threads
Starting and Stopping the Thread
Removing Flickering
Outside Index
Summary of Material
HTML version of Basic Foils prepared March 26 1999 
Full HTML Index
| Nancy McCracken |
| NPAC @ SU |
| 111 College Place |
| Syracuse, NY 13244-4100 |
| Syracuse University |
| College of Engineering and Computer Science |
| Northeast Parallel Architectures Center |
| present |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
These slides present a simplified view of the Abstract Windowing Toolkit (AWT), which is used in Java to build Graphical User Interfaces (GUI)s.
|
| Note that components should not be put in the same applet area as drawing with Graphics. |
HTML version of Basic Foils prepared March 26 1999 
Full HTML Index
| The simplest component is a Label object. |
| Adding a label to a GUI is like drawing a string - except that you don't have to say where things are placed in terms of pixels. |
| To add a label to an applet: add ( new Label ( "This is a label!" ) ; |
The label will be placed in the applet area in the next available space.
|
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| Adding a button to the applet is just as easy: Button button1 = new Button ( " Blue " ) ; add ( button1 ) ; |
| These statements add a button labelled Blue. |
| But nothing will happen when you press the button! |
| Pressing the button is called an event. You must add a "handler" method that is executed when a button event occurs. |
| A button event is a type of event called an ActionEvent in Java. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| To include a handler method for ActionEvents in your applet, you first add to your applet header that you are going to "implement" this interface: public class ButtonTest extends Applet implements ActionListener |
| This means that your applet must include a handler method called actionPerformed. Its argument is an ActionEvent, which has methods to give information about the event: public void actionPerformed ( ActionEvent event ) { if ( event.getSource ( ) == button1 ) { // code executed when button1 is pressed } . . . } |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| The last step is to connect the button to the actionPerformed method by registering that the applet is the class ready to "listen" for button events: button1.addActionListener ( this ) ; |
| The keyword this refers to the current applet. |
| Note that many buttons can add ActionListener and the one actionPerformed method should have code sections for each button. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| A TextField is a box in which the user enters a single line of text: TextField tf = new TextField ( 30 ) ; |
| The argument is an integer giving the width of the TextField in characters. |
| TextFields have methods either to get the text that a user typed in, or to write some text in the box: String word1 = tf.getText ( ) ; tf.setText ( "Thanks!" ) ; |
| Note that when the user presses enter, a TextField can also generate an ActionEvent, but it is generally better user design to respond to button events. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| A TextArea is a mult-line TextField. |
| Like TextFields, you can use the methods getText and setText on TextAreas. |
| Unlike TextFields, TextAreas do not generate ActionEvents, since pressing enter inserts a newline into the text (i.e. the cursor goes to the next line). |
| When writing Strings into a TextArea with the setText method, you must explicitly put newlines into the String to put text on different lines: TextArea ta = new TextArea ( 5, 60 ) ; ta.setText ( "The first line, \n the second line." ) ; |
| The TextArea above is created with room for 5 lines of text, each of 60 characters long. |
HTML version of Basic Foils prepared March 26 1999 
Full HTML Index
| So far, whenever we "add" a component such as a button or a textfield to an applet, it placed the component in the next available space from left-to-right and from top-to-bottom. |
| This is actually the default Layout, called FlowLayout. |
| There are additional Layouts that divide the applet area into sub-areas. We will show in the next pages GridLayout and BorderLayout. |
| label |
| label |
| button |
| textfield |
| textfield |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| A GridLayout divides the applet area into rows and columns of equal size. |
| To get a GridLayout, use the setLayout method in the applet, and make a GridLayout with the number of rows and columns: setLayout ( new GridLayout ( 3, 2 ) ); |
| Use the add method to add components in the same order as before, but now |
| label |
| label |
| button |
| textfield |
| textfield |
| they will line up, and they will be made the same size. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| The BorderLayout divides the applet area into 5 spaces, called North, South, East, West, and Center. It tries to make the edges long and skinny, and to leave the Center area as big as possible. |
| To get a BorderLayout, use the setLayout method: setLayout ( new BorderLayout ( ) ); |
| To add components, also say which area they should go in: add ( button1, BorderLayout.NORTH ); |
| North |
| South |
| W |
| e |
| s |
| t |
| E |
| a |
| s |
| t |
| You don't have to fill all the areas. |
| Center |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| Each of the subareas in a Layout can itself be subdivided according to some other Layout. |
| For each area that you want to subdivide, introduce a Panel: Panel panel1 = new Panel ( ) ; |
| A Panel area is like an Applet area in that you can set a Layout and add components. panel1.setLayout ( new GridLayout ( 5, 2 ) ) ; panel1.add ( button1 ); panel1.add ( button2 ); |
| After adding components to the Panel, add the whole panel to the applet: add ( panel1 ) ; |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| This applet is a BorderLayout. The NORTH area is one component, a textfield. The CENTER area is a panel. The Panel has a GridLayout with 2 rows and 2 columns. Each component is a button. |
| TextField |
| Button1 |
| Button2 |
| Button3 |
| Button4 |
| North |
| Center |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| Suppose that we want to use the drawing methods on a subarea of the applet. To do that, we introduce a Canvas, instead of a Panel. |
| Like an applet, you can have a paint (Graphics g) method for a canvas, in which you can call methods such as g.setColor( ) and g.drawRect ( ... ), and also the repaint( ) and update(Graphics g) methods are built in as well for canvases. |
| Since we want to define our own paint method for the canvas, we should define a separate class that extends a Canvas. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| In the same file as the applet, you can define another class. |
| It should have variables, a constructor method of the same name, and any other methods, such as paint. |
| class Drawarea extends Canvas |
| { //declare variables here |
| int x; |
| // this method is the constructor |
| public Drawarea ( ) |
| { |
| // do initialization stuff here |
| } |
| public void paint ( Graphics g ) |
| { |
| // call drawing methods here |
| } |
| . . . } |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| First the applet must create a new instance of the class. Note that the class name is used like a type (just like the built-in Java class names). Drawarea drawing = new Drawarea ( ); This executes the constructor, doing the initialization. |
| Now the applet can refer to variables in the class (e.g. x) using the dot notation with the instance, drawing: drawing.x = 10; |
| and use methods from the class: drawing.paint ( g ); |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| In a Java applet, to get the appearance of motion, you continually draw on the canvas with a new picture. |
| Some animations consist of a sequence of images, where each one differs a little from the previous one. Here you just keep calling drawImage, and the new Image covers up the old one. |
| A graphics animation repaints with a new set of graphics shapes or objects. This leads to a loop that keeps calling repaint, which will call paint. Each time paint is called, it should draw a picture with the objects in new locations. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| If you write the animation with a loop that keeps drawing new images of graphics objects, you cause a problem for the browser by having a long computation. (The browser will either freeze the window or eventually crash.) |
| This can be fixed by creating a Thread and putting the continual loop into a method called run that is the computation of the Thread. The run method is then executed independently of the browser on the computer. Thread thread = new Thread ( this ); |
| Create a run method in the same class as the thread: public void run ( ) { // put the continual loop in the body } |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| When the thread is created, it doesn't start running yet. You must call a method called thread.start, and you can stop it from running by calling thread.stop. |
| When the thread starts, it starts executing the run method. If it stops and then starts again, it continues the run method. |
| It is good design to put these calls to thread.start and thread.stop in the start and stop methods of the applet, so that the thread doesn't run whenever the applet window is not running. |
| Threads have other methods, such as thread.suspend and thread.resume when the user wants to start and stop the thread. |
HTML version of Basic Foils prepared March 26 1999
Full HTML Index
| There is another problem for graphics animations caused by continually calling repaint. Recall that repaint calls update, which blanks out the background and then calls paint. Paint then calls various graphics methods to make the new picture. |
| Unfortunately, there is enough time in-between update and paint, that the user can see flashes of background in-between the two pictures - this is called flickering. |
| The solution is to change update not to blank the background and to have paint create and draw on a separate image (including the background). The last thing paint does is to transfer that image to the canvas to produce the new picture in as little time as possible. |