12. Programas para la web: los applets y los servlets

  Curso: Introducción a Java

12.1. ¿Qué es un applet?

Un applet es una pequeña aplicación escrita en Java, pero que no está diseñada para funcionar "por sí sola", como los ejemplos que habíamos visto en modo texto, sino para formar parte de una página Web, de modo que necesitaremos también un navegador web (como Internet Explorer, Mozilla Firefox o Google Chrome) para poder hacer funcionar dichos applets. Hoy en día se da por sentado que cualquier ordenador tendrá una navegador web incorporado, pero las primeras versiones del entorno de desarrollo de Java incluye una utilidad adicional llamada "appletviewer", que nos permitirá probar nuestros applets sin necesidad de tener uno instalado.

Hoy en día los "applet" de Java están en desuso. Es más frecuente encontrar páginas web creadas con Flash, otra herramienta que permite crear con rapidez vistosos programas para la Web. Aun así, veremos al menos una introducción a la creación de "applets".

12.2. ¿Cómo se crea un applet?

Tendremos que dar tres pasos:

• El primer paso, similar a lo que ya hemos hecho, consiste en teclear el programa empleando un editor de texto o un entorno integrado.
• El segundo paso es nuevo: tendremos que crear la página Web desde la que se accederá al applet (o modificarla, si se trata de una página que ya existía pero que queremos mejorar).
• El último paso será, al igual que antes, probar el programa, pero esta vez no emplearemos directamente la utilidad llamada "java", sino cualquier navegador Web.

Vamos a verlo con un ejemplo. Crearemos un applet que escriba el texto "Hola Mundo!" en pantalla, al igual que hicimos en nuestra primera aplicación de ejemplo. Recordemos que lo que habíamos escrito en aquel momento fue:

// 
// Aplicación HolaMundo de ejemplo 
// 
 
class HolaMundo { 
  public static void main( String args[] ) { 
    System.out.println( "Hola Mundo!" ); 
  } 
} 
 

Esta vez tendremos que escribir más. Primero vamos a ver cómo debería ser el applet, y después comentaremos los cambios (bastantes) con relación a este programa:

// 
// Primer Applet de ejemplo 
//
 
import java.awt.Graphics;
 
public class AppletHola extends java.applet.Applet {
 
    public void paint(Graphics g) {
        g.drawString( "Hola Mundo!", 100, 50);
    }
 
} 
 

Los cambios son los siguientes:

• Al principio aparece una orden "import", porque vamos a emplear una serie de posibilidades que no son parte del lenguaje Java "estándar", sino del paquete "Graphics" (funciones gráficas) que a su vez forma parte del grupo llamado AWT ("Abstract Windowing Toolkit", herramientas "abstractas" para el manejo de ventanas).
• Después no creamos una clase nueva "desde cero", sino heredando una que ya existe, la clase "Applet". Por eso aparece la palabra "extends" en la definición de la clase, como ya vimos en el apartado sobre las clases y Java.
• Sólo utilizamos un método de los que nos permite la clase Applet: el método "paint", que es el que dibuja (o escribe) en pantalla la información que nos interese. Tiene un parámetro de tipo "Graphics", que es la pantalla en la que dibujaremos.
• En concreto, lo que hacemos en esta pantalla es dibujar una cadena de texto (drawString), en las coordenadas 100 (horizontal), 50 (vertical).

(Un poco más adelante se verá el resultado de este Applet).

Y vamos a ver los tres pasos que tenemos que dar, con mayor detalle.

12.3. Primer paso: teclear el fuente.

Repetimos básicamente lo que ya vimos:

• Tecleamos el fuente con Geany, el bloc de notas de Windows, o cualquier otro editor de textos.
• Lo guardamos, con el mismo nombre que tiene la clase. En nuestro caso sería "AppletHola.java" (si empleamos otro nombre, el compilador "javac" nos regañará).
• Lo compilamos empleando "javac" (recordemos que desde algunos editores, como Geany, permiten compilar diretamente desde dentro de ellos).
• Si hay algún error, se nos informará de cual es; si no aparece ningún error, obtendremos un fichero llamado "AppletHola.class", listo para utilizar.

12.4. Segundo paso: crear la página Web.

No pretendo "formar maestros" en el arte de crear páginas Web. Apenas veremos lo necesario para poder probar nuestros Applets.

Las páginas Web internamente son ficheros de texto, escritos en un cierto lenguaje. El lenguaje más sencillo, y totalmente válido para nuestros propósitos, es el lenguaje HTML. Los ficheros HTML son ficheros de texto, que podremos crear con cualquier editor de texto (esta es la forma más trabajosa, pero con la que tenemos mayor control) o con editores específicos (como Dreamweaver, Frontpage, SeaMonkey Composer, , que permiten "crear" más rápido, aunque a veces eso supone perder en funcionalidades y/o entender menos cada paso que se da).

