ppt version - University of Pittsburgh
Download
Report
Transcript ppt version - University of Pittsburgh
Lec.10 + (Chapter 8 & 9) GUI
Java Applet
Jiang (Jen) ZHENG
July 6th, 2005
Outline
Intro. to HTML
Intro. To URL
HTML Links
Java Applet Tags
Parsing Parameters to Java Applet
init( ) method
appletviewer command
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
2
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
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
3
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>
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
4
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.
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
5
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.
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
6
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:
<!-- This is a comment -->
…
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
7
Uniform Resource Locator (URL)
Some examples of the most common
schemes can be found below:
Scheme
Access
file
A file on your local PC
ftp
http
telnet
A file on an FTP server
A file on a World Wide Web Server
A Telnet connection
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
8
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>
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
9
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
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
10
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.
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
11
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
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
12
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
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
13
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);
}
}
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
14
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>
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
15
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.
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
16
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 ...
CS401/COE401 Summer 2005.Department of
Computer Science.University of
Pittsburgh.Lecture 10
17