Applet
Introduzione
ƒ In Java esistono tre tipi di programmi
– Applicazioni da console
– Eseguiti da linea di comando
– Applicazioni grafiche
– Usano finestre, pulsanti, menu, caselle di
controllo, etc
– Applet
– Contenuti all’interno di pagine Web
– Caricati dinamicamente dalla rete
– Eseguiti all’interno di un browser Web
2
Le Pagine Web
„
Sono file in formato HTML, costituiti da
‰
‰
„
„
testo
istruzioni (tag) che determinano il formato
Sono memorizzate su computer detti server
web
Sono visibili da computer detti client usando
un browser
3
Modello Client - Server
richiesta pagina
pagina
client
server
4
Struttura di un documento HTML
„
„
Ogni documento HTML inizia con <HTML> e
termina con </HTML>
Viene diviso in due parti
‰
Intestazione <HEAD> </HEAD>
„
‰
Contiene il titolo del documento ed altre informazioni
non visualizzate dal browser;
Corpo <BODY> </BODY>
„
Contiene il documento vero e proprio
5
Titolo di un documento
„
Il titolo:
‰
‰
„
è generalmente visualizzato dai browser
nell’intestazione
è utilizzato dai motori di ricerca
Per dare un titolo ad un documento si usa il
tag <TITLE> </TITLE> all’interno del tag <HEAD>
6
Un documento HTML minimale
<HTML>
<HEAD>
<TITLE>
Un semplice documento HTML
</TITLE>
</HEAD>
<BODY>
Questo è un semplicissimo documento HTML
</BODY>
</HTML>
7
Alcuni tag
„
„
„
„
„
„
„
<B>
<I>
<P>
<UL>
<LI>
<IMG>
<A>
formatta il testo in grassetto
formatta il testo in italico
delimita un paragrafo
crea un elenco puntato
indica un punto dell’elenco
inserisce un’immagine
indica un collegamento ipertestuale
8
Il tag <applet>
„
Serve per inserire il codice di un applet
all’interno di una pagina Web
‰
‰
‰
code: identifica il file .class contenente il bytecode
width: indica la larghezza della finestra dell’applet
height: indica l’altezza della finestra dell’applet
<applet code=“MyApplet.class”
width=“400” height=“300”>
Il mio primo applet
</applet>
9
Uso di Applet
ƒ Vantaggi
– Il codice dell’applet è in un server web e viene
scaricato dal browser web
− L’applet viene eseguito in locale
ƒ Svantaggi
− Bisogna scaricare l’applet prima di eseguirlo
− Un applet potrebbe arrecare un danno all'utente:
− copiare dei dati da archivi residenti sul computer dell’utente
− cancellare file
− formattare il disco fisso...
10
Applet e Sicurezza
ƒ Gli applet sono eseguiti in una sandbox, cioè
non possono:
ƒ Leggere e scrivere dati sul client
ƒ Stabilire connessioni di rete a siti diversi da quello
da cui sono stati prelevati
ƒ Eseguire qualsiasi programma sul client
ƒ Prelevare programmi registrati sul client
11
Applet e Sicurezza
ƒ Un applet è “trusted” se
ƒ Proviene da una sorgente fidata
ƒ E’ dotato di firma digitale verificabile, rilasciata da
un’entità di cui ci fidiamo
ƒ Gli applet “trusted” hanno maggiori privilegi:
possono
ƒ Leggere e scrivere dati sul client
ƒ Eseguire programmi in locale, etc
12
Struttura di un applet
ƒ Un applet si definisce mediante una classe che eredita il
comportamento della classe
Applet
del package
java.applet
ƒ La struttura generale di un applet è la seguente:
import java.applet.*;
public class NomeClasse extends Applet
{
…
}
13
Applet e Grafica
ƒ Per disegnare elementi grafici si utilizza la classe
Graphics, contenuta nel package java.awt
ƒ E’ necessaria l’istruzione
import java.awt.Graphics
per rendere disponibile la classe Graphics all’interno
del programma
14
Coordinate grafiche
ƒ Nel disegno è necessario specificare le coordinate dei
vari elementi.
ƒ In Java si utilizza un sistema di riferimento cartesiano
ƒ l’origine (0,0) è nel vertice superiore sinistro della
finestra dell’applet;
ƒ il valore della x aumenta spostandosi dall’origine
verso destra;
ƒ il valore della y aumenta spostandosi dall’origine
verso il basso.
15
Ciclo di vita di un applet
ƒ Per le applicazioni il fulcro centrale è costituito dal
metodo main()
ƒ Gli applet non possiedono un metodo main() che venga
automaticamente richiamato per avviare il programma
ƒ L’attività degli applet è completamente guidata dagli
eventi, tramite vari metodi ereditati dalla classe Applet
16
Ciclo di vita di un applet
• init
– Gestisce l’inizializzazione, che avviene al caricamento
in memoria dell’applet
– L’inizializzazione avviene una volta sola
• start
– Provvede all’avvio dell’applet
– Un applet può essere avviato più volte
• stop
– Determina l’arresto dell’applet
– E’ richiamato quando la pagina Web in cui è caricato
l’applet viene abbandonata dall’utente
17
Ciclo di vita di un applet
• destroy
– E’ richiamato per ripulire la memoria prima di
abbandonare l’applet
• paint
– Prende in input un oggetto di tipo Graphics
– Viene eseguito all’avvio dell’applet e ogni volta che si
verificano ridimensionamenti e spostamenti della
finestra del browser
– Mostra sullo schermo ciò che l’applet deve visualizzare
18
File HelloWorld.java
import java.applet.Applet;
import java.awt.Graphics;
public class HelloWorld extends Applet {
public void paint(Graphics g) {
g.drawString("Hello World!", 50, 25);
}
}
19
Il primo applet: Compilazione
ƒ Salviamo il file con il nome HelloWorld.java
ƒ Compiliamolo: javac HelloWorld.java
ƒ Ciò produce il file HelloWorld.class
ƒ Se digitiamo java HelloWorld per eseguire l’applet con
l’interprete java otteniamo il seguente messaggio di
errore
Exception in thread “main”
java.lang.NoSuchMethodError: main
20
Il primo applet: Esecuzione
ƒ Per eseguire un applet occorre inserirne il
bytecode in una pagina Web usando il tag
<APPLET>
ƒ L’applet puo’ essere visualizzato con
ƒ un browser che supporta Java
ƒ Netscape 6, Opera
ƒ Microsoft Internet Explorer con Java plugin
ƒ Applet Viewer, contenuto nel JDK
21
HelloWorld.html
<HTML>
<HEAD>
<TITLE>Un semplice applet</TITLE>
</HEAD>
<BODY>
Ecco l’output del mio programma:
<APPLET CODE="HelloWorld.class" WIDTH=400
HEIGHT=300>
</APPLET>
</BODY>
</HTML>
22
Il primo applet: Visualizzazione
23
Graphics e Graphics 2D
ƒ La classe Graphics2D, introdotta da Java2,
offre nuove potenzialità rispetto a Graphics:
ƒ effetti di riempimento e sfumature
ƒ definizione di spessori e stili per le linee
ƒ realizzazione di grafici 2D
ƒ Possiamo convertire un oggetto di tipo Graphics
in uno di tipo Graphics2D mediante un cast:
Graphics2D g2 = (Graphics2D)g;
24
File RectangleApplet.java
import
import
import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Rectangle;
/**
Un applet che disegna due
rettangoli.
*/
25
public class RectangleApplet extends Applet
{
public void paint(Graphics g)
{
//Recupera il riferimento a Graphics2D
Graphics2D g2 = (Graphics2D)g;
//Costruisce un rettangolo e lo disegna
Rectangle cerealBox = new
Rectangle(5,10,20,30);
g2.draw(cerealBox);
26
//sposta il rettangolo a destra
di 15 unità
//e in basso di 25 unità
cerealBox.translate(15,25);
//Disegna il rettangolo nella
nuova posizione
g2.draw(cerealBox);
}
}
27
28
Attributi grafici 2D
Un oggetto grafico 2D ha vari attributi:
ƒ Colore
ƒ Spessore della linea
ƒ Motivi di riempimento
29
Colore
ƒ Per impostare il colore si usa la classe
Color
ƒ I colori sono definiti secondo il sistema RGB
ƒ Le percentuali sono espresse da float e variano
da 0.0F (colore non presente) a 1.0F (quantità
massima)
30
Colore
ƒ Esistono vari colori standard
ƒ black (0.0F,0.0F,0.0F), magenta (1.0F,0.0F,1.0F),
ƒ blue (0.0F,0.0F,1.0F), orange (1.0F,0.8F,0.0F),
ƒ cyan (0.0F,1.0F,1.0F), pink (1.0F,0.7F,0.7F),
ƒ darkGray (0.25F,0.25F,0.25F)
ƒ red (1.0F,0.0F,0.0F), gray (0.5F,0.5F,0.5F)
ƒ white (1.0F,1.0F,1.0F), green (0.0F,1.0F,0.0F)
ƒ yellow (1.0F,1.0F,0.0F), lightGray (0.75F,0.75F,0.75F);
31
Impostazione del Colore
ƒ Per impostare il colore di un oggetto si usa il
metodo setColor()
g2.setColor(Color.red)
ƒ Dopo aver impostato il colore, possiamo
disegnare
32
Metodi di disegno
ƒ Due metodi:
ƒ draw
traccia il contorno con il colore selezionato
ƒ fill
riempie la figura con il colore selezionato
33
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
Rectangle cerealBox = new Rectangle(5,10,20,30);
g2.draw(cerealBox); //disegna in nero
cerealBox.translate(15,25); //sposta il rettangolo
g2.setColor(Color.red); //imposta il colore sul rosso
g2.draw(cerealBox); //disegna in rosso
}
34
Spessore della linea
ƒ Il metodo BasicStroke(float)
specifica lo spessore
della linea
ƒ Si usa il metodo setStroke() per impostarlo come
attributo di disegno
BasicStroke b = new BasicStroke(2.0F);
g2.setStroke(b);
35
Riempimento sfumato
ƒ Per specificare un passaggio dal colore c1 in (x1,y1) al
colore c2 in (x2,y2) si usa
GradientPaint (x1,y1,Color.c1,x2,y2,Color.c2)
ƒ Per impostare una sfumatura come attributo si usa
setPaint(r), dove r è un oggetto GradientPaint
GradientPaint r = new
GradientPaint(10,10,Color.white,50,50,
Color.blue);
g2.setPaint(r);
36
Disegno
ƒ Dopo aver creato un oggetto Graphics2D e
averne impostato gli attributi…
ƒ Colore,
ƒ Spessore della linea,
ƒ Effetti di riempimento
ƒ …si passa al disegno, usando le classe del
package java.awt.geom
37
Forme grafiche
ƒ Rettangoli
ƒ Ellissi e cerchi (ovali)
ƒ Linee
ƒ Poligoni
ƒ Archi
38
Rettangoli
ƒ Abbiamo già visto come disegnare rettangoli
mediante la classe
Rectangle
ƒ Possiamo anche usare la classe
Rectangle2D.Double
specificandone le coordinate mediante valori
double
39
Ovali
ƒ Per disegnare un ovale (cerchio, ellisse) si
usano le classi
Ellipse2D.Float
Ellipse2D.Double
specificando
• vertice superiore sinistro
• larghezza
• altezza
40
File Ellissi.java
import java.applet.*;
import java.awt.*;
import java.awt.geom.*;
public class Ellissi extends Applet {
public void paint(Graphics g) {
Graphics2D g2 = (Graphics2D)g;
g2.setColor(Color.red);
BasicStroke b1 = new BasicStroke(4.0F);
41
Ellipse2D.Double egg= new
Ellipse2D.Double(100,30,100,100);
g2.setStroke(b1);
g2.draw(egg);
g2.setColor(Color.blue);
BasicStroke b2 = new
BasicStroke(3.0F);
Ellipse2D.Double circle= new
Ellipse2D.Double(100,150,100,40);
g2.setStroke(b2);
g2.fill(circle);
}
}
42
Ellissi
43
Linee
ƒ Per disegnare una linea si usa la classe
Line2D.Double
specificando
• punto iniziale
• punto finale
Line2D.Double segment = new Line2D.Double(x1, y1, x2, y2);
44
Linee
ƒ In alternativa possiamo creare gli estremi
come oggetti di tipo
Point2D.Double
Point2D.Double from = new Point2D.Double(x1,y1);
Point2D.Double to = new Point2D.Double(x2,y2);
Line2D.Double segment = new Line2D.Double(from, to);
45
Font
ƒ Per creare un font si usa la classe
Font
ƒ Si crea un oggetto font, specificando:
ƒ Il nome e il tipo di font (TimesRoman, Courier,
Helvetica, etc…)
ƒ Lo stile (PLAIN, BOLD, ITALIC)
ƒ La dimensione in punti
Font huge = new
Font(“TimesRoman”, Font.PLAIN, 72);
46
Font
ƒ Dopo aver creato un oggetto di tipo Font
• Si imposta il tipo di carattere con setFont()
• Si visualizza il testo con drawString()
specificando le coordinate del punto base del
primo carattere
String message =“Applet”
g2.setFont(huge);
g2.drawString(message,50,100);
47
Ricevere dati in ingresso
ƒ Un applet può chiedere all’utente di inserire dei dati
ƒ Possiamo usare il metodo
JOptionPane.showInputDialog
(dobbiamo inserire import javax.swing.JOptionPane;)
ƒ Tale metodo va inserito all’interno del metodo init o del
costruttore e non nel metodo paint
ƒ Altrimenti ogni volta che viene ridisegnato lo schermo
l’applet chiede l’inserimento dei dati
48
File ColorApplet.java
import java.applet.Applet;
import java.awt.*;
import javax.swing.JOptionPane;
public class ColorApplet extends Applet
{
public void init()
{
String input;
input = JOptionPane.showInputDialog(“red”);
float r = Float.parseFloat(input);
input = JOptionPane.showInputDialog(“green”);
float g = Float.parseFloat(input);
input = JOptionPane.showInputDialog(“blue”);
float b = Float.parseFloat(input);
fillColor
= new Color(r, g, b);
}
49
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
g2.setColor(fillColor);
Rectangle rect = new Rectangle(5, 10, 20, 30);
g2.fill(rect);
}
private Color fillColor;
}
50
ColorApplet.java
51
Passaggio di parametri
ƒ E’ possibile passare dei parametri agli applet utilizzando
il tag <PARAM> all’interno del tag <APPLET>
<PARAM NAME=“Red” VALUE=”1.0”>
ƒ Si accede a tali parametri con il metodo getParameter(),
che
ƒ prende in input la stringa corrispondente al nome del
parametro
ƒ restituisce la stringa corrispondente al valore del
parametro
float r = Float.parseFloat(getParameter(“Red”));
52
Passaggio di parametri
ƒ Il metodo getParameter può essere invocato nei metodi
ƒ init
ƒ paint
…ma non nel costruttore
ƒ alla prima invocazione, i parametri non sono ancora
pronti
53
Applet con parametri
<html>
<head>
<title>Applet con parametri</title>
<\head>
<body>
<applet code=“ColorApplet.class” width=“300”
height=“300”>
<param name=“Red” value=“1.0”>
<param name=“Green” value=“0.7”>
<param name=“Blue” value=“0.7”>
</applet>
</body>
</html>
54
File ColorApplet.java
import
import
import
Import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.Color;
java.awt.Rectangle;
public class ColorApplet extends Applet
{
public void init()
{
//Recupera i parametri dal file HTML
float r =
Float.parseFloat(getParameter(“Red”));
float g =
Float.parseFloat(getParameter(“Green”));
float b =
Float.parseFloat(getParameter(“Blue”));
fillColor = new Color(r, g, b);
}
55
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
g2.setColor(fillColor);
Rectangle rect = new Rectangle(5, 10, 20, 30);
g2.fill(rect);
}
private Color fillColor;
}
56
Esempio
ƒ Vogliamo trovare l’intersezione tra un cerchio e una
linea verticale
ƒ Raggio del cerchio: 100
ƒ Centro del cerchio: (100,100)
ƒ Posizione della linea: specificata dall’utente
ƒ Scriviamo un applet che disegna
ƒ Il cerchio
ƒ La linea
ƒ I punti di intersezione
ƒ Le etichette dei punti di intersezione
57
Figura 18
Intersezione
fra una linea
e un cerchio
58
File IntersectionApplet.java
import
import
import
import
import
import
java.applet.Applet;
java.awt.Graphics;
java.awt.Graphics2D;
java.awt.geom.Ellipse2D;
java.awt.geom.Line2D;
javax.swing.JOptionPane;
public class IntersectionApplet extends Applet
{
public void init()
{
//Chiede all’utente la coordinata x della linea
String input
= JOptionPane.showInputDialog("x:");
x = Integer.parseInt(input);
}
59
public void paint(Graphics g)
{
Graphics2D g2 = (Graphics2D)g;
// disegna il cerchio
Ellipse2D.Double circle = new
Ellipse2D.Double(0, 0, 2 * RADIUS, 2 * RADIUS);
g2.draw(circle);
// disegna la linea verticale
Line2D.Double line
= new Line2D.Double(x, 0, x, 2 * RADIUS);
g2.draw(line);
// coordinate del centro del cerchio
double a = RADIUS;
double b = RADIUS;
60
//calcola i punti di intersezione
double root
= Math.sqrt(RADIUS * RADIUS - (x - a) * (x - a));
double y1 = b + root;
double y2 = b - root;
// disegna i punti di intersezione
LabeledPoint p1 = new LabeledPoint(x, y1);
LabeledPoint p2 = new LabeledPoint(x, y2);
p1.draw(g2);
p2.draw(g2);
}
private static final double RADIUS = 100;
private double x;
}
61
File LabeledPoint.java
import java.awt.Graphics2D;
import java.awt.geom.Ellipse2D;
/**
Un punto con un’etichetta che mostra le
coordinate del punto stesso.
*/
public class LabeledPoint
{
/**
Costruisci un punto etichettato.
@param anX la coordinata x
@param anY la coordinata y
*/
public LabeledPoint(double anX, double anY)
{
x = anX;
y = anY;
}
62
/**
Disegna il punto come un piccolo cerchio con
un’etichetta per le coordinate.
@param g2 il contesto grafico
*/
public void draw(Graphics2D g2)
{
// disegna un piccolo cerchio attorno a (x, y)
Ellipse2D.Double circle = new Ellipse2D.Double(
x – SMALL_CIRCLE_RADIUS,
y – SMALL_CIRCLE_RADIUS,
2 * SMALL_CIRCLE_RADIUS,
2 * SMALL_CIRCLE_RADIUS);
g2.draw(circle);
63
// disegna l’etichetta
String label = "(" + x + "," + y + ")";
g2.drawString(label, (float)x, (float)y);
}
private static final double SMALL_CIRCLE_RADIUS = 2;
private double x;
private double y;
}
64