Sei sulla pagina 1di 20
I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s The Basic Java Applet and JApplet

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s

The Basic Java Applet and JApplet

Rob Dempster

robd@cs.ukzn.ac.za

School of Computer Science University of KwaZulu-Natal Pietermaritzburg Campus

Science University of KwaZulu-Natal Pietermaritzburg Campus I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s –

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.1/20

Abstract

Abstract This is not a paper. It is the lecture presentation slides I used to provide

This is not a paper. It is the lecture presentation slides I used to provide a framework for the lectures I presented dealing with the material covered in Section 1 of Chapter 6 of David J. Eck’s book entitled Introduction to Programming Using Java [1]. The slides were prepared using SuSE Linux, Emacs, L A T E Xand Prosper.

c 2005, Robert Dempster. These are free slides. There are no restrictions on using or

redistributing or posting on the web a complete, unmodified copy of this material. There are some restrictions on modified copies. To be precise: Permiss ion is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.1 or any later version published by the Free Software Foundation; with no invariant sections, front cover text, or back cover text.

The most recent version of these slides are always available, at no charge, for downloading and for on-line use at the Web address http://saturn.cs.ukzn.ac.za/ robd/javaslides/. There you will find the L A T E Xsource code together with the slides in formats suitable for slide presentations (.sp.) and hand-outs (.ho.).

suitable for slide presentations (.sp.) and hand-outs (.ho.). I2PUJ4 - Chapter 6 - Applets, HTML, and

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.2/20

Interfaces Introduction

Java is a programming language designed for networked computers It contains many neat features to
Java is a programming language designed for networked computers It contains many neat features to

Java is a programming language designed for networked computers

It contains many neat features to make this easy to do in a reliableJava is a programming language designed for networked computers

language designed for networked computers It contains many neat features to make this easy to do

and the World Wide Web i.e., the design of distributed computing applications

and secure manner.

Part of learning Java is learning to program applets and other Graphical User Interface (GUI) programs. applets and other Graphical User Interface (GUI) programs.

GUI programs are event-driven . event-driven.

That is, user actions such as clicking on a button or pressing a key on the keyboard, generate events , and the program must respond to these events as they occur. events, and the program must respond to these events as they occur.

Related to GUI programming is Human Computer Interaction (HCI).
Related to GUI programming is Human Computer Interaction (HCI).

Related to GUI programming is Human Computer Interaction (HCI).

Related to GUI programming is Human Computer Interaction (HCI).

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.3/20

The Basic Java Applet and JApplet

Java applets are small programs that are meant to run on a page in a

Java applets are small programs that are meant to run on a page in a Web browser.However: An applet is not a complete program. It doesn’t have to be small. There

Java applets are small programs that are meant to run on a page in a Web

However:programs that are meant to run on a page in a Web browser. An applet is

An applet is not a complete program.that are meant to run on a page in a Web browser. However: It doesn’t have

It doesn’t have to be small.a Web browser. However: An applet is not a complete program. There are other ways to

There are other ways to use them.is not a complete program. It doesn’t have to be small. An applet is inherently part

An applet is inherently part of a graphical user interface.have to be small. There are other ways to use them. It is a type of

It is a type of graphical component that can be displayed in a window which we will hereafter assume, belongs to component that can be displayed in a window which we will hereafter assume, belongs to a Web browser.

type of graphical component that can be displayed in a window which we will hereafter assume,
type of graphical component that can be displayed in a window which we will hereafter assume,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.4/20

The Basic Java Applet and JApplet (cont’d)

The Basic Java Applet and JApplet (cont’d) The Applet class, defined in the package java.applet ,
The Basic Java Applet and JApplet (cont’d) The Applet class, defined in the package java.applet ,

The Applet class, defined in the package java.applet , is really only useful as a basis Applet class, defined in the package java.applet, is really only useful as a basis for making subclasses.

An object of type Applet has certain basic behaviours, but doesn’t actually do anything useful. Applet has certain basic behaviours, but doesn’t actually do anything useful.

There are several methods in the Applet class that are defined to do nothing.basic behaviours, but doesn’t actually do anything useful. The programmer must override at least some of

The programmer must override at least some of these methods and give them something to do.methods in the Applet class that are defined to do nothing. An applet program does not

An applet program does not contain a main() routine since it is not a stand-alone program. main() routine since it is not a stand-alone program.

However, many of the methods in an applet are similar to main() , in that they are meant to be called by the system. main(), in that they are meant to be called by the system.

It is the job of the programmer is to say what happens in response to these system calls.to main() , in that they are meant to be called by the system. I2PUJ4 -

is to say what happens in response to these system calls. I2PUJ4 - Chapter 6 -
is to say what happens in response to these system calls. I2PUJ4 - Chapter 6 -

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.5/20

