Mòdul 7

Pràctica 4. Primeres pàgines del projecte ACME: les etiquetes a les pàgines 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
 


En aquesta pràctica editaràs la pàgina index.jsp del portal de notícies ACME. Et servirà d'exemple per a repassar la terminologia i el funcionament de les etiquetes més importants d'una JSP. Quan acabis la pràctica has d'estar segur que saps interpretar i utilitzar correctament els següents marcadors:

<%@ include file %>
<%@ page
<%@ import


<%
<%!
<%=


Si t'informes una mica descobriràs que aquestes no són totes les etiquetes que pots utilitzar a les teves pàgines JSP. Són, però, les més importants. Java no posa límit a l'utilització d'etiquetes perquè permet, fins i tot, que els programadors en crein de pròpies.

 
  Primera versió de la pàgina inicial del portal ACME
 
 


El primer que hem de fer quan iniciem qualsevol projecte de programació és una anàlisi de les funcions del programa i una planificació de les diferents peces que constitueixen l'aplicació.

Pensa en el projecte que ara inicies. Ha de resoldre 6 tasques. Són les següents:

  • Ha de fer possible afegir un article a la llista.
  • Ens ha de permetre buscar articles al fons documental
  • Ens ha de deixar llegir un article individal.
  • Ens ha de deixar votar un article.
  • Ha de poder llistar tots els articles del fons.
  • Ha de donar llistes dels 10 articles més votats i dels darrers 10 articles.

Una bona part d'aquestes utilitats seran accessibles des de la primera pàgina del portal, la que ara prepararem.

Quan et posis a pensar en com ha de ser i treballar una pàgina JSP, eEl que has de fer, en primer lloc, és imaginar l'aspecte de la pàgina i dibuixar-la amb llapis i paper. Aquest podria ser un model:

Per a elaborar aquesta maqueta hem seguit els següents criteris:

  • Volem que la pàgina tingui un capsal on ha d'anar la icona de l'empresa ACME i la informació del número de visites que ha tingut la web.
  • Volem que la pàgina tingui un peu on es declarin els drets de propietat d'ACME sobre els continguts del portal.
  • Aquestes dues peces: capsal i peu s'han de repetir amb la mateixa informació a totes les pàgines del portal.
  • Ens interessa posar un menú a l'esquerra, amb opcions per a l'alta i la recerca d'articles en el fons documental.
  • Volem crear dues llistes: la d'articles més populars i la de darrers articles.
  • Finalmet, necessitem un enllaç que ens porti a una llista amb els títols de tots els articles enregistrats en el portal.

Estudiem la pàgina per parts:

Capsaleres i Peus: l'etiqueta <%@ include file

Per a fer uniforme tot el portal, hem decidit que totes les pàgines tinguin la mateixa capsalera i idèntic peu. Significa això que per a cada pàgina del portal hem d'escriure -o tallar i empegar- el codi font d'aquests elements?

No necessàriament, podem seguir una altra estratègia que simplifica enormement el disseny de l'aplicació: farem una pàgina que només contindrà la capsalera (top.jsp) i una altra que només contrindrà el peu (peu.jsp). Després, aprofitarem la directiva de jsp

<%@ include file %>

per a incrustar les pàgines top.jsp i peu.jsp a dins d'altres pàgines JSP. Amb això

  • ens estalviarem de posar a cada pàgina del projecte codi repetit.
  • els canvis que farem a top.jsp i peu.jsp es reflectiran automàticament a totes les pàgines del projecte sense haver d'editar-les una a una.

Posem-nos en marxa.

Crea amb el teu editor de pàgines web un fitxer que es digui top.jsp. L'has de deixar a la carpeta arrel de l'aplicació: c:/java/resin-3.0.9/webapps/noticiesacme/. Omple'l amb aquest contingut:

 

 
<table width="95%" border="0" cellpadding="1">
<tr>
<td width="38%">ACME</td>
<td width="31%" valign="bottom">Data d'avui </td>
<td width="31%" valign="bottom"><p align="right">N&ordm; de visites: Avui . Total</p></td>
</tr>
</table>		  
 
Codi font de la pàgina top.jsp.
 
 


Ja tens la primera versió de la capsalera del portal.

Ara escriu el fitxer peu.jsp. Deixa'l a la mateixa carpeta que top.jsp. Posa aquest contingut:

  
<table width="95%" border="0" cellpadding="1">
<tr>
<td> <div align="center">© ACME. Tots els drets reservats </div></td>
</tr>
</table>		  
 
Codi font de la pàgina peu.jsp
 
 
Revisa la pàgina principal index.jsp. Ha de contenir:

  
<html>
<head>
<title>Agència de Notícies ACME</title>
</head>
<body>
<%@ include file="top.jsp"%>
<h2>Portal de l'Agència de Notícies ACME. </h2>
<%@ include file="peu.jsp"%>
</body>
</html>		  
 
