Transcript Java and Object Orientation

Introduction to Client-Side
Web Development
Introduction to Client-Side programming
using HTML/Applets
27th January 2005
Bogdan L. Vrusias
[email protected]
Introduction to Client-Side
Web Development
Introduction
• Today, the everyday WWW user desires a fancy looking
and functional Website for his/her needs.
• Client-side scripts, XML, cascading style sheets, and
technologies for building fancy graphical user interfaces
are essential for building interactive and high-performance
Web applications.
• Introducing:
27th January 2005
Client-Side Web Development
Bogdan L. Vrusias © 2005
2
Introduction to Client-Side
Web Development
Session I Contents
•
•
•
•
•
HTML Basics
Building Tables
Building Forms
Using Style Sheets
Introduction to Java Applets
27th January 2005
Bogdan L. Vrusias © 2005
3
Introduction to Client-Side
Web Development
What the Client-Side is
• The client-side of developing Web applications consists of
the browser, the eXtensive HyperText Markup Language
(XHTML) and the scripting languages.
• Client-side refers to anything happening within the
browser.
• JavaScript is a "simple" and "easy" programming
language that works with HTML, XHTML, or XML.
• JavaScript can be used on both client and server side, in
order to build entire Web applications.
27th January 2005
Bogdan L. Vrusias © 2005
4
Introduction to Client-Side
Web Development
The Client-Side
• Browsers
– The door to the Web where the user can interact.
– The interface of a Web-based application.
– Types: Microsoft Internet Explorer, Netscape, Mozilla, Opera, etc.
• XHTML
– Is a markup language that provides formatting and structure to the
content of a document.
– Is a reformulation of HTML in XML.
• Scripting Languages
– Scripting languages provide substantial capabilities when working
with XHTML elements and objects.
– JavaScript is the leading scripting language. Other scripting
languages are VBScript and PerlScript.
27th January 2005
Bogdan L. Vrusias © 2005
5
Introduction to Client-Side
Web Development
DHTML Basics
• Dynamic HyperText Markup Language (DHTML) is the
combinative use of technologies that is needed to output
dynamic behaviour in your Web application.
• The main technologies used for a dynamic behaviour are:
–
–
–
–
–
–
HTML
Cascading Style Sheets (CSS)
Browser Object Model
Document Object Model (DOM)
Scripting Language (JavaScript)
Java Applets
27th January 2005
Bogdan L. Vrusias © 2005
6
Introduction to Client-Side
Web Development
HTML Basics
• HyperText Markup Language (HTML) is the basic
language of the Web, which allows the developer to
specify formatting, layout, and style for the Web
document.
• An HTML document is divided into the markup syntax and
the pure content.
– The markup syntax (called HTML tags) is surrounded by angle
brackets (< … >) to distinguish them from the contents.
– The Web browser parses these tags in order to determine how to
display the document content.
• The HTML tags contain elements and each element may
have attributes.
– Elements define structure, layout, formatting and behaviour.
– Attributes give control over the look and behaviour of the elements
27th January 2005
Bogdan L. Vrusias © 2005
7
Introduction to Client-Side
Web Development
HTML Basics: Elements
• HTML Elements are divided with a beginning tag
(<TagName>) and an ending tag (</TagName>).
<b>Text</b>
• The text between the beginning and ending tag is the
content of the element.
• Some elements contain no content.
<br>
or <br></br>
or <br/>
• Elements can contain other elements (nested elements).
<p>Text <b>Bold Text<b/>…</p>
27th January 2005
Bogdan L. Vrusias © 2005
8
Introduction to Client-Side
Web Development
HTML Basics: Attributes
• Attributes are placed within the beginning tag of the
element. An attribute consists of its name, followed by an
equal sign, followed by a value within single ('value') or
double ("value") quotes.
<font color="red" size="3">Red Text</font>
<input type="checkbox" checked />
• A Web document that conforms to the HTML syntax rules
is called a well-formed HTML document.
27th January 2005
Bogdan L. Vrusias © 2005
9
Introduction to Client-Side
Web Development
HTML Basics: The basic HTML Document
Example:
<html>
<head>
<!-- This text will not appear in the browser -->
<title>Title of the page</title>
</head>
<body bgcolor="red">
<h1><font color="blue">Welcome</font></h1>
<p>You will learn basic <b>HTML</b> today.</p>
</body>
</html>
27th January 2005
Bogdan L. Vrusias © 2005
10
Introduction to Client-Side
Web Development
HTML Basics: XHTML
• The eXtensible HyperText Markup Language (XHTML) is
the newest version of HTML, and can be defined as the
application of the eXtensible Markup Language (XML) to
HTML.
• The purpose of XHTML is to provide a more consistent
interpretation and display of the HTML in any browser.
• See: http://www.w3.org/TR/xhtml1/
27th January 2005
Bogdan L. Vrusias © 2005
11
Introduction to Client-Side
Web Development
HTML Basics: XHTML
XHTML basic characteristics:
• Documents must be well-formed.
• The root element must be the <html> tag.
• All tags must be in lowercase (<b>, not <B>).
• Empty tags must have a trailing slash (<br/>).
• All non empty tags must have an end tag (</b>).
• All attributes must be defined (<input … checked="checked">, not
<input … checked>).
• When defining identities the id attribute must be used where the name
attribute was used before. The id attribute must be unique.
• All body elements must be contained within block-level elements, such as
<p>, <div>, or <table>.
• There must be a doctype declaration before any element in the document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
27th January 2005
Bogdan L. Vrusias © 2005
12
Introduction to Client-Side
Web Development
Working with HTML I
• URIs
– URIs can be absolute or relative (may be case sensitive):
– Absolute:
<img src="http://www.abc.ac.uk/img/banner.gif" />
<img src="/images/banner.gif" />
– Relative:
<img src="banner.gif" />
<img src="images/banner.gif" />
<img src="../images/banner.gif" />
• Colours
– Logical names:
<body bgcolor="blue">…</body>
– Hexadecimal RGB (where 00 is minimum and FF is maximum):
<body bgcolor="#0000FF">…</body>
– There is a browser-safe palette with 216 colours to support the limitations
of 256 colour display systems.
27th January 2005
Bogdan L. Vrusias © 2005
13
Introduction to Client-Side
Web Development
Working with HTML II
• Fonts
– Fonts have three basic properties: style, size, and color:
<font face="times, courier, arial" size="3"
color="blue">text</a>
• Hyperlinks
– The anchor tag:
<a href="welcome.html">Welcome page</a>
<a href="welcome.html"><img src="logo.gif"/></a>
• Character Entities
– Character entities are used when you want to display a character that has
a special meaning to HTML syntax.
– They begin with an ampersand (&) and end with a semicolon (;):
&amp; (ampersand)
&apos; (apostrophe)
&gt; (greater than)
&quot; (quotation mark)
27th January 2005
&nbsp; (non-breaking space)
&copy; (copyright symbol)
&lt; (less than)
&#945; (Greek small letter alpha)
Bogdan L. Vrusias © 2005
14
Introduction to Client-Side
Web Development
Browser Compatibility Issues
• Not all browsers follow the W3C standards.
• If a browser does not support a specific element or
attribute, it will either display the page in a different way,
or not at all.
• There are several ways to go around that problem:
– Limit to very basic HTML supported by most browsers.
– Predetermining the type of browser and having several versions of
the same page for each browser.
– Determine what most people use and only support these browser
compatibilities.
• Always test your pages with several browsers before
launching a Web page.
27th January 2005
Bogdan L. Vrusias © 2005
15
Introduction to Client-Side
Web Development
HTML Tips & Tricks
• Screen Resolution: Optimise your page to fit a small resolution
monitor, or when user resizes its browser's window.
• Directories and Files: You may create logical names for each file and
directory, in order to remember which file is which.
• Default Web Page: Make sure you have the default page named
default.htm or index.html (depending on your Web server), so that the
Web server can locate it.
• Images: The most popular graphics file format for images are gif, jpeg,
and png. Reduce the resolution and colour depth as much as possible
to ensure small file size (especially for colour block images).
• Search engines: Use the meta data information tags to specify
keywords and description of your page.
<meta name="keywords" content="client-side,
JavaScript, training course">
<meta name="description" content="Client-side web
development training course">
27th January 2005
Bogdan L. Vrusias © 2005
16
Introduction to Client-Side
Web Development
HTML Table: Basics
• An HTML table consists of rows and columns. Each block formed by
the intersection of a row and a column is called cell.
• HTML tables can be used to display tabular data, or they can be used
as an invisible grid to arrange the elements on the page.
• The main elements related to a table are:
–
–
–
–
–
<table> which states the beginning of a table.
<tr> which states the beginning of a row.
<td> which states the beginning of a column.
<th> which states the beginning of a column's header.
<caption> which represents the caption for a table.
• The <table> element has attributes such as:
– border, cellpadding cellspacing, width, height,
align, etc.
• The <td> element has attributes such as:
– align, valign, width, height, colspan, rowspan, etc.
27th January 2005
Bogdan L. Vrusias © 2005
17
Introduction to Client-Side
Web Development
HTML Table: Example
<table border="1"><caption>CS381 - Course</caption>
<tr>
<th>Week</th><th>Subject</th>
</tr>
<tr>
<td>First</td><td>Introduction</td>
</tr>
<tr>
<td>Second</td><td>Client-Side Web Development</td>
</tr>
<tr>
<td>Third</td><td>Server-Side Web Development</td>
</tr>
</table>
27th January 2005
Bogdan L. Vrusias © 2005
18
Introduction to Client-Side
Web Development
HTML Table: Tips & Tricks
• Use fixed column widths when possible, because the
browser needs to calculate them before displaying the
table.
• Limit the use of nested tables where possible.
• Empty cells may not appear correctly, so use &nbsp; or
dummy (transparent) one pixel images.
• If you have a long data table you can use scroll bars (<div>
tags) to control its appearance.
27th January 2005
Bogdan L. Vrusias © 2005
19
Introduction to Client-Side
Web Development
HTML Form: Basics
• HTML forms provide the user the ability to interact with the server.
• Forms are vital for developing Web applications.
• Forms contain control elements (such as buttons and text fields) where
users can enter data and submit the form to the server.
• The basic form element is:
<form id="frm_1" method="get" action="login.jsp">
…
</form>
• You can have more than one forms in a document (each with a unique
id), but you cannot nest forms within other forms.
• All controls within the form should have an id, otherwise the values of
these controls will not be submitted to the server for process.
• Data is submitted in pares (name=value), where name is the name
attribute and value is the value attribute of an element.
27th January 2005
Bogdan L. Vrusias © 2005
20
Introduction to Client-Side
Web Development
HTML Form: The Method Attribute
• The method attribute can take two parameters get and post:
– Submitting a page with the GET method:
•
•
•
•
•
Default value.
The data form appears in the URI, and can be edited by the user.
Prevents non-ASCII character data from being submitted.
Is limited to the amount of characters that the browser can handle.
The user can bookmark the page.
– Submitting a page with the POST method:
•
•
•
•
•
Form data is submitted in the body of the page.
The user cannot see the submitted values.
Supports non-ASCII characters.
Supports large amounts of data.
The user cannot bookmark the page.
27th January 2005
Bogdan L. Vrusias © 2005
21
Introduction to Client-Side
Web Development
HTML Form: Control Elements
• The form elements are also called controls or fields. Some of these are:
<input></input>
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
<input
type="button" id="button_1" value="NEXT" />
type="checkbox" id="checkbox_1" />
type="hidden" id="hidden_1" value="n5569301" />
type="image" src="submit.gif" id="image_1" />
type="password" id="password_1" />
type="radio" id="radio_1" />
type="reset" id="reset_1" />
type="submit" id="submit_1" />
type="text" id="text_1" value="enter name" />
type="textarea" id="textarea_1"></input>
type="file" id="file_1" />
• Basic attributes for the input tags are:
align, checked (checkbox or radio only), maxlength (for text fields),
size (for text fields), disabled, and readonly.
27th January 2005
Bogdan L. Vrusias © 2005
22
Introduction to Client-Side
Web Development
HTML Form: Control Elements
• Other important controls are:
<select><option></option></select>
<select id="choice_1">
<option selected value="choice_1_0">Please
select</option>
<option value="choice_1_1">Yes</option>
<option value="choice_1_2">No</option>
</select>
<textarea></textarea>
<textarea id="text_1" rows="50" cols="100">
This is the text area.
</textarea>
27th January 2005
Bogdan L. Vrusias © 2005
23
Introduction to Client-Side
Web Development
HTML Form: Example
<form id="form_1" method=“post" action=“login.jsp">
<table border="2">
<tr>
<td>username</td>
<td>
<input type="text" id="username" size="20" maxlength="20">
</td>
</tr>
<tr>
<td>password</td>
<td>
<input type="password" id="pswrd" size="8" maxlength="8">
</td>
</tr>
<tr>
<td colspan="2" align="middle">
<input type="submit" value="Login"></td>
</tr>
</table>
</form>
27th January 2005
Bogdan L. Vrusias © 2005
24
Introduction to Client-Side
Web Development
Cascading Style Sheets
• Cascading Style Sheets (CSS) is a specification that defines how
HTML elements should be formatted and displayed on the browser's
page.
• In a CSS you can define a set of properties such as font size, color and
name, for a specific element on the page.
• The basic syntax is as follows:
element, element, … {property:value;
property:value;…}
• The specific element style is applied to every element for every page
that uses that style sheet.
• CSS can be defined in three basic ways in the HTML document:
– Inline: using the style attribute of an element
– Embedded: within the HTML page
– External: as an external file with extension ".css".
27th January 2005
Bogdan L. Vrusias © 2005
25
Introduction to Client-Side
Web Development
CSS: Inline Example
<HTML>
<HEAD>
<TITLE>
CSS example for book
</TITLE>
</HEAD>
<BODY>
<H1 style=“color: cyan”>The heading</H1>
<P style=“font-size: large”>
The body text is <I style=“background-color: #32CD32;
color: white”>displayed</I> here
</P>
</BODY>
</HTML>
27th January 2005
Bogdan L. Vrusias © 2005
26
Introduction to Client-Side
Web Development
CSS: Embedded Example
<HTML>
<HEAD>
<TITLE>
CSS example for book
</TITLE>
<STYLE TYPE = “text/css”>
I {background-color: #32CD32; color: white}
H1{color: cyan}
P {font-size: large}
</STYLE>
</HEAD>
<BODY>
<H1>The heading</H1>
<P>
The body text is <I>displayed</I> here
</P>
</BODY>
</HTML>
27th January 2005
Bogdan L. Vrusias © 2005
27
Introduction to Client-Side
Web Development
CSS: External Example I
CourseStyle.css
p {
margin-left:0.5in;
font-family:arial;
position:relative
}
p.key {
font-size:20pt;
color:red
}
p.normal {
font-size:15pt;
color:navy
}
.margin {
margin-left:0.5in
}
body {
background-color:#D2B48C
}
(… continues on next page)
27th January 2005
Bogdan L. Vrusias © 2005
28
Introduction to Client-Side
Web Development
CSS: External Example II
div.foreground {
margin-left:0.5in;
color:#E2C48C;
font-family:arial;
font-size:120pt;
position:absolute;
top:50px;
left:20px;
z-index:0
}
div.shadow {
margin-left:0.5in;
color:#C2A48C;
font-family:arial;
font-size:120pt;
position:absolute;
top:52px;
left:22px;
z-index:0
}
(… continues on next page)
27th January 2005
Bogdan L. Vrusias © 2005
29
Introduction to Client-Side
Web Development
CSS: External Example III
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html>
<head><title>Welcome Page</title>
<link rel="stylesheet" type="text/css" href=“CourseStyle.css" />
</head>
<body>
<div class="shadow">Courses</div>
<div class="foreground">3 Day Courses</div>
<h1 class="margin">Welcome</h1>
<p class="key"><br />Our training courses are the best in the industry.</p>
<p class="normal">Sign up for one of our courses today.</p>
<div class="margin">
<br/>
<a href="CourseList.htm">View a list of our courses</a>
<br/>
<a href="MailingList.htm"><img src="Mailing.gif" alt="Mailing List" />
Sign up for our mailing list
</a>
</div>
</body>
</html>
27th January 2005
Bogdan L. Vrusias © 2005
30
Introduction to Client-Side
Web Development
CSS: Benefits
• Save time: You only have to modify one file that can affect
many pages, instead of each page individually.
• Simplify maintenance: CSS are easy to edit and maintain,
and with just one simple change you could update the
entire Web site.
• Consistency: You can specify which exactly element and
which attribute to be formated, within a page or the whole
Web site.
• Improve appearance: CSS provide you with many
formatting capabilities even some that are not provided by
HTML.
27th January 2005
Bogdan L. Vrusias © 2005
31
Introduction to Client-Side
Web Development
Java Applets
• Applets are found embedded within Web pages and contain
visual widgets and Panel objects.
• A small piece of Java code that cannot execute
independently.
• Applets enable the developer to embed functionality within
a Web page.
• Typical examples of the use of applets include:
–
–
–
–
Providing forms in which the user can put information.
Providing simple animations on a Web page.
Displaying data from a database.
Implementing graphical devices such as image maps: graphics in
which hyperlinks are embedded.
27th January 2005
Bogdan L. Vrusias © 2005
32
Introduction to Client-Side
Web Development
Applets & HTML
• An applet is embedded into a Web page by writing some very simple
statements in HTML.
• The simplest form for this HTML is:
<applet codebase="." code="MyAp.class"
name="TestApplet" width="200" height="300">
</applet>
or
<object code="MyAp.class" width="200"
height="300"></object>
• As well as enhancing the functionality of Web pages, applets are useful
because they transfer some of the processing load from a server to a
client.
27th January 2005
Bogdan L. Vrusias © 2005
33
Introduction to Client-Side
Web Development
Applet Example I
import java.applet.Applet;
import java.awt.Graphics;
public class MyAp extends Applet
{
public void paint(Graphics g)
{
g.drawString("Hello world", 50, 50);
}
}
27th January 2005
Bogdan L. Vrusias © 2005
34
Introduction to Client-Side
Web Development
Applet Example II
import java.applet.*;
import java.awt.*;
import java.awt.event.*;
public class MyAp extends Applet implements ActionListener {
private Button clickButton;
private int buttonCount;
public void init() {
clickButton = new Button("Click here");
add(clickButton);
buttonCount = 0;
clickButton.addActionListener(this);
}
public void actionPerformed(ActionEvent ae) {
buttonCount++;
showStatus("Click total = " + buttonCount);
}
}
27th January 2005
Bogdan L. Vrusias © 2005
35
Introduction to Client-Side
Web Development
Passing Parameters to an Applet
AppletExample.html
<applet codebase="." code="MyAp.class" name="TestApplet“>
<param name="msg" value="5">
</applet>
MyAp.java
…
public void init()
{
…
showStatus("Msg = " + getParameter("msg"));
buttonCount = Integer.parseInt(getParameter("msg"));
}
…
27th January 2005
Bogdan L. Vrusias © 2005
36
Introduction to Client-Side
Web Development
Applet Life Cycle
• init() – Called the first time that an applet is loaded
• start() – Called after the init() method, and
thereafter each time a browser returns to a page on which
an applet is contained
• stop() – Called any time a browser leaves a Web page
containing the applet
• destroy() – Called before a browser completely shuts
down
27th January 2005
Bogdan L. Vrusias © 2005
37
Introduction to Client-Side
Web Development
Compiling an Applet
• Write your Java code in a plain text file format (i.e. notepad) and save
it with a “.java” extension.
• Remember that the name of the file has to be exactly the same as the
applets class name.
• Open a DOS prompt, go to the directory containing the Applet’s java
file, and then type: javac MyAp.java
• That will create a MyAp.class file that you can call from your HTML
page.
NOTE: Your system has to have Java SDK installed and the
“Environmental Variables” setup, to be able to compile Applets.
27th January 2005
Bogdan L. Vrusias © 2005
38
Introduction to Client-Side
Web Development
Applets vs. Application
• There are a number of differences between Java Applets
and Java applications. These are:
– Applets do not use constructors; they use the overridden init
method to carry out tasks such as initialising instance variables.
– They are not allowed to use System.exit() to terminate. It is
the browser which terminates the execution of applets.
– All output is displayed using visual widgets which reside on the
Web page rather than objects such as System.out.
– Applets are always developed by extending the Applet class.
Applications usually extend the Frame class.
27th January 2005
Bogdan L. Vrusias © 2005
39
Introduction to Client-Side
Web Development
Session I: Closing
•
•
•
•
Questions???
Remarks???
Comments!!!
Evaluation!
27th January 2005
Bogdan L. Vrusias © 2005
40