Transcript HTML and Applets - UNC Computer Science

COMP 14
Introduction to Programming
Adrian Ilie
July 21, 2005
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Last Time
• Create a Java window extending
JFrame.
• Add labels with JLabel
• Add Images with ImageIcon
• Setting colors and layout
2
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Example: LowerUpperCase
3
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Basics
• Layout: GridLayout(3,2)
• JLabel to output result
• JTextField to input sentence
• 4 buttons
4
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
JLabel and JTextField
• Very similar. With JTextField we can
also type data from outside and
access it in the program.
JLabel output=new JLabel();
JTextField input=new JTextField();
…
String inputStr=input.getText();
output.setText(“OUTPUT RESULT”);
5
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Using Buttons
• Create JButton objects
• Buttons generate events when clicked
• Add event handlers
• Inside event handler, code operations
to be executed when button is clicked
6
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Adding Buttons
• To create a button, we use the JButton
class
JButton toLower = new JButton (“To Lower Case");
• Add button to the content pane
content.add(toLower);
• Change text of the button with the setText
method
toLower.setText(“Convert to Lower Case");
• Enable/disable the button with setEnabled
method
toLower.setEnabled(false);
7
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Buttons and Events
• Pressing buttons triggers action
events
• Setup a listener for the event
♦ actionPerformed method from
ActionListener class
♦ ActionListener class from the
java.awt.event package
• something else to import
8
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ActionListener
• Special type of class, called
interface
• Interface - class that contains
only the method headings (no
method bodies)
public interface ActionListener
{
public void actionPerformed (ActionEvent e);
}
9
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ActionListener
• In order to handle an event, define a
class that will implement
ActionListener.
private class ButtonHandler implements ActionListener
• Make the class ButtonHandler an
internal class of our main class.
• In ButtonHandler, code the method
actionPerformed
10
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ActionListener
• Declare a ButtonHandler that will be
a data member of the main class.
private ButtonHandler toLowerHandler;
• Instantiate the ButtonHandler (e.g.
in the constructor)
toLowerHandler=new ButtonHandler();
• Once the JButton object is created,
register the action listener:
toLower.addActionListener(toLowerHandler);
11
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Example: LowerUpperCase
• Declare buttons: toLowerButton,
toUpperButton, exitButton,
clearButton
• Instantiate buttons
• Add buttons to the content pane
• Implement ActionListener classes that
will handle events: ButtonHandler,
ExitHandler, ClearHandler
• Register action listeners
12
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
actionPerformed
• Variables we want to access inside
the actionPerformed methods, must
be declared as member variables of
the main class
♦ not local to constructor
• Make input, output, and the
buttons member variables
13
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ExitHandler.actionPerformed
• We simply need to exit the
system
System.exit(0);
14
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ClearHandler.actionPerformed
• Clear JTextField input and
JLabel output
input.setText(“”);
output.setText(“”);
setVisible(true);
15
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
ButtonHandler.actionPerformed
• How do we know which button we pressed
(toLower or toUpper)?
public void actionPerformed(ActionEvent e)
{
JButton pressed=(JButton)(e.getSource());
if(pressed==toLower)
…
else if(pressed==toUpper)
…
}
16
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Example: LowerUpperCase
• Finish example
17
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Applets
• A Java application is a stand-alone
program with a main method
• A Java applet is a Java program that
is intended to be transported over the
web and executed using a web
browser
♦ an applet doesn't have a main method
♦ needs an extra import statement:
import java.applet.Applet;
18
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Applet Methods
• Several methods from Applet class
that are invoked automatically at
certain points in an applet's life
♦ init - executed only once when the applet is
initially loaded
♦ start - called when applet becomes active (when
browser loads / returns to the page)
♦ stop - called when applet becomes inactive (when
browser leaves the page)
♦ paint - automatically executed and is used to
draw the applets contents
19
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Converting Apps to Applet
• See Ch 13, pgs. 855-858 (745-748)
• Extends JApplet instead of JFrame
• No main method
• No constructor
♦ put code from constructor in init() method
• No setVisible, setTitle, or
setSize methods
20
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Example: LowerUpperCase
• Convert to Applet
21
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Want to Learn More?
• Creating a GUI with Swing
http://java.sun.com/docs/books/tutorial/uiswing/
• Creating Applets
http://java.sun.com/docs/books/tutorial/applet/
22
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Writing Web Pages
• Web pages are written in a "markup"
language called HTML (HyperText
Markup Language)
• HTML is NOT a programming
language.
• HTML just tells the computer how to
format text and images--it's like using
Word, but having to type in what you
want things to look like.
23
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Tags
• HTML works based on the concept of
tags. A tag is some text surrounded
by < and >
• Tags are not printed to the screen
• Example tags:
♦ <HTML>, <TITLE>, <P>, <H1>
• A lot of the time they work in pairs:
♦ <HTML> and </HTML>
• HTML is not case-sensitive
♦ <HTML> and <html> are the same thing
24
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Very Simple Web Page
<HTML>
<HEAD>
<TITLE>Simple web page</TITLE>
</HEAD>
<BODY>
This is the text on a web page.
</BODY>
</HTML>
View any web page source by
choosing Source from the View
menu in a web browser
25
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
What Do The Tags Mean?
• <HTML>, </HTML>
♦ go at the beginning and end of EVERY page
• <HEAD>, </HEAD>
♦ introduction of the document
• <TITLE>, </TITLE>
♦ what goes in the title bar of the window
• <BODY>,</BODY>
♦ the text (and other stuff) that is displayed in the
window
26
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Color and Images
• You can add color or an image to
the background:
♦ color: make body tag
<BODY BGCOLOR=RED>
♦ image: make body tag
<BODY BACKGROUND="image.gif">
27
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Ignores White Space
• In HTML, where you put a line break
is ignored. The web browser decides
this for you based on the size of the
window
• These two will print the same thing:
first:
<BODY>
Why not fly?
</BODY>
28
Adrian Ilie
second:
<BODY>
Why
not
fly?
</BODY>
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Adding White Space
• Putting <P> at the beginning of a
paragraph and </P> at the end will
put a blank line between two pieces
of text
• You can also use <BR> to insert a
carriage return (aka <enter>)
• <hr> will insert a horizontal line
29
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Other Tags
• Bold
♦ <B> and</B>
• Italic
♦ <I> and </I>
• Center
♦ <CENTER> and </CENTER>
• Comments
♦ <!-- and -->
30
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Hierarchical Structure
• For documents having a
hierarchical structure, you can
use heading tags
♦
♦
♦
♦
♦
31
<H1> marking chapter in a book
<H2> marking section of a chapter
<H3> marking subsection of a chapter
<H4> and so on down...
<H5>
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Lists
• There are two kinds of lists:
♦ Ordered lists (surrounded by <OL> and
</OL>
♦ Unordered lists (surrounded by <UL> and
</UL>
• Both use <LI> and </LI> to
indicate List Items (things in the
list)
32
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Tables
• You can also create tables
• Beginning: <TABLE> </TABLE>
♦ options: border, cellspacing,
cellpadding
• Each row: <TR> </TR>
• Each column: <TD> </TD>
33
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Links
• This is the important part. This is
how you go from page to page.
• <A HREF="put URL here">text to
be displayed</A>
34
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Inserting Images
• You can also just add an image
into the middle of the page
• Use <IMG SRC="put URL here">
35
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Want To Learn More?
• Tutorials
http://www.htmlcodetutorial.com/
http://www.w3.org/MarkUp/Guide/
• Quick Reference
http://werbach.com/barebones/barebones.html
36
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Applets and the Web
• An applet is embedded into an HTML file
using a tag that references the bytecode file
(ClassName.class) of the applet class
• It is actually the bytecode version of the
program that is transported across the web
• The applet is executed by a Java interpreter
that is part of the browser
♦ this Java interpreter not included in Windows XP, must
download from java.com
37
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
Applets and the Web
• Basic HTML file for an applet:
<html> <body>
<applet code = "ClassName.class">
</applet> </body> </html>
• Can also specify size of applet window
<applet code="ClassName.class"
height=200 width=300> </applet>
• Put the applet HTML file (named
something.html) and your Java applet
bytecode (named ClassName.class) in your
public_html folder in AFS space.
38
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL
To do
• Finish Homework 6 (due Saturday night)
♦
♦
♦
♦
Sort ints
Create array of Participant objects
Read data into Participant objects
Sort Participant objects
• Start Homework 7 (due Monday night)
♦ Access AFS disk space
♦ Create simple web page (just one line in the body)
♦ Play around with UpperLower.java
• Bring laptops to the remaining classes
(review & practice)
39
Adrian Ilie
The UNIVERSITY of NORTH CAROLINA at CHAPEL HILL