The Basic Java Applet and JApplet (cont’d)

One of the methods that is defined in the Applet class to do nothing is

One of the methods that is defined in the Applet class to do nothing is the paint() method. paint() method.

One of the methods that is defined in the Applet class to do nothing is the

The paint() method is called by the system when the applet needs to be drawn. paint() method is called by the system when the applet needs to be drawn.

In a subclass of Applet, the paint() method can be redefined to draw various graphical elements such as rectangles, lines, and paint() method can be redefined to draw various graphical elements such as rectangles, lines, and text on the applet.

As a first example of an applet, let’s go the traditional route and look at an applet that displays the string "Hello World!".paint() method can be redefined to draw various graphical elements such as rectangles, lines, and text

of an applet, let’s go the traditional route and look at an applet that displays the
of an applet, let’s go the traditional route and look at an applet that displays the

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.6/20

The “Hello World Applet

The “Hello World Applet import java.awt. * ; import java.applet. * ; public class HelloWorldApplet extends

import java.awt. * ; import java.applet. * ;

public class HelloWorldApplet extends Applet {

// Applet displays the string ’Hello World!’

public void paint(Graphics g) { g.drawString("Hello World!", 10, 30);

}

// end of class HelloWorldAppletg) { g.drawString("Hello World!", 10, 30); } I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s

World!", 10, 30); } // end of class HelloWorldApplet I2PUJ4 - Chapter 6 - Applets, HTML,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.7/20

The “Hello World Applet - The Theory!

The “Hello World Applet - The Theory! The drawString() method, defined in the Graphics class, actually
The “Hello World Applet - The Theory! The drawString() method, defined in the Graphics class, actually

The drawString() method, defined in the Graphics class, actually does the drawing, using the Graphics (context) object referenced by g . Graphics (context) object referenced by g.

Back to the applet:using the Graphics (context) object referenced by g . It is an object, but we have

It is an object, but we have not created an object here.(context) object referenced by g . Back to the applet: This of course begs the question:

This of course begs the question: “Then where does it come from”?It is an object, but we have not created an object here. It is the web

It is the web browser’s responsibility to create the Applet object and add it to its browser window. Applet object and add it to its browser window.

Browsers execute html (a markup language) code that describes how a web page should be displayed. html (a markup language) code that describes how a web page should be displayed.

The instructions to the browser regarding the applet are contained in and by (surprise!!!) the <applet> markup tag. <applet> markup tag.

in and by (surprise!!!) the <applet> markup tag. I2PUJ4 - Chapter 6 - Applets, HTML, and
in and by (surprise!!!) the <applet> markup tag. I2PUJ4 - Chapter 6 - Applets, HTML, and

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.8/20

The “Hello World Applet HTML code

<center> <applet code="HelloWorldApplet.class" width=200 height=50> <p> If you do not see
<center> <applet code="HelloWorldApplet.class" width=200 height=50> <p> If you do not see

<center> <applet code="HelloWorldApplet.class"

width=200

height=50>

<p> If you do not see this applet, speak to your sysadm asap!! </p> </applet> </center>

<p> If you do not see this applet, speak to your sysadm asap!! </p> </applet> </center>
<p> If you do not see this applet, speak to your sysadm asap!! </p> </applet> </center>

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.9/20

The “Hello World Applet - The Theory (cont’d)

The Applet class defines another method that is essential for programming applets, the init() method.
The Applet class defines another method that is essential for programming applets, the init() method.

The Applet class defines another method that is essential for programming applets, the init() method.

The Applet class defines another method that is essential for programming applets, the init() method.

This method is called just after the applet object has been created and before it appears on the screen.is essential for programming applets, the init() method. Its purpose is to give the applet a

Its purpose is to give the applet a chance to do any necessary initialisation.object has been created and before it appears on the screen. Again, this method is called

Again, this method is called by the system, not by your program.give the applet a chance to do any necessary initialisation. You might be wondering why initialisation

You might be wondering why initialisation is done in the init() method rather than in a constructor. init() method rather than in a constructor.

It is possible to define a constructor for your applet class, as the system calls the constructor that has no parameters.is done in the init() method rather than in a constructor. Unfortunately when the constructor is

Unfortunately when the constructor is called, the size of the applet is not available.as the system calls the constructor that has no parameters. It is when init() is called.

It is when init() is called. init() is called.

It is customary to do applet initialisation in the init() method. init() method.

is not available. It is when init() is called. It is customary to do applet initialisation
is not available. It is when init() is called. It is customary to do applet initialisation

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.10/20

The second “Hello World Applet

import java.awt. * ; import java.applet. * ; public class HelloWorldApplet2 extends Applet {  
import java.awt. * ; import java.applet. * ; public class HelloWorldApplet2 extends Applet {  

import java.awt. * ; import java.applet. * ;

public class HelloWorldApplet2 extends Applet {

 

public void init() { setBackground(Color.blue); setForeground(Color.yellow);

}

public void paint(Graphics g) { g.drawString("Hello World!", 10, 30);

}

}

}

// end of class HelloWorldApplet2

} // end of class HelloWorldApplet2

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.11/20

JApplets and Swing

The AWT (Abstract Windowing Toolkit) has been part of Java from the beginning, but was
The AWT (Abstract Windowing Toolkit) has been part of Java from the beginning, but was
The AWT (Abstract Windowing Toolkit) has been part of Java from the beginning, but was

The AWT (Abstract Windowing Toolkit) has been part of Java from the beginning, but was not powerful or flexible enough for writing complex, sophisticated applications.

This does not prevent it from being useful – especially for applets, which are generally not as complex as full-scale, independent applications.part of Java from the beginning, but was not powerful or flexible enough for writing complex,

The Swing graphical user interface library was created to address the problems with the AWT.not as complex as full-scale, independent applications. The classes that make up the Swing library can

The classes that make up the Swing library can be found in the packagelibrary was created to address the problems with the AWT. javax.swing . Swing includes the class

javax.swing.

Swing includes the class javax.swing.JApplet as a basis for writing applets. javax.swing.JApplet as a basis for writing applets.

JApplet is a subclass of Applet , so JApplet s are in fact also Applet s. is a subclass of Applet, so JApplets are in fact also Applets.

However, JApplet s have a lot of extra structure that plain Applet s don’t have.
However, JApplet s have a lot of extra structure that plain Applet s don’t have.

However, JApplets have a lot of extra structure that plain Applets don’t have.

However, JApplet s have a lot of extra structure that plain Applet s don’t have.

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.12/20

A JApplet Example

A JApplet Example import javax.swing. * ; import java.awt.event. * ; // Event handling class are

import javax.swing. * ;

import java.awt.event. * ; // Event handling class are defined here.

// Swing GUI classes are defined here.

public class HelloSwing extends JApplet implements ActionListener {

public void init() { JButton bttn = new JButton("Click Me!"); bttn.addActionListener(this); getContentPane().add(bttn);

} // end init()

public void actionPerformed(ActionEvent evt) { String title = "Greetings"; // Shown in title bar of dialog box. String message = "Hello from the Swing User Interface Library."; JOptionPane.showMessageDialog(null, message, title, JOptionPane.INFORMATION_MESSAGE);

} // end actionPerformed()

} // end class HelloSwingJOptionPane.INFORMATION_MESSAGE); } // end actionPerformed() I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.13/20

} // end actionPerformed() } // end class HelloSwing I2PUJ4 - Chapter 6 - Applets, HTML,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.13/20

