Mòdul 7

Pràctica 2: Coses que es poden fer amb una JSP
Tornar presentació tema
    Pràctica 2 Prąctica 2 Pràctica 3 Pràctica 4 Prąctica 5 Prąctica 6 Prąctica 7 Prąctica 8 Prąctica 9 Prąctica 10  
 

A la pràctica anterior has instal·lat el servidor de pàgines web i has escrit la teva primera pàgina dinàmica. Abans d'explicar-te en detall com s'incrusta el codi de Java en una pàgina JSP, et proposem que creis un parell de pàgines JSP, n'estudïis el codi font i intentis descobrir la lògica del seu funcionament

No et preocupis si no ho entens tot. En pràctiques posteriors anirem revisant cadascuna de les etiquetes.

  
  Una JSP fàcil: Més operacions matemàtiques senzilles  
 


Obre el teu editor de pàgines web preferit (Dreamweaver, OppenOffice, etc). Si no en tens pots utilitzar perfectament la llibreta del Windows.

Crea un fitxer nou amb el nom operacions.jsp, retalla i empega el següent contingut:

 
<%! public long fact(long x) {
    if (x==0) return 1;
    else return x*fact(x-1);
}%>
<html>
<head>
<title>Operacions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head><body>
<b> Sumes i Restes </b><br>
2 + 2 = <%=2+2%><br>
2 - 2 = <%=2-2%><br><br>

<b> Multiplicacions i Divisions </b><br>

2 * 2 = <%=2*2%><br>
2 / 2 = <%=2/2%><br><br>

<b> Arrels Quadrades </b><br>

Arrel Quadrada de 5462 = <%=Math.sqrt(5462)%><br>
Arrel Quadrada de 65434578 = <%=Math.sqrt(65434578)%><br>
<br>

<b>Càlcul de Factorials fins a 20 (x / x!)</b><br>
<% for (long x=1; x<=20; x++) { %>
    <%=x%> / <%=fact(x)%> <br>
<% } %>
</body>
</html>

  
     
 

Desa el fitxer a la carpeta c:\java\resin-3.0.9\webapps\ROOT. Recorda que el seu nom ha de ser operacions.jsp (si treballes amb la llibreta vigila no desar-lo amb el nom operacions.jsp.txt, no funcionaria!).

Posa en marxa el Resin i obre el teu navegador web. Crida la pàgina http://localhost:8080/operacions.jsp. Has d'obtenir aquesta pàgina:

  
     
 
 
     
 

Revisa de nou el codi font de la pàgina web. Observa especialment les següents etiquetes i estudia les pistes que et donem per a interpretar-les:

1) <%=Math.sqrt(5462)%>

En aquesta sentència crides un mètode de la classe Math i imprimeixes el valor de retorn: es tracta del mètode static sqrt() que serveix per a calcular arrels quadrades. Recorda que com la classe Math és dins el paquet java.lang. no fa falta fer cap importació, sinó, hauries d'importar la classe. Veuràs com fer-ho una mica més avall.

2)
<%!
public long fact(long x) {
    if (x==0) return 1;
    else return x*fact(x-1);
}
%>

Observa que, en aquest cas, l'etiqueta d'apertura és <%! i no <%=. Per a familiartizar-te amb les etiquetes <%! has de fer l'esforç d'establir la següent equivalència (hi anirem insistint!):

  • Una pàgina .jsp és, de fet, una classe de Java. Per tant té camps i mètodes, com qualsevol classe de Java.

Per a definir els camps o mètodes de la classe has d'utilitzar l'etiqueta <%!. Tot el que escriguis entre <%! i %> ha de ser exclusivament definicions de camps i mètodes de la classe.

Així doncs, el mètode fact() que has creat a la pàgina operacions.jsp és, de fet, un mètode de la classe operacions.jsp.

El contingut del mètode és bastant senzill: fa un càlcul recursiu per a retornar el factorial d'un número.

3)
<% for (long x=1; x<=20; x++) { %>
    <%=x%> / <%=fact(x)%> <br>
<% } %>

Aquesta sentència és una iteració d'impressió, molt freqüent en programació JSP. Es fa un bucle for que va incrementant una variable x des d'1 fins a 20 i que, a cada pas, va imprimint a la pàgina web el valor del factorial d'x.

  
     
  Més difícil: llistar els fitxers del directori on és la pàgina .jsp  
     
 

Obre el teu editor de pàgines web .

Crea un fitxer nou amb el nom directorylist.jsp, retalla i empega el següent contingut:

 
     

<%@page import="java.io.*,java.util.*,java.text.*"%>
<html>
<head>
  <title>Pàgina que fa la llista d'arxius i carpetes del directori</title>
</head>
<body>
<%! String elPath; %>
<% elPath=application.getRealPath("/"); %>

