Enrera
Mòdul 8
Iniciació a la programació en Java
  Pràctica
1
2
3
4
5
   
Exercicis
Exercicis
 
  Introducció a la programació JSP
   

L'objectiu d'aquesta pràctica és la creació de les primeres pàgines JSP i la comprensió de la seva arquitectura mínima.

   
Desenvolupament de la pràctica
   
 
  • Estudiarem com funciona un servidor d'aplicacions Java.

  • Farem una pàgina web que sap la data.

  • Estudiarem els elements scriptlet d'una pàgina JSP.

  • Aplicarem els coneixements en fer una pàgina web que "sabrà" la data i si som al matí, la tarda o la nit.

Els applets s'executen en el navegador del terminal client. El servidor cedeix el programa de Java al client i la Màquina Virtual de Java del navegador client l'executa. És una bona estratègia per alleugerir la càrrega dels servidors i, d'altra banda, permet que aplicacions enormement complexes s'executin dins l'entorn d'un navegador web. En aquest plantejament però, no tot són avantatges: el navegador no pot ser qualsevol, ha de tenir una configuració mínima, ha de disposar de la possibilitat d'executar codi de Java. A més, els applets són molt segurs, tant segurs que en ocasions la programació es fa complexa i les pàgines que carreguen programes de Java no solen ser les més estimades pels usuaris, que prefereixen que una demanda de pàgina web tingui un retorn net i ràpid.

Imaginem que en un entorn web en lloc de fer que els programes s'executin de la banda dels clients amb applets, fem que s'executin en el servidor i que l'únic que aquest envia al navegador de l'usuari és una pàgina web amb codi HTML pur, un codi que el programa que és al servidor s'ha encarregat de construir. Es tracta d'una alternativa interessant, que allibera els terminals de tenir instal·lat el SDK de Java, alleugereix sensiblement el trànsit de codi per la xarxa, donant la sensació a l'usuari d'estar navegant per una pàgina web "normal". En contrapartida, el servidor ha de suportar pràcticament tota la càrrega d'execució de programes i la interfície que l'usuari rep és la pròpia d'html, sense disposar dels rics entorns gràfics que hem après a construir amb Java.

Expressat gràficament, el model que estem descrivint és aquest:



El servidor que hem instal·lat a la pràctica anterior fa les funcions de servidor d'aplicacions: rep peticions HTML dels navegadors, però les pàgines demanades pels usuaris contenen codi Java que el servidor Resin s'encarrega de resoldre. Finalment, el servidor construeix una pàgina web normal, en format HTML, que és la que rep el client.

L'especificació de Java que s'encarrega de la construcció de pàgines web dinàmiques té el nom de JSP (Java Server Pages) i una pàgina web que conté codi de Java és una pàgina JSP. La identificarem fàcilment quan navegem perquè els fitxers de pàgines dinàmiques Java perquè no acaben amb l'extensió .htm o .html sinó amb .jsp.

Ara crearem una pàgina activa elemental per tal d'estudiar com hem de treballar amb JSP.

   
  Una pàgina que sap la data:
   
Pràctica
Escrivim aquest fragment de codi. Per fer-ho ens servirà qualsevol editor de text. Si heu treballat abans amb algun editor de pàgines web, com ara Dreamweaver, millor que millor.
   
 

<html>
   <head>
       <title>Una pàgina que sap el dia</title>
   </head>
   <body>
       Bon dia a tothom!<br>
       Avui és el dia <%=new java.util.Date()%>
   </body>
</html>

   
 

Deseu aquesta pàgina al directori c:/biblioteca amb el nom "seeldia.jsp". Activeu el servidor Resin i aneu a l'adreça on està la pàgina: http://localhost/seeldia.jsp. Ha de tenir aquest aspecte:




Com podeu observar hem introduït en el codi de la pàgina web un fragment de codi de Java tancat entre delimitadors especials "<%=" i "%>". Quan Resin ha rebut la nostra petició de pàgina seeldia.jsp, ha analitzat la pàgina, ha trobat els delimitadors, ha executat la instrucció de Java corresponent -crear una instància de la classe Date i retornar-la en forma de cadena-, ha construït una pàgina web normal i ens l'ha servida. Si mireu el codi font de la pàgina en el nostre navegador web, veurem com no queden restes de res que no pugui interpretar un navegador web.

Tot el que posem entre <% %> són elements scriptlet i constitueixen l'ànima de la programació de JSP.

   
  Elements scriptlet:
 