JApplets and Swing - Some Notes

First we instantiate a Button . Button.

First we instantiate a Button .
First we instantiate a Button .
Then we instruct the system to monitor the button for events by telling it to

Then we instruct the system to monitor the button for events by telling it to invoke this objects actionePerformed() method.

Because our program is a JApplet it already has the content pane provided by the

Because our program is a JApplet it already has the content pane provided by the Browser.

We then add the button to this content pane.

We then add the button to this content pane.

The actionePerformed() method simply pops up a message dialog window containing an appropriate message.

The actionePerformed() method simply pops up a message dialog window containing an appropriate message.

That is it - heaps and heaps of work done by the GUI API. Great

That is it - heaps and heaps of work done by the GUI API. Great code reuse!!!!content pane. The actionePerformed() method simply pops up a message dialog window containing an appropriate message.

That is it - heaps and heaps of work done by the GUI API. Great code

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.14/20

JApplets and Swing - Some More Notes

In the previous example the applet itself listened for action events from the button

In the previous example the applet itself listened for action events from the buttonThe preferred practice is to create a separate object to listen for, and respond to,

In the previous example the applet itself listened for action events from the button

The preferred practice is to create a separate object to listen for, and respond to, events.the applet itself listened for action events from the button This is more object-oriented in the

This is more object-oriented in the sense that each object has its own clearly defined area of responsibility. object-oriented in the sense that each object has its own clearly defined area of responsibility.

The most convenient way to make a separate event-handling object is to use a nested anonymous class . nested anonymous class.

The next version of HelloSwing uses an anonymous inner class for event handling. HelloSwing uses an anonymous inner class for event handling.

is to use a nested anonymous class . The next version of HelloSwing uses an anonymous
is to use a nested anonymous class . The next version of HelloSwing uses an anonymous

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.15/20

Another JApplet Example

