JSP - Caso di studio 1 Una galleria di immagini

Transcript

1 JSP - Caso di studio 1 Una galleria di immagini Le classi dell applicazione Il file di configurazione La pagina indice Il caricamento di una nuova immagine Eliminazione di un immagine Visualizzazione di un immagine Deployment dell applicazione Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-1

2 Requisiti Sviluppiamo un'applicazione web in JSP, dotata delle seguenti funzionalità: visualizzazione delle miniature delle immagini; visualizzazione dell immagine selezionata nelle dimensioni originali; gestione delle immagini (caricamento, cancellazione). Nota: siccome Java è un linguaggio di programmazione object oriented, cerchiamo di sfruttare la potenza e la flessibilità degli oggetti. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-2

3 Struttura dell applicazione Per semplicità verrà gestita una sola galleria. Le informazioni di configurazione (formati grafici ammessi, dimensione delle miniature ecc.) sono incluse in un file. Le miniature (create on-the-fly) costituiscono un link alle immagini a dimensione naturale. La gestione avviene manipolando i file delle immagini in un apposita directory. Le entità fondamentali dell applicazione sono modellate da classi Java, indipendenti dalle pagine JSP che le utilizzano. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-3

4 Le classi dell applicazione Organizzeremo le classi necessarie alla modellazione dell esempio in un package denominato pwlsgallery come si può notare dalle direttive import nelle varie pagine. Vi sono due oggetti che dobbiamo modellare per realizzare l applicazione: la galleria e le immagini. Per le immagini gli attributi principali saranno il nome del file relativo e le dimensioni (larghezza altezza) da usare per la visualizzazione all interno di una finestra del browser. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-4