<%!
  File [] fobj;
  String[] flist;
  public String[] getFileList() {
    String[] fl;
    File f = new File(elPath);
    fl = f.list();
    return fl;
  }

  public File[] getFileObjList() {
    File[] fl;
    File f = new File(elPath);
    fl=f.listFiles();
    return fl;
  }
%>
<% flist = getFileList(); %>
<% fobj = getFileObjList(); %>
<table border=1>
<caption><b>Descàrrega de fitxers </b></caption>
<tr>
<th>Nom del Fitxer</th>
<th>Darrera Modificació</th>
<th>Mida</th>
</tr>
<%
    for (int n=0;n<flist.length;n++) {
%>
<tr>
  <td><a href="<%=flist[n]%>"><%=flist[n]%></a></td>
  <td><%=DateFormat.getInstance().format(new Date(fobj[n].lastModified()))%> </td>
  <td><%=Long.toString(fobj[n].length())%>Bytes</td>
</tr>
<%
    }
%>
</table>
</body>
</html>

 
     
 

Desa el fitxer a la carpeta c:\java\resin-3.0.9\webapps\ROOT. Recorda que el seu nom ha de ser directorylist.jsp (si treballes amb la llibreta vigila no desar-lo amb el nom directorylist.jsp.txt, no funcionaria!).

Posa en marxa el Resin i obre el teu navegador web. Crida la pàgina http://localhost:8080/directorylist.jsp. Has d'obtenir aquesta pàgina:

  
     
 

 
     
 

Revisa de nou el codi font de la pàgina web. Observa especialment aquestes quatre etiquetes i llegeix les pistes per a interpretar-les:

1) <%@page import="java.io.*,java.util.*,java.text.*"%>

Es tracta d'una sentència d'importació. Si et tornes a imaginar una pàgina jsp com una classe (recorda que una jsp és una classe de Java), seria equivalent a les següents sentències que escriuries a la capsalera d'una classe:

import java.io.*;
import java.util.*;
import java.text.*;

2) <%! String elPath; %>

Continuem jugant a les equivalències entre .jsp i .java. Recorda que qualsevol variable declarada després d'una etiqueta <%! es considera un camp de la classe (Si vols pots recitar el mantra: "Una jsp és igual que una classe de java"). Per tant, en aquest cas, la variable elPath és un camp String visible des de qualsevol mètode de la classe.

3)
<%!
  File [] fobj;
  String[] flist;
  public String[] getFileList() {
    String[] fl;
    File f = new File(elPath);
    fl = f.list();
    return fl;
  }
  ...
%>

Imaginem que ara ja saps interpretar aquest fragment: fobjt: és un camp de la pàgina jsp, és una matriu d'objectes File. flist també és un altre camp de la classe. Fins aquí cap dificultat.

I el bloc public String[] getFilelist(){} ? Recordes de què es tracta? Té la mateixa categoria que el mètode fact() de la pàgina d'operacions. getFileList() és un mètode de la pàgina perquè l'has creat dins d'un bloc d'etiquetes <%! %>. Pots utilitzar el mètode des de qualsevol lloc de la pàgina jsp.

Intenta localitzar en el codi de la pàgina on estàs utilitzant el mètode getFileList().

4)
<%
    for (int n=0;n<flist.length;n++) {
%>
    // Passen coses ...
<%
    }
%>

Com et deiem abans, aquest conjunt d'etiquetes les utilitzaràs freqüentment en programació JSP. És un bucle que serveix per anar imprimint a la pàgina web recursivament. En aquest cas el bucle recorre tots els elements de la matriu flist i, per a cada iteració, escriu una fila de la taula de fitxers.

Si encara no t'has perdut completament, intenta modificar la pàgina. Si t'has perdut, retorna a aquesta pàgina després de completar les pràctiques del mòdul.

Et proposem que afegeixis una nova columna a la taula de fitxers indicant si el directori en qüestió és un fitxer o una carpeta. Necessites aquestes peces:

<th>És directori</th> i
<td><%=fobj[n].isDirectory()%></td>

On les col·locaries? T'ha de sortir això:

 
 

 
     

Tenint en consideració el que has estudiat en aquesta pràctica, contesta les següents qüestions:

1) Has d'escriure un nou mètode de classe per a la pàgina operacions.jsp. Es diu areaCercle i retorna l'àrea d'un cercle. Escriu les etiquetes i el codi font que utilitzaries. Afegeix el càlcul de l'area d'un cercle de diàmetre 25 a la pàgina operacions.jsp.

2) Si la teva pàgina jsp ha d'importar la classe java.util.Date com faries l'etiqueta d'importació? I si, a més a més, has d'importar la classe java.text.SimpleDateFormat?

3) Substitueix les dues arrels quadrades del fitxer operacions.jsp per un iterador d'impressió que escrigui a la pàgina les arrels que van del número 2 fins al 30.