immagine

Transcript

immagine

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
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.
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)
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,
Java indipendenti dalle pagine JSP che le utilizzano.
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.
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.
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;
}
}
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.
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;
}
...
}
Un metodo per discriminare i file
• Per impedire il caricamento di file con formati non
ammessi, si può far ricorso all’interfaccia
FilenameFilter.
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.
Galleria
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;
}
}
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
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;
%>
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.
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"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/XHTML" 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>
<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>");
}
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 href="nuova.jsp">Aggiungi una nuova fotografia</a></td>
fotografia</a>
</tr>
<tr><td><a href="elimina.jsp">Elimina fotografie</a></td></tr>
fotografie</a>
</table></body> </html>
La pagina indice: screenshot
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>
Form di caricamento di una
nuova immagine: screenshot
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!:
-----------------------------7d6222212903d4
Content-Disposition: form-data; name="foto";
filename="C:\Web\Test\prova.txt" Content-Type: text/plain
ciao, mondo!
-----------------------------7d6222212903d4
Content-Disposition: form-data; name="invia"
Invia >>
-----------------------------7d6222212903d4-Complementi di Tecnologie Web – M. Franceschet, V.Della Mea e I.Scagnetto, a.a. 2011/12 - 19
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 http://jakarta.apache.org/commons/fileupload/ e
il package Commons IO scaricabile da
http://jakarta.apache.org/commons/io/.
• I file jar dei package vanno copiati nella directory lib
dell’installazione di Tomcat ed il server va riavviato.
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ì: '\\\\'.
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;
L'immagine
viene caricata
solo se è in uno
dei formati
consentiti
}
}
}
catch(Exception e) {
flagErrore=true;
}
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3c.org/TR/xhtml1/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/XHTML" 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>
...
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.
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.
La pagina di eliminazione:
screenshot
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();
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.
Il deployment dell’applicazione
Installazione locale di Tomcat:
<Tomcat-root-dir>
|
--> webapps
|
--> pwlsGallery
|
|--> images
|
|--> Thumbnails
|
---> WEB-INF
|
|--> Img
|
---> lib
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).
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.
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.

immagine

Transcript

Documenti analoghi

piccola galleria di immagini per esercizi ad

Galleria fotografica

Mash-up ovvero l`arte (postmoderna) del

ArtePadova PDF

Galleria Progetti - Ordine degli Architetti di Pistoia

vuoi pubblicare? scopri come…

Cenni su ECMAscript/Javascript

FIORELLO “L`ora del Rosario”

LICEO SCIENTIFICO STATALE "LEONARDO DA VINCI"

Il CMS WordPress e la gestione di galleria di immagini COME

Christopher Makos è il nuovo ospite della Galleria Carla Sozzani

Scarica la Biografia