5 La classe immagine package pwlsgallery; public class Immagine { public String filename; public int larghezza, altezza; public Immagine(String f, int w, int h) { filename=f; larghezza=w; altezza=h; Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-5

6 La galleria: collezione di immagini La galleria è quindi rappresentabile da una classe contenente: una collezione di oggetti di tipo Immagine, i formati di immagini consentiti, il numero massimo di immagini per riga, il percorso su disco sia delle immagini che dei file delle relative anteprime o thumbnail. Inoltre bisogna fornire dei metodi per: caricare le immagini dalla directory su disco; generare le anteprime delle immagini, eliminare le immagini, restituire il numero di immagini della galleria. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-6

7 La classe galleria public class Galleria { public String path, thumbpath; public Vector immagini; public int numerocolonne; public int larghezzaanteprima, altezzaanteprima; public String formati; public Galleria(String p, String tp, int nc, int w, int h, String f, int max) { path=p; thumbpath=tp; immagini=new Vector(); numerocolonne=nc; larghezzaanteprima=w; altezzaanteprima=h; formati=f; numeromaxtentativi=max;... Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-7

8 Un metodo per discriminare i file Per impedire il caricamento di file con formati non ammessi, si può far ricorso all interfaccia FilenameFilter. E' sufficiente implementare il metodo accept che restituisce true se il file viene accettato, false altrimenti. Questa classe viene utilizzata dal metodo CaricaImmagini della classe Galleria. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-8

9 La classe FiltraEstensioni package pwlsgallery; import java.io.file; import java.io.filenamefilter; public class FiltraEstensioni implements FilenameFilter { private String[] estensioni; public FiltraEstensioni(String lista) { estensioni=lista.split(";"); public boolean accept(file dir, String name) { boolean esito=false; for(int i=0; i<estensioni.length; i++) { if(name.endswith("."+estensioni[i])) { esito=true; break; return esito; Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-9

10 Compilazione e creazione del package jar Compilazione: javac Immagine.java FiltraEstensioni.java Galleria.java Creazione del package in formato jar : jar -cvf pwlsgallery.jar pwlsgallery/*.class Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-10

11 Il file di configurazione config.jsp <%! String path="/web-inf/img"; String thumbpath="/thumbnails"; int numerocolonne=3; int thumbx=150; int thumby=150; String formati="jpg;png"; int numeromaxtentativi=-1; %> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-11

12 Il file di configurazione config.jsp L ultimo parametro è necessario a causa del fatto che il metodo di cancellazione delete() della classe java.io.file può fallire nel rimuovere il file specificato nel caso si sia fatto recentemente riferimento ad esso. Quindi è necessario controllare l esito dell operazione e, in caso di fallimento, ripeterla; il parametro max serve appunto a definire il numero massimo di ripetizioni dell operazione. Il valore 1 per numeromaxtentativi significa che il tentativo di cancellazione dell immagine deve essere ripetuto indefinitamente fino all avvenuta rimozione del file. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-12

13 La pagina indice: sorgente (1/3) page import="pwlsgallery.*"%> include file="config.jsp" %> <% Galleria galleria=new Galleria(getServletContext().getRealPath(path), getservletcontext().getrealpath(thumbpath), numerocolonne, thumbx, thumby, formati, numeromaxtentativi); galleria.caricaimmagini(); %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="it" lang="it"> <head><meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>.: pwlsgallery: indice delle fotografie :.</title> <script language="javascript"> function popup(n, w, h) { window.open("img.jsp?n="+n, "Foto", "scrollbars=no, width="+w+", height="+h); </script> <link rel="stylesheet" type="text/css" href="pwlsgallery.css"> </head> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-13

14 La pagina indice: sorgente (2/3) <body> <h1 class=intestazione>pwlsgallery: indice delle fotografie</h1> <table class=sfondo_tabella cellpadding="1" cellspacing="1"> <% int i; for(i=0; i<galleria.numeroimmagini(); i++) { if(i%galleria.numerocolonne==0) out.println("<tr>"); %> <td class=sfondo_cella> <a href="javascript:popup(<%= i%>, <%=((Immagine)galleria.immagini.get(i)).larghezza%>, <%=((Immagine)galleria.immagini.get(i)).altezza%>)"> <img src="<%= thumbpath.substring(1,thumbpath.length()) +"/"+galleria.generaanteprima(i)%>" border="0" /> </a></td> <% if((i+1)%galleria.numerocolonne==0) out.println("</tr>"); Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-14

15 La pagina indice: sorgente (3/3) if((i+1)%galleria.numerocolonne!=0) { for(int j=(i+1)%galleria.numerocolonne; j<=galleria.numerocolonne; j++) { %> <td class=sfondo_cella> </td> <% out.println("</tr>"); %> </table><hr/> <table border="0"> <tr><td><a <a href="nuova.jsp nuova.jsp">aggiungi una nuova fotografia</a></td> </tr> <tr><td><a <a href="elimina.jsp elimina.jsp">elimina fotografie</a></td></tr> </table></body> </html> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-15

16 La pagina indice: screenshot Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-16

17 Il form per il caricamento di una nuova immagine... <body>... <form method="post" enctype="multipart/form-data" action=" carica.jsp "> <table border="0"> <tr> <td> Seleziona il file da caricare<br /> <input type="file" name="foto" /> </td> </tr> <tr> <td> <input type="submit" name="invia" value="invia >>" /> </td> </tr> </table> </form> <hr/> </body> </html> Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-17

18 Form di caricamento di una nuova immagine: screenshot Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-18

19 Struttura del corpo di una richiesta di upload Quanto segue è la struttura di una richiesta di upload eseguita con il form precedente sul file di testo prova.txt contenente la stringa ciao, mondo!: d d4 Content-Disposition: form-data; name="foto"; filename="c:\web\test\prova.txt" Content-Type: text/plain ciao, mondo! d d4 Content-Disposition: form-data; name="invia" Invia >> d d4-- Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-19

20 Parsing della richiesta HTTP Da quanto detto appare evidente che, per gestire l upload di file da form (X)HTML, è necessario implementare delle funzioni che facciano il parsing della richiesta HTTP in modo da estrarre i singoli campi. Per fortuna esistono package Java creati per questo scopo. Più precisamente utilizzeremo il package Commons FileUpload scaricabile da il package Commons IO scaricabile da e I file jar dei package vanno copiati nella directory lib dell installazione di Tomcat ed il server va riavviato. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-20

21 Caricamento di una nuova immagine: sorgente (1/3) page import="java.util.list"... %> include file="config.jsp" %> <% boolean flagerrore=false, erroreformato=false; FileItemFactory factory=new DiskFileItemFactory(); try { ServletFileUpload upload=new ServletFileUpload(factory); List listafile=upload.parserequest(request); Iterator it=listafile.iterator(); if(it.hasnext()) { FileItem f=(fileitem)it.next(); if(!f.isformfield()) { char carattereseparatore=file.separatorchar; String separatore=""; if(carattereseparatore=='\\') separatore="\\\\"; else separatore=file.separator; In Java '\' è un carattere di escape. Nelle espressioni regolari anche. Quindi '\' nelle espressioni regolari in Java va scritto così: '\\\\'. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-21

22 Caricamento di una nuova immagine: sorgente (2/3) String[] partipercorso=f.getname().split(separatore); FiltraEstensioni filtro=new FiltraEstensioni(formati); if(filtro.accept(null, partipercorso[partipercorso.length-1])) { File file=new File( getservletcontext().getrealpath(path), partipercorso[partipercorso.length-1]); f.write(file); else erroreformato=true; catch(exception e) { flagerrore=true; %> L'immagine viene caricata solo se è in uno dei formati consentiti Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-22

23 Caricamento di una nuova immagine: sorgente (3/3) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" " <html xmlns=" xml:lang="it" lang="it"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <title>.: pwlsgallery Aggiunta di una nuova immagine :.</title> <link rel="stylesheet" type="text/css" href="pwlsgallery.css"> </head> <body> <h1 class=intestazione>pwlsgallery: aggiunta di una nuova fotografia</h1> <table border="0"> <tr> <td> <%= flagerrore? "Errore durante il caricamento del file." : erroreformato? "Il formato del file non rientra fra quelli ammessi." : "Fotografia caricata correttamente." %> </td>... Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-23

24 Note sul caricamento dell immagine Il parsing della richiesta HTTP viene effettuato dal metodo parserequest dell oggetto upload. Tutti gli elementi vengono per mezzo dell iteratore it. L iteratore consente di scorrere gli oggetti di tipo FileItem discriminando sulla loro natura tramite il metodo isformfield: nel caso in cui assuma valore true si tratta di un campo normale del form; nel caso in cui assuma valore false si tratta di un file. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-24

25 Eliminazione di un immagine La pagina elimina.jsp visualizza le miniature delle immagini della galleria affiancando ad ognuna di queste l immagine di un cestino. Cliccando sul cestino si attiva un link alla pagina rimuovi.jsp a cui viene passato con il metodo GET l indice dell immagine da eliminare. Si noti il controllo del parametro: try { numero=integer.parseint(request.getparameter("n")); catch(nullpointerexception e) { numero=-1; catch(numberformatexception e) { numero=-1; L eliminazione effettiva dell immagine (dopo il controllo sulla validità del parametro) viene effettuata per mezzo del metodo EliminaImmagine dell oggetto galleria. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-25

26 La pagina di eliminazione: screenshot Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-26

27 Visualizzazione di un immagine in dimensione naturale Se l'indice dell'immagine passato come argomento è corretto, la pagina img.jsp provvede ad inviarla al browser: response.setcontenttype("image/jpeg"); File f=new File(getServletContext().getRealPath(path)+ File.separator+ ((Immagine)galleria.immagini.get(numero)).fileName); FileInputStream is=new FileInputStream(f); OutputStream os=response.getoutputstream(); byte[] buf=new byte[1024]; int l=0; while((l=is.read(buf))>0) os.write(buf, 0, l); I/O dell'immagine os.flush(); os.close(); is.close(); Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-27

28 Il deployment dell applicazione Su latoserver.dimi.uniud.it: </home/<nome-utente>> --> servlets --> images --> Thumbnails ---> WEB-INF --> Img ---> lib E' necessario accordare il permesso di scrittura al gruppo tomcat nelle directory Thumbnails e Img. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-28

29 Il deployment dell applicazione Installazione locale di Tomcat: <Tomcat-root-dir> --> webapps --> pwlsgallery --> images --> Thumbnails ---> WEB-INF --> Img ---> lib Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-29

30 Note su Tomcat e Ubuntu Nel caso di un'installazione di Tomcat 5.5 o 6.0 sulle ultime versioni di Ubuntu (e.g., 8.0.4) è necessario provvedere a impostare la seguente variabile d'ambiente: export CATALINA_OPTS="-Djava.awt.headless=true" prima di avviare Tomcat. Ciò è dovuto ai metodi usati per creare le miniature delle immagini (fanno ricorso alle librerie del server X). Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-30

31 Esercizi (Galleria di immagini in JSP) Si modifichi la pagina per l'aggiunta di una nuova immagine in modo da poter specificare una breve descrizione testuale dell'immagine stessa. Tale descrizione dovrà essere salvata (nella stessa directory Img in cui vengono salvate le immagini) in un file di testo avente lo stesso nome dell'immagine ed estensione txt. Inoltre si faccia in modo che, nella pagina index.jsp venga visualizzata anche la descrizione a fianco di ogni miniatura. Infine si modifichi la procedura di eliminazione delle immagini in modo da cancellare anche i file delle relative descrizioni testuali, oltre al file dell'immagine e della miniatura. Complementi di Tecnologie Web M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12-31