En una pàgina JSP podem declarar variables, fer comentaris al programa, executar expressions, i construir blocs sencers i tan grans com vulguem de codi Java. Abans de continuar amb més pàgines, repassarem com s'han de construir:

  • Comentaris: Qualsevol text entre els símbols <%-- i --%>. Són comentaris que no apareixen a la pàgina web del client. Si utilitzem els comentaris normals d'HTML, <!-- -->, el servidor els envia. Dins un scriptlet, d'altra banda, podem usar la manera habitual de comentar de la programació Java:

            <%
               
    // un comentari d'una línia
               /* un altre comentari */

            %>

  • Declaracions: S'utilitzen per a declarar una variable o mètode: <%! declaracio1; declaracio2 ... %>

            <%! int unnumero=0; String cognom="Garcia" %>

  • Expressions: Aquell element que està entre els símbols <%= i %> és una expressió, i el servidor tradueix el seu valor a una cadena que s'escriu a la pàgina. És com si féssim un out.println() sobre el contingut de l'expressió.

                    <%=72*12%>

    o, també,

            <%=%>

  • Scriptlets: Són fragments de codi Java pur de les dimensions que vulguem, només hem de complir la condició de posar-lo entre les etiquetes <% i %>. Podem declarar variables, crear funcions, connectar amb dades, qualsevol cosa.
Atenció ! Abast de les variables: Si podem declarar variables dins d'un scriptlet, perquè hem d'utilitzar l'etiqueta de declaració <%! %> ? Doncs perquè, segons què fem, les variables declarades tenen un abast diferent: si declarem una variable dins un scriptlet, llavors aquesta variable només es veu dins la pàgina que ha fet la petició al servidor: si tenim un centenar de clients connectats a la pàgina, cadascun d'ells té una versió diferent d'aquella variable. Si utilitzem l'etiqueta de declaració, llavors la variable és la mateixa per a tots els clients que estiguin demanant aquella pàgina. Imaginem que hem de fer un comptador de visites: des d'on hauríem de construir la variable, des del scriptlet o amb etiqueta de declaració?
   
  Una pàgina que sap la data i si som al matí, a la tarda o a la nit:
   
Pràctica Observem en un exemple l'aplicació de declaracions, scriptlets, comentaris i expressions:
 
 

<%
/* Ara sabré si sóc al matí, tarda o nit */
java.util.Date ara = new java.util.Date();

// En primer lloc esbrino l'hora que és,
// el mètode és "deprecated" però aquí es pot fer anar

int hora = ara.getHours();
%>
<html>
  <head>
    <title>Una pàgina que sap el dia i saluda amb correcció</title>
  </head>
  <body>
    <%-- Aquí fem anar un scriptlet per a crear sortides de text
    alternatives
--%>
    <% if ( (hora > 5) && (hora < 14) ) {%>
      Bon dia
    <%} else { if ((hora >= 14) && (hora <21)) {%>
      Bona tarda
    <%} else {%>
      Bona nit
  <%} } %>
  a tothom!<br><br>
  Aquesta és la visita <%=visites%> d'avui.
  Avui és el dia <%=new java.util.Date()%>
  </body>
</html>

   
  Observeu com, en els scriptlets, podem posar qualsevol codi de Java, i com els mateixos scriptlets són útils per la creació d'estructures de control de flux de sortida de la pàgina web: segons l'hora del dia en què ens trobem i controlant-la amb un if obtenim "Bon dia", "bona tarda" o "Bona nit".

Ara estudiarem algunes eines complementàries de les pàgines JSP: les directives i les accions.
   
  Directives:
 

Les directives proporcionen informació global de la pàgina. En descriuen les seves característiques de llenguatge, importació de paquets de Java, tipus de codificació, etc. Les directives utilitzen el símbol <%@. Aquestes són les més importants:

  • <%@ include file="URL de la pàgina"%>. Aquesta directiva inclou o suma vàries pàgines en una abans que el compilador del servidor generi el fitxer HTML final. És un instrument força útil per crear "plantilles" en llocs web. Imagineu que voleu fer un lloc amb una barra de navegació i un peu, i no voleu utilitzar frames ni repetir cent vegades el mateix codi. La solució rau en crear la barra de navegació i el peu com a fitxers separats i després inclourel's a les pàgines de navegació ordinària, seguint aquest model:

    <html>
      <body>
      <%@ include file ="capsal.html"%>
      Aquí el contingut de la pàgina
      <%@ include file = "peu.html"%>
     </body>
    </html>

  • <%@ page [language="java"] [extends="paquet.classe"] [import="paquet.classe,paquet.classe"] [session="true|false"] [buffer="none|8kb|nkb"] [autoflush="true|false"] [isThreadSafe="true|false"] [info="missatge"] [errorPage="url de la pàgina d'error"] [contentType="tipus ; charset=joc de caracters"] [isErrorPage="true|false"] [pageEncoding="joc de caracters"].

    Aquí teniu una descripció detallada dels diferents
    atributs d'aquesta directiva. Per a aquesta pràctica revisarem l'atribut import. Observeu què canvia en el codi de la darrera pàgina JSP que hem escrit a l'incorporar la directiva <%@page import="java.util.Date"%>:


    <%@page import="java.util.Date"%>
    <%
    /* Ara esbrinaré si sóc al matí, a la tarda o a la nit */
    Date ara = new Date();

    // En primer lloc esbrino l'hora en que és,
    // el mètode és "deprecated" però aquí es pot fer anar

    int hora = ara.getHours();
    %>
    <html>
      <head>
      <title>Una pàgina que sap el dia i saluda amb correcció</title>
      </head>
      <body>
        <%-- Aquí fem anar un scriptlet per a crear sortides de text     alternatives --%>
        <% if ( (hora > 5) && (hora < 14) ) {%>
          Bon dia
        <%} else { if ((hora >= 14) && (hora <21)) {%>
          Bona tarda
        <%} else {%>
          Bona nit
      <%} } %>
      a tothom!<br><br>
      Aquesta és la visita <%=visites%> d'avui.
      Avui és el dia <%=new Date()%>
      </body>
    </html>


    Exacte, no em cal posar tot el
    nom qualificat de la meva variable ara (java.util.Date ara): amb Date ara = new Date() en tinc prou.

