Aplicaciones web en Java (JSP) 180
dato enviado sea un texto que pueda contener tildes o eñes, hay que especificar la
codificación mediante [Link]("UTF-8") antes de recoger el dato.
<%-- [Link] (proyecto PasoDeCadena) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Paso de cadena</title>
</head>
<body>
<% [Link]("UTF-8"); %>
Me gusta mucho comer
<% [Link]([Link]("cadenaIntro"));%>
</body>
</html>
En el siguiente ejemplo, llamado Incrementa5, se muestra cómo manipular en JSP un dato
numérico. La aplicación recoge un número y luego muestra ese número incrementado
en 5 unidades.
<%-- [Link] (proyecto Incrementa5) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<form method="get" action="[Link]">
Introduzca un número (puede tener decimales):
<input type="text" name="numeroIntro">
<input type="submit" value="OK">
</form>
</body>
</html>
Observa en el fichero [Link] cómo se transforma la cadena de caracteres
que se recibe en numeroIntro en un dato numérico con el método [Link];
exactamente igual que si estuviéramos leyendo un número desde teclado en la
ventana de terminal.
Aplicaciones web en Java (JSP) 181
<%-- [Link] (proyecto Incrementa5) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
El número introducido más cinco es
<%
double resultado;
resultado = [Link]([Link]("numeroIntro")) + 5;
[Link](resultado);
%>
</body>
</html>
El siguiente ejemplo ilustra la recogida y envío de dos variables, x e y. Observa que
ahora el formulario contiene dos entradas de texto, una para cada variable.
<%-- [Link] (proyecto Suma) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Suma</title>
</head>
<body>
<h1>Supercalculadora</h1>
<form method="get" action="[Link]">
x <input type="text" name="x"/></br>
y <input type="text" name="y"/></br>
<input type="submit">
</form>
</body>
</html>
En el fichero [Link] se reciben las variables recogidas en [Link] y se suman.
Recuerda que por defecto la información enviada por un formulario es una cadena
de caracteres. Si queremos sumar los valores introducidos, debemos transformar las
cadenas de caracteres a números enteros con el método [Link]().
Aplicaciones web en Java (JSP) 182
<%-- [Link] (proyecto Suma) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Suma</title>
</head>
<body>
La suma es
<%
int primerNumero = [Link]([Link]("x"));
int segundoNumero = [Link]([Link]("y"));
[Link](primerNumero + segundoNumero);
%>
</body>
</html>
El siguiente proyecto de ejemplo es Animales. En la página principal ([Link]) se puede
seleccionar un animal - gato o caracol - y un número. Una vez introducidos los datos,
éstos se envían a [Link].
<%-- [Link] (proyecto Animales) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animales</title>
</head>
<body>
<form method="post" action="[Link]">
Seleccione animal a visualizar
<select name="animal">
<option>Gato</option>
<option>Caracol</option>
</select>
</br>
Número de animales <input type="text" name="numero" size="3">
</br>
<input type="submit">
</form>
</body>
</html>
Aplicaciones web en Java (JSP) 183
La página [Link] nos mostrará una imagen del animal elegido repetida el número
de veces que hemos indicado.
<%-- [Link] (proyecto Animales) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Animales</title>
</head>
<body>
<%
String nombreAnimal = [Link]("animal");
String nombreImagen;
if ([Link]("Gato")) {
nombreImagen = "[Link]";
} else {
nombreImagen = "[Link]";
}
int veces = [Link]([Link]("numero"));
for (int i = 0; i < veces; i++) {
[Link]("<img src=\"" + nombreImagen +"\" width=\"20%\">");
}
%>
</body>
</html>
12.4 POO en JSP
En las aplicaciones realizadas en JSP se puenden incluir clases definidas por el usuario
para posteriormente crear objetos de esas clases. Lo habitual es que el fichero que
contiene la definición de la clase se encuentre separado del programa principal.
En un nuevo proyecto con nombre GatosConClase vamos a crear la clase Gato; para
ello haz clic derecho sobre el icono del proyecto, selecciona Nuevo y luego selecciona
Clase de Java. El nombre de la clase será Gato y el nombre del paquete será por
ejemplo daw1.
El fichero [Link] quedaría como el que se muestra a continuación.
Aplicaciones web en Java (JSP) 184
/* [Link] (proyecto GatosConClase) */
package daw1;
public class Gato {
private String nombre;
private String imagen;
public Gato(String nombre, String imagen) {
[Link] = nombre;
[Link] = imagen;
}
public String getNombre() {
return nombre;
}
public String getImagen() {
return imagen;
}
@Override
public String toString() {
return "<img src='" + imagen + "' width='80'>Hola, soy " + nombre + "<br>";
}
public String maulla() {
return "<img src='" + imagen + "' width='80'>Miauuuuuuuu<br>";
}
public String come(String comida) {
return "<img src='" + imagen + "' width='80'>Estoy comiendo " + comida + "<br>";
}
}
Hemos creado una clase Gato muy sencilla que únicamente contiene dos atributos:
el nombre del gato y el nombre del fichero de su foto. Como métodos, se han
implementado toString(), maulla() y come().
Aplicaciones web en Java (JSP) 185
<%-- [Link] (proyecto GatosConClase) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="[Link]"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gatos con clase</title>
</head>
<body>
<h1>Gatos con clase</h1>
<hr>
<%
Gato g1 = new Gato("Pepe", "[Link]");
Gato g2 = new Gato("Garfield", "[Link]");
Gato g3 = new Gato("Tom", "[Link]");
[Link](g1);
[Link](g2);
[Link](g3);
[Link]([Link]());
[Link]([Link]("sardinas"));
%>
</body>
</html>
El código Java del programa principal es casi idéntico al que tendríamos en un
programa para consola.
El siguiente ejemplo - GatosConClaseYBocadillos - es una mejora del anterior. Se
añaden estilos5 para mostrar lo que dicen los gatos, igual que en un cómic.
/* [Link] (proyecto GatosConClaseYBocadillos) */
package daw1;
public class Gato {
private String nombre;
private String imagen;
public Gato(String nombre, String imagen) {
[Link] = nombre;
[Link] = imagen;
5
[Link]
GatosConClaseYBocadillos/[Link]
Aplicaciones web en Java (JSP) 186
public String getNombre() {
return nombre;
}
public String getImagen() {
return imagen;
}
@Override
public String toString() {
return "<div class=\"acciongato\"><img src=\"" + imagen + "\" width=\"80\"><div class=\
\"arrow_box\"> Hola, soy " + nombre + " </div></div>";
}
public String maulla() {
return "<div class=\"acciongato\"><img src=\"" + imagen + "\" width=\"80\"><div class=\
\"arrow_box\"> Miauuuuuuuu </div></div>";
}
public String come(String comida) {
return "<div class=\"acciongato\"><img src=\"" + imagen + "\" width=\"80\"><div class=\
\"arrow_box\"> Estoy comiendo " + comida + " </div></div>";
}
}
El único añadido al programa principal es una línea situada en la cabecera de la página
que carga la hoja de estilos [Link].
<%-- [Link] (proyecto GatosConClaseYBocadillos) --%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="[Link]"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Gatos con clase y bocadillos</title>
<link rel="stylesheet" type="text/css" href="[Link]" />
</head>
<body>
<h1>Gatos con clase</h1>
<hr>
<%
Gato g1 = new Gato("Pepe", "[Link]");
Aplicaciones web en Java (JSP) 187
Gato g2 = new Gato("Garfield", "[Link]");
Gato g3 = new Gato("Tom", "[Link]");
[Link](g1);
[Link](g2);
[Link](g3);
[Link]([Link]());
[Link]([Link]("sardinas"));
%>
</body>
</html>
Aplicaciones web en Java (JSP) 188
12.5 Ejercicios
Ejercicio 1
Crea una aplicación web en Java que muestre tu nombre y tus datos personales
por pantalla. La página principal debe ser un archivo con la extensión jsp.
Comprueba que se lanzan bien el servidor y el navegador web. Observa los
mensajes que da el servidor. Fíjate en la dirección que aparece en la barra de
direcciones del navegador.
Ejercicio 2
Mejora el programa anterior de tal forma que la apariencia de la página
web que muestra el navegador luzca más bonita mediante la utilización de
CSS (utiliza siempre ficheros independientes para CSS para no mezclarlo con
HTML).
Ejercicio 3
Escribe una aplicación que pida tu nombre. A continuación mostrará “Hola”
seguido del nombre introducido. El nombre se deberá recoger mediante un
formulario.
Ejercicio 4
Realiza una aplicación que calcule la media de tres notas.
Ejercicio 5
Realiza un conversor de euros a pesetas.
Ejercicio 6
Realiza un conversor de pesetas a euros.
Ejercicio 7
Combina las dos aplicaciones anteriores en una sola de tal forma que en la
página principal se pueda elegir pasar de euros a pesetas o de pesetas a euros.
Adorna la página con alguna foto o dibujo.
Aplicaciones web en Java (JSP) 189
Ejercicio 8
Realiza una aplicación que pida un número y que luego muestre la tabla de
multiplicar de ese número. El resultado se debe mostrar en una tabla (<table>
en HTML).
Ejercicio 9
Realiza una aplicación que pinte una pirámide. La altura se pedirá en un
formulario. La pirámide estará hecha de bolitas, ladrillos o cualquier otra
imagen.
Ejercicio 10
Realiza un cuestionario con 10 preguntas tipo test sobre las asignaturas
que se imparten en el curso. Cada pregunta acertada sumará un punto. El
programa mostrará al final la calificación obtenida. Pásale el cuestionario a tus
compañeros y pídeles que lo hagan para ver qué tal andan de conocimientos
en las diferentes asignaturas del curso. Utiliza radio buttons en las preguntas
del cuestionario.
Ejercicio 11
Escribe una aplicación que genere el calendario de un mes. Se pedirá el
nombre del mes, el año, el texto que queremos que aparezca sobre el
calendario, el día de la semana en que cae el día 1 y el número de días que
tiene el mes.
Ejercicio 12
Mejora la aplicación anterior de tal forma que no haga falta introducir el día
de la semana en que cae el día 1 y el número de días que tiene el mes. El
programa debe deducir estos datos del mes y el año. Pista: puedes usar la
clase Calendar ([Link]).
Ejercicio 13
Transforma el test de infidelidad realizado anteriormente para consola en una
aplicación web.
Aplicaciones web en Java (JSP) 190
Ejercicio 14
Escribe un programa que muestre los n primeros términos de la serie de
Fibonacci. El primer término de la serie de Fibonacci es 0, el segundo es 1
y el resto se calcula sumando los dos anteriores, por lo que tendríamos que
los términos son 0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144… El número n se
debe introducir por teclado.
Ejercicio 15
Realiza una aplicación que genere 100 números aleatorios del 1 al 200. Los
primos deberán aparecer en un color diferente al resto.
Ejercicio 16
Realiza una aplicación que muestre la tirada aleatoria de tres dados de póker.
Utiliza imágenes de dados reales.
Ejercicio 17
Realiza un configurador del interior de un vehículo. El usuario puede elegir,
mediante un formulario, el color de la tapicería – blanco, negro o berengena -
y el material de las molduras – madera o carbono. Se debe mostrar el interior
del coche tal y como lo quiere el usuario.
Ejercicio 18
Crea la aplicación “El Trile”. Deben aparecer tres cubiletes por pantalla y el
usuario deberá seleccionar uno de ellos. Para dicha selección se puede usar un
formulario con radio-button, una lista desplegable, hacer clic en el cubilete o lo
que resulte más fácil. Se levantarán los tres cubiletes y se verá si estaba o no
la bolita dentro del que el usuario indicó, así mismo, se mostrará un mensaje
diciendo “Lo siento, no has acertado” o “¡Enhorabuena!, has encontrado la
bolita”. La probabilidad de encontrar la bolita es de 1/3.
Ejercicio 19
Crea el juego “Apuesta y gana”. El usuario debe introducir inicialmente una
cantidad de dinero. A continuación aparecerá por pantalla una imagen de
forma aleatoria. Si sale una calavera, el usuario pierde todo su dinero y termina
el juego. Si sale medio limón, el usuario pierde la mitad del dinero y puede
seguir jugando con esa cantidad o puede dejar de jugar. Si sale el gato chino
de la suerte, el usuario multiplica por dos su dinero y puede seguir jugando
con esa cantidad o puede dejar de jugar.
Aplicaciones web en Java (JSP) 191
Ejercicio 20
Crea una aplicación que dibuje un tablero de ajedrez mediante una tabla HTML
generada con bucles usando JSP y que sitúe dentro del tablero un alfil y un
caballo en posiciones aleatorias. Las dos figuras no pueden estar colocadas en
la misma casilla. Las filas y las columnas del tablero deben estar etiquetadas
correctamente.