Lecture 16: Applets & HTML Yoni Fridman 7/26/01
Outline What is an applet? Writing applets HTML Executing an applet The paint() method HTML Tags Images Links The APPLET tag Executing an applet
What is an Applet? So far, whenever we’ve compiled a program, we’ve created an application. Now, we’re going to create applets – what’s the difference? Application A stand-alone executable that can be run from anywhere. Execution is controlled by the main() method. Is written from scratch. No security restrictions. Applet Must be run from a web browser, using an HTML file. No main() method – execution is controlled by the browser. Extends the Applet class. Can’t normally read/write files.
Writing Applets For any applet, we must first import java.applet.Applet (as well as java.awt.*). After our class name, we must add extends Applet. Why? Example: public class TicTacToe extends Applet This says that our new class is a subclass of the Applet class. Every instance method already defined in the Applet class is automatically an instance method of our new class. (We say that our class inherits methods from the Applet class.)
The paint() Method The most important instance method that we inherit from the Applet class is the paint() method. Every applet we write will have a method named paint(). It’s return type will be void, and it will take one argument – a graphics context: public void paint(Graphics g) All of the drawing methods that we use (drawLine(), drawRect(), fillOval(), etc.) will be called from within the paint() method.
A Side Note If the paint() method is already defined in the Applet class, why are we defining it in our class? When we run an applet from a web browser, the paint() method will be called automatically (kind of like the main() method). Furthermore, when it’s automatically called, it’s given a graphics context as an argument. The paint() method defined in the Applet class has an empty body – we override it with a method that does what we want.
HTML What is HTML? HTML is not a programming language. It stands for hyper-text markup language. Hyper-text: Text seen on a web that takes you to a link when you click on it. Markup: To modify and/or format plain text (for example, make bold, underline, indent, add links, etc.). Language: Not much to explain here. Translation: HTML is a language that’s used to format text and add links.
Tags HTML is based on tags, which are simple formatting commands. Tags are always placed within triangle brackets. Example: <B> is the tag that makes text bold. Tags usually come in pairs, and surround the text to be formatted. The 2nd tag has a / right before it. Example: <B>Hello everyone</B> will make the text “Hello everyone” bold. HTML is not case sensitive – <b> and <B> are the same.
Tags
Tags Some tags that should be in every HTML file: <HTML></HTML> – The HTML tag surrounds everything. The two parts go at the very beginning and end of the page. <HEAD></HEAD> – The HEAD tag surrounds the introduction of the HTML file. <TITLE></TITLE> – The TITLE tag surrounds the text that will be displayed in the title bar of the web browser. <BODY></BODY> – The BODY tag surrounds everything that you want displayed in the web page.
Example For example, a basic HTML file might look like this. <HEAD> <TITLE>My Web Page</TITLE> </HEAD> <BODY> <B>Hi.</B> This is my web page. </BODY> </HTML>
List Tags You can make two different kinds of lists in HTML. Unordered (bulleted) lists are surrounded by the <UL></UL> tag. Ordered (numbered) lists are surrounded by the <OL></OL> tag. In both types of lists, each list item is surround by the <LI></LI> tag. Example: <UL> <LI>Item 1</LI> <LI>Item 2</LI> <LI>Item 3</LI> </UL>
Images You can load any image into a web page using the <IMG> tag: <IMG SRC=“The URL of the image you want”> URL stands for uniform resource locator – it’s just a web address. So to load an image, the image must have a valid web address – this address gets placed inside the double quotes in the <IMG> tag. If the image is in the same directory as the HTML file, simply put its name in the double quotes.
Changing the Background You can change the background of your web page by adding stuff to the <BODY> tag. To use an image to “wallpaper” your background: <BODY BACKGROUND=“Image’s URL”> To change the color of your background (to red, for example): <BODY BGCOLOR=RED> or <BODY BGCOLOR=“FF0000”> What does “FF0000” mean?
Another Side Note FF0000 is the RGB value of red in hexadecimal. We’ve seen binary (numbers base 2) and we know decimal (numbers base 10). Hexadecimal is numbers base 16. The digits of hexadecimal are 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A(10), B(11), C(12), D(13), E(14), F(15). In decimal, 255 = 2*100 + 5*10 + 5*1. In hexadecimal, FF = 15*16 + 15*1 = 255. In binary, 11111111 = 128*1 + 64*1 + 32*1 + 16*1 + 8*1 + 4*1 + 2*1 + 1*1. So FF, 00, 00 is 255, 0, 0 – the RGB value of red.
Links (Hyper-text) You can make a link by using the <A></A> tag: <A HREF=“The URL of the link”>Hyper-text</A> (HREF stands for hyper reference.) For example, if I wanted to make a link to espn.com from my home page, I would need the following line of HTML: <A HREF=“http://www.espn.com”>ESPN</A> Then my home page would display ESPN.
The APPLET Tag The <APPLET></APPLET> tag is used to execute an applet from a web page. It’s format looks like this: <APPLET CODE=“XXX.class” WIDTH=XXX HEIGHT=XXX></APPLET> The second and third sets of X’s get replaced with the desired width and height of your applet, in pixels. The first set of X’s gets replaced with the name of your Java class. This command is what executes your applet, by loading the .class file. You can also pass arguments to an applet: Example: <APPLET CODE=“TicTacToe.class” WIDTH=400 HEIGHT=400> <PARAM NAME=“BOARD_SIZE” VALUE=350> </APPLET>
Executing an Applet To execute an applet Write an applet in Visual J++. Write a plain text HTML file (using any word processor) that contains the <APPLET></APPLET> tag. The name of the HTML file must end in either .html or .htm. Method 1 Place your HTML file in the same directory as your Java project. Run your program. The first time you run it, DO NOT check the box labeled “Launch as a console application.” Method 2 Place your HTML file and your .class file in the same directory. Load your HTML page by either: Double-clicking on it; or Opening it from the File menu of a web browser.
Homework Read: 12.3, to the top of page 497.