Codi font de la pàgina index.jsp
  
 


Observa que immediatament després de l'etiqueta <body> he situat la directiva d'inclusió del fitxer top.jsp i immediatament abans de l'etiqueta </body> he escrit la directiva d'inclusió del fitxer peu.jsp.

A partir d'ara, cada vegada que escriguis una nova pàgina pel portal, has d'incloure les directives d'inclusió.

Comproba el funcionament. Engega el servidor Resin i crida http://localhost. En aquests moments el portal ha de tenir el següent aspecte:



Observa com el servidor ha sumat les tres pàgines (top.jsp+index.jsp+peu.jsp) en una sola.

 
 

 

Afegir la data al portal: etiquetes <%@ page, <%@ import, <%= i <%

Ara modificarem el fitxer top.jsp per a què surti impresa la data actual a la part superior del portal.

Obre el fitxer top.jsp i modifica'l seguint el següent model:

 
<%@ page language="java" import ="java.util.Date"%>
<% Date ladata = new Date(); %>
<table width="95%" border="0" cellpadding="1">
<tr>
<td width="38%">ACME</td>
<td width="31%" valign="bottom"><%=ladata%></td>
<td width="31%" valign="bottom"><p align="right">N&ordm; de visites: Avui . Total</p></td>
</tr>
</table>		  
 

 

Observa les novetats que t'hem marcat en negreta. Com a primera línia de la pàgina hem escrit una directiva <%@ page. A l'interior de la directiva hem escrit dos atributs: l'atribut language i l'atribut import.

La directiva page serveix per a afegir elements de configuració a la pàgina JSP. Cada element que es pot configurar rep el nom d'atribut. Pots triar el llenguatge de la pàgina (en el teu cas java), pots especificar quines classes s'han d'importar (en aquest exemple la classe java.util.Date) i moltes altres coses. Dóna un cop d'ull a aquest document amb la llista dels atributs de la directiva page.

Ara ens interessa que observis bé l'atribut import. És exactament equivalent a les sentències d'importació que utilitzes sempre en els teus programes java i funciona de la mateixa forma, amb la diferència que aquí has d'anar posant totes les sentencies d'importació en una cadena de text separant-les amb comes.