Another JApplet Example import javax.swing. * ; import java.awt.event. * ; // Event handling class are

import javax.swing. * ;

import java.awt.event. * ; // Event handling class are defined here.

// Swing GUI classes are defined here.

public class HelloSwing2 extends JApplet {

public void init() { JButton bttn = new JButton("Click Me!"); bttn.addActionListener( new ActionListener() { public void actionPerformed(ActionEvent evt) { String title = "Greetings"; // Shown in box’s title bar. String message = "Another hello from Swing."; JOptionPane.showMessageDialog(null, message, title, JOptionPane.INFORMATION_MESSAGE); } // end actionPerformed()

}); getContentPane().add(bttn); } // end init() } // end class HelloSwing2JOptionPane.INFORMATION_MESSAGE); } // end actionPerformed() I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.16/20

} // end init() } // end class HelloSwing2 I2PUJ4 - Chapter 6 - Applets, HTML,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.16/20

The Applet Tag and Modifiers

The <APPLET> tag is used to add a Java applet to a Web page. This
The <APPLET> tag is used to add a Java applet to a Web page. This
The <APPLET> tag is used to add a Java applet to a Web page. This

The <APPLET> tag is used to add a Java applet to a Web page. This tag must have a matching </APPLET>.

A required modifier named CODE gives the name of the compiled class file that contains the applet. CODE gives the name of the compiled class file that contains the applet.

If the class file is not located in the same directory with the HTML document containing it, then the modifier , CODEBASE must be used to specify the URL of the directory that contains modifier, CODEBASE must be used to specify the URL of the directory that contains the class file.

If an applet uses a lot of .class files, pacckage all the .class files into a single .zip or .jar file. .class files, pacckage all the .class files into a single .zip or .jar file.

You have to specify the name of the archive file in an ARCHIVE modifier in the <APPLET> tag. ARCHIVE modifier in the <APPLET> tag.

.jar file. You have to specify the name of the archive file in an ARCHIVE modifier
.jar file. You have to specify the name of the archive file in an ARCHIVE modifier

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.17/20

Applet Parameters

Applet Parameters Applets can use applet parameters to customise their behaviour. Applet parameters are specified by

Applets can use applet parameters to customise their behaviour.Applet Parameters Applet parameters are specified by using <PARAM> tags, which can only occur between an

can use applet parameters to customise their behaviour. Applet parameters are specified by using <PARAM>

Applet parameters are specified by using <PARAM> tags, which can only occur between an <APPLET> tag and the closing </APPLET> . <PARAM> tags, which can only occur between an <APPLET> tag and the closing </APPLET>.

The PARAM tag takes the form <PARAM NAME="param-name" VALUE="param-value"> PARAM tag takes the form <PARAM NAME="param-name" VALUE="param-value">

An applet can use the predefined method getParameter() to check for parameters specified in PARAM tags. getParameter() to check for parameters specified in PARAM tags.

If you put anything besides PARAM tags between <APPLET> and </APPLET> , it will be ignored by any browser that PARAM tags between <APPLET> and </APPLET>, it will be ignored by any browser that supports Java.

This allows for the inclusion of a message such as "Your browser doesn’t support Java". This message will only appear in browsers that don’t support Java., it will be ignored by any browser that supports Java. I2PUJ4 - Chapter 6 -

will only appear in browsers that don’t support Java. I2PUJ4 - Chapter 6 - Applets, HTML,
will only appear in browsers that don’t support Java. I2PUJ4 - Chapter 6 - Applets, HTML,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.18/20

A PARAM Example

A PARAM Example <APPLET code="ShowMessage.class" WIDTH=200 HEIGHT=50> <PARAM NAME="message"

<APPLET code="ShowMessage.class" WIDTH=200 HEIGHT=50> <PARAM NAME="message" VALUE="Goodbye World!"> <p align=center>Sorry, but your browser doesn’t support Java!</p> </APPLET>

String display; // Instance variable: message to be displayed.

public void init() { String value; value = getParameter("message"); // Get message PARAM, if any. if (value == null) display = "Hello World!"; // default value else display = value; // Value from PARAM tag.

default value else display = value; // Value from PARAM tag. I2PUJ4 - Chapter 6 -

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.19/20

References

References es

[1] Introduction to Programming Using Java, Version 4, Eck, David J., URL:

http://math.hws.edu/javanotes

4, Eck, Davi d J., URL: http:// ma th.hws.edu/javanotes I2PUJ4 - Chapter 6 - Applets, HTML,
4, Eck, Davi d J., URL: http:// ma th.hws.edu/javanotes I2PUJ4 - Chapter 6 - Applets, HTML,

I2PUJ4 - Chapter 6 - Applets, HTML, and GUI’s – p.20/20