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