Lec.10 + (Chapter 8 & 9) GUI Java Applet Jiang (Jen) ZHENG July 6 th, 2005

Lec.10 + (Chapter 8 & 9) GUIJava Applet

Jiang (Jen) ZHENG

July 6th, 2005

CS401/COE401 Summer 2005.Department of Computer Science.University of Pittsburgh.Lecture 10

2

Outline

Intro. to HTML Intro. To URL HTML Links Java Applet Tags Parsing Parameters to Java Applet init( ) method appletviewer command


3

Intro. To HTML

HTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markup tags

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor


4

Intro. To HTML

A example of HTML file<html>

<head>

<title>Title of page</title>

</head>

<body> This is my first homepage.

<b>This text is bold</b>

</body>

</html>


5

Intro. To HTML Example Explained

The first tag in your HTML document is <html>. This tag tells your browser that this is the start of an HTML document. The last tag in your document is </html>. This tag tells your browser that this is the end of the HTML document.

The text between the <head> tag and the </head> tag is header information. Header information is not displayed in the browser window.

The text between the <title> tags is the title of your document. The title is displayed in your browser's caption.

The text between the <body> tags is the text that will be displayed in your browser.

The text between the <b> and </b> tags will be displayed in a bold font.

HTML tags are not case sensitive. But XHTML (the next generation HTML) demands lowercase tags.


6

Tag Attributes Tags can have attributes. Attributes can provide additional information about the HTML

elements on your page. Ex1: This tag defines the body element of your HTML page:

<body>. With an added bgcolor attribute, you can tell the browser that the background color of your page should be red, like this: <body bgcolor="red">.

Ex2: This tag defines an HTML table: <table>. With an added border attribute, you can tell the browser that the table should have no borders: <table border="0">

Attributes always come in name/value pairs like this: name="value".

Attribute values should always be enclosed in quotes, either single quote or double quote.

Attributes are always added to the start tag of an HTML element.


7

HTML Tags

Headings: Defined with the <h1> to <h6> tags. <h1> defines the largest heading. <h6> defines the smallest heading.

Paragraphs: Defined with the <p> tag. HTML automatically adds an extra blank line before and after a paragraph.

Line Breaks: Defined with the <br> tag. The <br> tag is an empty tag. It has no closing tag.

Comments in HTML: 

…


8

Uniform Resource Locator (URL)

Some examples of the most common schemes can be found below:

Scheme Accessfile A file on your local PC

ftp A file on an FTP server

http A file on a World Wide Web Server

telnet A Telnet connection


9

HTML Links

To make a hypertext link: Surround the text you want to be linked with

<a></a> tags. Inside the <a> tag place an HREF attribute

whose value is the URL you want to link to. Ex1: <a href= “Labs/Lab5” > lab5 </a> Ex2: <a href= “lastpage.htm” > Last Page </a>

Link to your Mail system: <a href="mailto:[email protected]">

[email protected]</a>


10

Absolute URL & Relative URL

Absolute URL: a completely specified URL Relative URL: If any piece of the URL is missing, it is

assumed to be the same as that of the document in which the URL is found. Such a URL is called a relative URL Ex: http://www.ibiblio.org/javafaq/books.html click on

this hyperlink <a href="javafaq.html">the FAQ</a> The browser cuts books.html off the end Get http://www.ibiblio.org/javafaq/ Then it attaches javafaq.html onto the end to get http://www.ibiblio.org/javafaq/javafaq.html


11

Absolute URL & Relative URL

If the relative link begins with a /, then it is relative to the document root instead of relative to the current file. Ex: while browsing http://www.ibiblio.org/javafaq/books.html

clicked on this hyperlink: <a href="/boutell/faq/www_faq.html"> Your browser would throw away /javafaq/javafaq.html and

attach /boutell/faq/www_faq.html to the end of http://www.ibiblio.org to get http://www.ibiblio.org/boutell/faq/www_faq.html.

Relative URLs have a number of advantages. First they save a little typing. More importantly relative URLs allow entire trees of HTML

documents to be moved or copied from one site to another without breaking all the internal links.


12

The Applet Element

Applet Tags <applet> and </applet>

Applet Attributes code: where to look for the compiled .class

file codebase: contains a URL that points at the

directory where the .class file is Width, height: how big a rectangle the browser

should set aside for the applet


13

Parsing Parameters to Applet

Parameters are passed to applets in NAME=VALUE pairs in <param> and </param> tags

Using the getParameter() method to read parameter values


14

Example

Java File: import java.applet.*; import java.awt.*;

public class DrawStringApplet extends Applet {

private String defaultMessage = "Hello!"; public void paint(Graphics g) {

String inputFromPage = this.getParameter("Message"); if (inputFromPage == null) inputFromPage = defaultMessage; g.drawString(inputFromPage, 50, 25);

}

}


15

Example

HTML File:

<HTML><HEAD> <TITLE> Draw String </TITLE> </HEAD> <BODY> This is the applet:<P> <APPLET code="DrawStringApplet" width="300" height="50"><PARAM name="Message" value="Howdy, there!"> This page will be very boring if your browser doesn't understand Java. </APPLET> </BODY> </HTML>


16

The init( ) method

init( ) in Java Applet is like the main( ) in Java Application. It is called exactly once in an applet's life,

when the applet is first loaded. To read PARAM tags, start downloading

any other images or media files you need, and set up the user interface.


17

The appletviewer command

To run a Java Applet, using appletviewer command Ex: appletviewer MiniCalcApplet.htm

Let us study the MiniCalcApplet example from the textbook, compare this applet with the MiniCalc application ...

Documents

Lec.10 + (Chapter 8 & 9) GUI Java Applet Jiang (Jen) ZHENG July 6 th, 2005