Mòdul 7

Pràctica 5. Incrustar programes Java a les pàgines web.
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 quarta has descobert els inconvenients d'escriure directament programes de Java a l'interior de les pàgines web JSP.

En aquesta pràctica aprendràs a separar el disseny de la programació en un projecte web. D'aquesta forma, quan facis el disseny d'una pàgina, tindràs poques interferències de codi font de Java i, d'altra banda, podràs escriure i depurar la part de programació de l'aplicació des del teu IDE preferit.

En primer lloc crearàs un nou projecte de BlueJ que s'adapti al projecte web noticiesacme. Després crearàs noves classes de Java que aprendràs a cridar des de les pàgines JSP.

 
  Un projecte BlueJ per a treballar amb la web
 
 


Tota la part de programació del portal de notícies la pots fer amb el BlueJ. Es tracta de crear un projecte que vagi situant els fitxers compil·lats .class allí on el servidor Resin els pugui trobar. D'aquesta forma podràs seguir amb comoditat el cicle productiu del teu programa (escriure, compil·lar, depurar) des del BlueJ sense necessitat d'anar a la cònsola per a res.

Recordes on busca el Resin les classes de Java? En el mòdul 3 has après que has de situar els fitxers .class dins la carpeta /WEB-INF/classes de l'aplicació web corresponent. El projecte noticiesacme l'has situat a:

c:/java/resin-3.0.9/webapps/noticiesacme

la carpeta WEB-INF del projecte està a

c:/java/resin-3.0.9/webapps/noticiesacme/WEB-INF

i, finalment, la carpeta de classes del projecte està a

c:/java/resin-3.0.9/webapps/noticiesacme/WEB-INF/classes


Aquesta carpeta és, doncs, on has de crear el teu projecte BlueJ

Segueix els següents passos:

1) Esborra la carpeta c:/java/resin-3.0.9/webapps/noticiesacme/WEB-INF/classes. Farem que la torni a crear el BlueJ com a carpeta arrel del projecte. Si no l'esborres, el BlueJ no et deixarà crear el projecte.

 
2) Obre el BlueJ i tria l'opció de menú Projecte | Nou Projecte. Amb el navegador ves fins a c:/resin-3.0.9/webapps/noticiesacme/WEB-INF. Posa com a nom de fitxer "classes" i pica sobre el botó "Crea".  
 
 
 
Ubicació del projecte ACME
 
 


3) Ja tens el projecte a punt. Ara crearàs un paquet, amb el nom acme, que ens servirà de paquet arrel del programa. És bon costum de programador no deixar mai cap classe al paquet per defecte de les aplicacions de Java.

Repassa si s'han creat correctament totes les peces. Navegant per les carpetes del teu projecte has de tenir una carpeta de classes:

c:/java/resin-3.0.9/webapps/noticiesacme/WEB-INF/classes

i també una carpeta pel paquet acme:

c:/java/resin-3.0.9/webapps/noticiesacme/WEB-INF/classes/acme

 
 
 
 
Ubicació del projecte ACME

 
  Escrivint programes amb el BlueJ
 


Ara experimentaràs amb l'escriptura de programes de Java que, posteriorment, cridaràs des d'una pàgina web.

El que et proposem, en primer lloc, és que eliminis l'incòmode mètode getCatalanDate() de la pàgina top.jsp que vas crear a la pràctica 4, que escriguis aquest mètode en una classe externa i que posteriorment cridis aquest mètode extern des de top.jsp.

1) Obre el BlueJ i el projecte classes.

2) Crea un nou paquet amb l'opció de menú Edita | nou paquet i posa-li de nom util. Observa que aquest nou paquet el crees a l'interior d'un altre, el paquet acme. Et pot servir per anar deixant totes les eines d'utilitat general per a l'aplicació.

3) Entra a la carpeta util i crea una nova classe DataUtil. En aquesta classe pots crear tots els mètodes de gestió i presentació de dates que necessitis pel portal. Inicialment, aquesta classe pot contenir el següent codi:


 
package acme.util;

import java.util.Calendar;

/**
* Útils per a la gestió de dates
*
* @author Angel Solans
* @version 05-12-2004
*/

public class DataUtil {

  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;
  }

}

 
 


Observa que és exactament el mateix mètode que ja tenies a la pàgina jsp: un mètode static que donada una data de tipus Calendar, retorna una cadena de text amb la data en català.

4) Compila la classe per a què el BlueJ crei el fitxer DataUtil.class.

Ara el Resin ja pot utilitzar aquesta classe i els seus mètodes: ja podem simplificar el disseny de la pàgina web corresponent. Farem que top.jsp utilitzi el mètode getCatalanDate() de la classe acme.util.DataUtil.

 
  Cridant mètodes externs des d'una pàgina jsp
 
 
Modifica la pàgina top.jsp:

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

 
 


Observa que has fet tres canvis en el disseny original:


1) Has eliminat la definició del mètode getCatalanDate(). La pàgina ha quedat considerablement més neta i legible.

2) Has afegit la sentència d'importació acme.util.DataUtil. Pensa que tot i que el Resin sap on buscar les classes, si no fas la importació explícita dels paquets els programes de Java no funcionen.

3) Has canviat la crida al mètode getCatalanDate(). En lloc de fer-la directament sobre un mètode de la pròpia classe, ho fas sobre un mètode de la classe DataUtil.

 
 


Això és tot el que necessites per a utilitzar programes de Java en una pàgina web. Així de fàcil: importar les classes i cridar-les, res més.

Arreca el servidor Resin, crida la pàgina http://localhost. i verifica que els canvis estan funcionant correctament.

Acostuma't a utilitzar sempre aquesta metodologia de treball i segueix sempre la recomanació d'escriure el mínim de codi Java a les pàgines JSP.

 
 



Per acabar la pràctica et proposem que ampliis la potència de la classe DataUtil: Crea un mètode getCatalanHour() que, donada una data ens retorni una cadena de text amb l'hora en el següent format: "són les 12 hores 15 minuts".

Posteriorment, crida aquest mètode des de la pàgina top.jsp per a donar l'hora actual als usuaris.

 
 

Fins aquí has aprés una petita part del que necessites per a programar pàgines dinàmiques. Més endavant aprofundiràs en aquestes qüestions. A les pràctiques que venen aprendràs a treballar amb un motor de bases de dades (el MySQL), una eina imprescindible per al teu projecte.

 
     
 

 

Tornar al principi