Per acabar amb l'aproximació al llenguatge de les JSP, revisarem el concepte d'acció:

   
  Accions:
 

Quan rep una petició, un motor JSP actua així:

  1. Analitza el codi de la pàgina.

  2. Si no la té, construeix una versió especial de la pàgina en forma de programa, anomenada servlet, que conté la pàgina compilada, i la desa per a executar-la després en qualsevol petició.

  3. Finalment, a partir d'aquell servlet únic, processa totes les diferents peticions que li van arribant.

Les directives es revisen en el moment de la creació del servlet. Les accions, en canvi són elements que s'analitzen quan la pàgina es processa.

Les accions es descriuen en format XML i ens serviran per a redireccionar-nos a altres pàgines, introduir i llegir paràmetres i incloure pàgines, però la seva funció més important és la de descriure i relacionar-se amb els Java Beans utilitzats per la pàgina.

Lés accions més importants són:

  • <jsp:forward page="URL pàgina de destí"/>. Quan el motor troba aquesta acció, immediatament salta a la pàgina de destinació, sense acabar de processar la pàgina actual i buida el buffer. Es perden, doncs, les dades de la pàgina original.

  • <jsp:useBean>. És l'acció més potent. Serveix per incloure Java Beans a la nostra pàgina JSP. La veurem a la pràctica 4 d'aquest mòdul.

  • <jsp:include page="URL pàgina a incloure"/>. Inclou una pàgina al lloc on definim l'acció. Com que és una acció i, per tant, no s'analitza la pàgina a incloure al moment de compilar el servlet sinó en temps d'execució, el motor JSP no revisarà ni ens avisarà dels errors que puguin donar-se en sumar les dues pàgines: si, per exemple, la pàgina a incloure conté elements de capçalera, aquests es duplicaran amb els de la pàgina mare i podem obtenir errors. Tanmateix, com que la pàgina filla s'inclou després de compil·lar-se la pàgina mare, mai no podrà contenir codi Java vinculat al codi Java de la pàgina mare. Vegem-ho a través d'un exemple:
   
Pràctica

Aquí tenim el codi d'una pàgina mare, la que vol incloure un fitxer, ja sigui a través d'una directiva include o d'una acció include: hem posat el codi per a les dues possibilitats. Deseu aquest codi en un fitxer que es digui mare.jsp en el directori c:/biblioteca:

<%
int suspeses=25;
int aprovades=15;
%>
<html>
  <body>
     
<!-- Aquí he de triar entre una directiva include: -->
      <%@ include file="filla.jsp"%>
      
<!-- o una acció include -->
     <jsp:include page="filla.jsp"/>
  </body>
</html>

I aquí tenim el codi d'una pàgina filla, la que és inclosa. Deseu aquest codi en un fitxer que es digui filla.jsp en el directori c:/biblioteca.

    El número de matèries suspeses és de <%=suspeses%>
    El número de matèries aprovades és de <%=aprovades%>

A la pàgina mare hi deixarem la inclusió de pàgina en forma de directiva <%@ include .... i esborrarem o comentarem la inclusió en forma d'acció.

Activem el servidor Resin i obrim el nostre navegador a http://localhost/mare.jsp. El resultat és el següent:

Ara tornem a mare.jsp, esborrem la directiva <%@ include ... i la substituïm per l'acció <jsp:include page.... Desem el fitxer i tornem a executar en el navegador http://localhost/mare.jsp. El resultat és aquest:

El motor de JSP ens llança un error de variable indefinida: a filla.jsp hem intentat referenciar una variable que és de la pàgina mare i a la que la filla no hi pot accedir si és inclosa en temps d'execució.

   
  Com que ara ja sabem crear pàgines JSP, a la pràctica següent les dotarem d'un element fonamental: l'accés a informació enregistrada en bases de dades.
   
   
   
 
Amunt