Observa la segona línia, conté aquest scriptlet (es diu scriptlet a qualsevol text circumscrit dins la parella d'etiquetes <% i %>):

<% Date ladata = new Date() %>

Tot el que escribim entre <% %> és codi Java que el servidor executa quan el llegeix. No es tracta, doncs, de codi d'impressió, com les etiquetes html, és codi de programa que queda ocult. En aquest cas has creat una variable ladata del tipus java.util.Date. No et cal donar el nom qualificat (new java.util.Date()) perquè tens més amunt la sentència d'importació de la classe java.util.Date. La variable que acabes de crear la podràs utilitzar posteriorment des dels altres scriptlets de la pàgina.

Una mica més avall necessites la variable ladata. Has d'imprimir el seu valor a la pàgina web. Per imprimir el valor de variables o d'operacions a la pàgina, has d'utlitzar l'element d'scriptlet <%=%>. Per exemple

<%=ladata%>

imprimeix a la pàgina el valor de la variable ladata.

Cada etiqueta <%=%> conté només una variable o operació. No pots escriure, per exemple <%=ladata larticle%>, has d'escriure <%=ladata%> <%=larticle%>.

Demana novament la pàgina http://localhost. T'ha de contestar així:

El format d'impressió per defecte de les dates a Java no és massa convencional entre el públic català.

Modificarem l'aspecte de la sortida i aprofitarem per a presentar noves etiquetes.

Camps i mètodes de la pàgina: l'etiqueta <%!

El teu objectiu serà presentar la data en català i en un format ordinari a Catalunya. Ho faràs mitjançant la creació d'un mètode de la classe.

Si recordes, t'hem anat insistint en aquestes primeres pràctiques que cada pàgina JSP és, de fet, una classe de Java. Per tant, una pàgina JSP té els seus camps i mètodes que podem crear i utilitzar seguint les mateixes regles que en una classe de Java normal.

Per a què el servidor sàpigui que anem a declarar camps i mètodes de la classe, hem d'obrir una parella d'etiquetes <%!%>. Posem-ho en pràctica:

Si en una programa de Java normal necessitessis transformar variable de tipus Date a un format acceptable pels catalans podries escriure un mètode similar a aquest:

  

public String getCatalanDate(Calendar data) {
    String[] month=         {"Gener","Febrer","Març","Abril","Maig","Juny","Juliol",
        "Agost","Setembre","Octubre","Novembre","Desembre"};
    String[] day={"Diumenge","Dilluns","Dimarts","Dimecres",
        "Dijous","Divendres","Dissabte"};
    String sdata="";
    int diasetmana = data.get(Calendar.DAY_OF_WEEK);
    sdata+=day[diasetmana-1];
    sdata+=", ";
    sdata+=data.get(Calendar.DAY_OF_MONTH);
    int diames = data.get(Calendar.MONTH);
    switch (diames) {
        case 0 :
        case 1 :
        case 2 : sdata+=" de ";
                 break;
        case 3 : sdata+=" d'";
                 break;
        case 4 :
        case 5 :
        case 6 : sdata+=" de ";
                 break;
        case 7 : sdata+=" d'";
                 break;
        case 8 :
        case 9 :
        case 10 :
        case 11 : sdata+=" de ";
                  break;
    }
    sdata+=month[diames];
    sdata+=" de ";
    sdata+=data.get(Calendar.YEAR);
    return sdata;
}

  
 


Es tracta d'un mètode que, rebent un objecte Calendar, retorna un String amb aquest format: Dilluns, 29 de novembre de 2004. Reutilitzem-lo en una pàgina JSP.

Obre novament el fitxer top.jsp i revisa'l amb el següent contingut:

 
<%@ page language="java" import ="java.util.Date,java.util.Calendar, java.util.GregorianCalendar"%>
<%!
public static String getCatalanDate(Calendar data) {
    String[] month=         {"Gener","Febrer","Març","Abril","Maig","Juny","Juliol",
        "Agost","Setembre","Octubre","Novembre","Desembre"};
    String[] day={"Diumenge","Dilluns","Dimarts","Dimecres",
        "Dijous","Divendres","Dissabte"};
    String sdata="";
    int diasetmana = data.get(Calendar.DAY_OF_WEEK);
    sdata+=day[diasetmana-1];
    sdata+=", ";
    sdata+=data.get(Calendar.DAY_OF_MONTH);
    int diames = data.get(Calendar.MONTH);
    switch (diames) {
        case 0 :
        case 1 :
        case 2 : sdata+=" de ";
                 break;
        case 3 : sdata+=" d'";
                 break;
        case 4 :
        case 5 :
        case 6 : sdata+=" de ";
                 break;
        case 7 : sdata+=" d'";
                 break;
        case 8 :
        case 9 :
        case 10 :
        case 11 : sdata+=" de ";
                  break;
    }
    sdata+=month[diames];
    sdata+=" de ";
    sdata+=data.get(Calendar.YEAR);
    return sdata;
}
%>
<table width="95%" border="0" cellpadding="1">
<tr>
<td width="38%">ACME</td>
<td width="31%" ><%=getCatalanDate(new GregorianCalendar())%></td>
<td width="31%" valign="bottom"><p align="right">N&ordm; de visites: Avui . Total</p></td>
</tr>
</table>
  
 


Ara tindràs aquesta resposta del servidor quan cridis http://localhost:

  
 



El format de la data és força més agradable.

Revisa les modificacions a la pàgina top.jsp original:

  • Has afegit sentències d'importació separant-les amb comes: import ="java.util.Date,java.util.Calendar, java.util.GregorianCalendar"
  • Has afegit el mètode getCatalanDate() entre etiquetes <%!%>.
  • Has utilitzat el mètode getCatalanDate():
    <%=getCatalanDate(new GregorianCalendar())%>
  
 

 

Crear mètodes dins d'una pàgina és fàcil, com acabes de veure. Moltes vegades et serà pràctic utilitzar-los a les teves pàgines web. Ara bé, no sempre és la millor forma d'afegir funcionalitat a les nostres aplicacions d'Internet.

Què passa si en una pàgina has d'utilitzar quinze mètodes diferents? Doncs que has d'anar escrivint codi i més codi dins la pròpia pàgina. Aquest codi queda barrejat amb les etiquetes de presentació html i, tot plegat, és fa molt complicat de llegir. Si deixes tot el codi dins de la pàgina JSP, al final pots arribar a tenir un projecte molt difícil de mantenir.

De fet, has d'intentar seguir el camí contrari; escriure el mínim de codi Java dins les pàgines JSP. Segueix aquesta recepta:

  • Has de separar, sempre que et sigui possible, les etiquetes de presentació de la part de modelat de l'aplicació.
  • A la pàgina JSP posa el mínim de codi de Java. Escriu amb el teu IDE preferit classes normals que continguin el modelat de l'aplicació i importa aquestes classes a la pàgina JSP.

 

  
     
  A la pràctica següent posaràs en pràctica aquests principis i aniràs afegint més funcionalitats al teu portal.  
 

 

 Tornar al principi