En nuestro caso, recurriremos nuevamente a Geany (o al bloc de notas de Windows, o cualquier otro editor de textos) y escribiremos lo siguiente:

<html>
  <head>
    <title>Prueba de applet</title>
  </head>
  <body>
    <h1>Prueba de applet</h1>
    <hr>
    <applet code=AppletHola.class width=300 height=120>
          alt="El navegador no puede mostrar el APPLET"
    </applet>
  </body>
</html> 
 

Grabaremos este texto con el nombre "prueba.html" (serviría cualquier otro nombre, con la única condición de que termine en ".htm" o en ".html") para utilizarlo un poco más adelante.

Vamos a ver qué hemos escrito:

• Es un fichero de texto, en el que aparecen algunas "etiquetas" encerradas entre < y >. El propio fichero en sí comienza por la etiqueta <html> y termina con </html> (esto será habitual: la mayoría de las etiquetas van "por pares", la primera crea un "bloque" y la segunda -la que contiene una barra al principio- indica el final del bloque).
• Después aparece otro bloque, opcional: la cabecera del fichero, que empieza con <head> y termina con </head>.
• Dentro de la cabecera hemos incluido una información que también es opcional: el "título" de la página, delimitado entre <title> y </title>. Este dato no es necesario, pero puede resultar cómodo, porque aparecerá en la barra de título del menú (ver las imágenes de ejemplo, un poco más abajo).
• Después va el cuerpo del fichero html, que se delimita entre <body> y </body>. (El cuerpo sí es obligatorio).
• Dentro del cuerpo, lo primero que aparece es un título (en inglés, "heading"), también opcional, delimitado entre <h1> y </h1>. Tenemos distintos niveles de títulos. Por ejemplo, podríamos poner un título de menor importancia delimitándolo entre <h2> y </h2>, o más pequeño aún entre <h3> y </h3>, y así sucesivamente.
• La etiqueta <hr> muestra una línea horizontal (en inglés, "horizontal ruler"; claramente, también es opcional), y no necesita ninguna etiqueta de cierre.
• Finalmente, la parte en la que se indica el applet comienza con <applet> y termina con </applet>. También es opcional en un "caso general", pero imprescindible en nuestro caso. En la etiqueta de comienzo se pueden indicar una serie de opciones, que veremos después con más detalle. Nosotros hemos utilizado sólo las tres imprescindibles:
  • code sirve para indicar cual es el nombre del applet a utilizar (en nuestro
  • width y height indican la anchura y altura de un rectángulo, medida en puntos de pantalla (pixels). Este rectángulo será la "ventana de trabajo" de nuestro applet.

  
  El resultado de todo esto se puede ver en el siguiente apartado...
  

12.5. Tercer paso: probar el resultado.

Si empleásemos la utilidad "AppletViewer" que incorporaban las primeras versiones del JDK, teclearíamos:

appletviewer prueba.html

y al cabo de un instante, tendríamos en pantalla algo parecido a:

También podemos usar cualquier otro navegador que soporte Java (cualquiera moderno debería permitirlo si está instalada la máquina virtual Java). Por ejemplo, el Netscape Navigator 4.5 del año 1998 mostraría lo siguiente:

y con el vetusto Internet Explorer 4 de Microsoft, del año 1997, veríamos

Las últimas versiones de Internet Explorer, Netscape Navigator y Mozilla ya no incluyen Java en su instalación normal, pero si hemos descargado el JDK desde la página de Sun (java.sun.com) se debería haber añadido automáticamente a nuestro navegador.

Y si no tenemos el JDK, porque no somos programadores, pero queremos usar Java (es lo que le ocurriría normalmente a los usuarios de nuestros programas), deberíamos descargar sólo la máquina virtual Java (el "Java Runtime Environment", JRE), que se instalaría automáticamente en nuestro(s) navegador(es).

12.6. La "vida" de un applet.

En los applets hay un detalle importante que hemos dejado pasar hasta ahora: no hemos utilizado una función "main" que represente el cuerpo de la aplicación. En su lugar, hemos empleado el método "paint" para indicar qué se debe mostrar en pantalla. Esto se debe a que un applet tiene un cierto "ciclo de vida":

• Cuando el applet se carga en el navegador, se llama a su método "init" (que nosotros no hemos "reutilizado"). Hace las funciones de un constructor.
• Cuando el applet se hace visible, se llama a su método "start" (que tampoco hemos empleado). Se volverá a llamar cada vez que se vuelva a hacer visible (por ejemplo, si ocultamos nuestro navegador y luego lo volvemos a mostrar).
• Cuando el applet se va a dibujar en pantalla, se llama a su método "paint" (como hemos hecho nosotros).
• El método "repaint" se utiliza para redibujar el applet en pantalla. Es normalmente el que nosotros utilizaremos como programadores, llamándolo cuando nos interese, en vez de "paint", que será el que se llame automáticamente. A su vez, "repaint" llama internamente a "update", que en ciertos casos nos puede interesar redefinir (por ejemplo, si no queremos que se borre toda la pantalla sino sólo una parte). Ambos los veremos con más detalle un poco más adelante.
• Cuando el applet se oculta (por ejemplo, si minizamos la ventana de nuestro navegador), se llama a su método "stop ". Sería conveniente que desde él parásemos las animaciones o cualquier otra tarea que consumiese recursos "sin necesidad".
• Cuando se termina de utilizar el applet, se llama a su método "destroy".

12.7. Dibujar desde un applet

Un ejemplo básico de cómo cambiar a modo gráfico y dibujar una diagonal en un Applet podría:  ser así:

/*-----------------------------*/ 
/*  Applet de ejemplo: entra a */
/*  modo grafico y dibuja una  */ 
/*  linea diagonal en la pan-  */ 
/*  talla.                     */ 
/*-----------------------------*/ 
 
 
import java.awt.*;
 
public class ipj01j extends java.applet.Applet {
 
    public void paint(Graphics g) {
        g.setColor( Color.yellow );
        g.drawLine( 20, 10,  310, 175 );
    }
 
}
 

Como es habitual para los Applets, deberemos compilar el fichero y crear la página web que nos permita lanzarlo. Si nuestro navegador no reconoce el lenguaje Java, veríamos el aviso "El navegador no puede mostrar el APPLET", pero si todo ha ido bien, debería aparecer algo como

Las posibilidades más básicas son:

  // Escribir texto: mensaje, coordenada x (horizontal) e y (vertical)
  g.drawString( "Hola Mundo!", 100, 50 ); 
 
  // Color: existen nombres predefinidos
  g.setColor( Color.black );
 
  // Linea: Coordenadas x e y de los extremos
  g.drawLine( x1, y1, x2, y2 );
 
  // Rectangulo: Origen, anchura y altura
  g.drawRect( x1, y1, ancho, alto );
 
  // Rectangulo relleno: identico
  g.fillRect( x1, y1, ancho, alto );
 
  // Rectangulo redondeado: similar + dos redondeos
  g.drawRoundRect( x1, y1, x2, y2, rnd1, rnd2 ); 
 
  // Rectangulo redondeado relleno: igual
  g.fillRoundRect( x1, y1, x2, y2, rnd1, rnd2 );
 
  // Ovalo (elipse): Como rectangulo que lo rodea
  g.drawOval( x1, y1, ancho, alto );
 
  // Ovalo relleno: identico
  g.fillOval( x1, y1, ancho, alto );

 

Un programa de prueba que utilice algunas de estas posibilidades podría quedar así:

/*----------------------------*/ 
/*  Applet de ejemplo: dibuja */
/*  figuras basicas           */ 
/*----------------------------*/ 
 
import java.awt.*;
 
public class ipj02j extends java.applet.Applet {
 
    public void paint(Graphics g) {
        // Primero borro el fondo en negro
        g.setColor( Color.black );
        g.fillRect( 0, 0, 639, 479 );
        // Y ahora dibujo las figuras del ejemplo
        g.setColor( Color.white );
        g.drawLine( 20, 10,  310, 175 );
        g.setColor( Color.yellow );
        g.drawLine( 639, 0,    0, 479);
        g.setColor( Color.blue );
        g.fillRect( 30, 30, 270, 170 );
        g.setColor( Color.cyan );
        g.drawOval( 270, 100, 100, 200 );
    }
 
}   
 

Y el resultado sería este:

Como los applets casi no se usan hoy en día, no veremos más detalles. En vez de eso, seguiremos profundizando con las posibilidades básicas de Java como lenguaje y con otras bibliotecas auxiliares que nos permitirán (por ejemplo) dibujar en una aplicación convencional, sea para el sistema operativo que sea.

12.8. ¿Y los servlets?

Un applet está diseñado para ejecutarse desde un navegador web, es decir, en el ordenador de un "cliente", si pensamos en una arquitectura cliente-servidor.

De forma alternativa, existe la posibilidad de que, en el servidor al que conecta nuestro navegador web, sea un programa Java el que responda a nuestras peticiones. Este tipo de aplicaciones Java que se implementan en un servidor web para aumentar las funcionalidades se suelen conocer como "servlets", pero no veremos más detalles sobre ellos... al menos por ahora...

Actualizado el: 21-07-2013 21:20