Cómo crear una página Web usando Netbeans

De forma sencilla crearemos una página Web utilizando Java EE 5, JavaBeans, JSP y Glassfish como servidor puesto que estos ya vienen integrados con nuestro IDE.

Configurando el proyecto de aplicación Web en Netbeans

1- Creamos un nuevo proyecto ( Ctrl + Shift + N ) Java Web – Web Application

2- Para este ejemplo y debido a su sencillez le nombraré SimpleWebApplication, ustedes pueden nombrarle como gusten.

3- Muy bien, ahora seleccionamos el servidor que deseamos utilizar, solo aparecerán listados los servidores registrados con el IDE, para el ejemplo yo he dejado seleccionado el GlassFish v2.1, la versión de Java EE 5 y la ruta la dejamos tal como aparece.

4- A continuación pulsamos siguiente sin seleccionar ninguno de los frameworks.

Muy bien hemos creado nuestro proyecto, en el panel de Proyectos debe verse lo siguiente:

<%--
Document   : index
Created on : 23/12/2009, 12:14:42 PM
Author     : M.Octavio
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Creación y edición de código fuente para la aplicación Web

1- Procedemos a crear un paquete y un archivo Java Class para nuestro código, para ello pulsamos el botón derecho el nodo del proyecto y selecionamos Java Class

2- Al crear el nuevo archivo establecemos lo siguiente:
  • Class Name: datoUsuario
  • Package: myPackage
El resultado en un archivo llamado datoUsuario.java con el siguente código:

package myPackage;
/**
*
* @author M.Octavio
*/
public class datoUsuario {

}

al cual agregaremos una variable String llamada ‘nombre’ y un constructor datoUsuario, con lo que el código debe quedar de la siguiente manera:

package myPackage;

public class datoUsuario {
 String nombre;
 public datoUsuario(){
      nombre = null;
 }
}

3- Muy bien ahora insertamos los bloques de código Set y Get para la variable nombre, para ello es necesario pulsar el botón derecho sobre la variable y seleccionar la opción del menú ‘ Insertar código…’ o podemos presionar Alt + Insert para hacerlo mas rápido, con esto se nos abrirá un asistente el el cual debemos seleccionar Getter and Setter.

4- Se nos presenta un cuadro de dialogo en el cual seleccionamos la variable a la cual deseamos establecerle los método, con eso obtenemos el siguiente resultado:

package myPackage;
/**
*
* @author M.Octavio
*/

public class datoUsuario {
private String nombre;

public String getNombre() {
    return nombre;
}

public void setNombre(String nombre) {
    this.nombre = nombre;
}

public datoUsuario() {
    nombre = null;
}
}

Creación y Edición de Java Server Pages JSP

1- Muy bien, volvemos al archivo index.jsp, nos posicionamos debajo de la linea 17 <h1>Hello World!</h1> y nos posicionamos en la paleta de herramientas ( Ctrl + Shift + 8) allí le damos dobleclick a Form, con lo que se nos muestra un cuadro de dialogo en el cual especificaremos lo siguiente:
  • Action: response.jsp
  • Method: GET
  • Name: formNombre
2- Posicionamos el cursor en la línea 19, justo antes de la etiqueta </form> y le damos dobleclick aText Input en la paleta, automáticamente se nos mostrará un cuadro de dialogo donde pondremos lo siguiente:
  • Name: txtNombre
  • Type: text
Repetimos el proceso, esta vez con un Botón en el cual pondremos lo siguiente :
  • Label: OK
  • Type: submit

Muy bien si lo hemos hecho bien nuestro código debe verse tal como se muestra a continuación:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <h1>¿Cuál es tu nombre?</h1>
    <form name="formNombre" action="response.jsp ">
        <input type="text" name="txtNombre" />
        <input type="submit" value="OK" />
    </form>
</body>
</html>

Importante: Eliminar el codgio value="" en el input type=”text”

Nótese que cambie la frase Hello World! por ¿Cuál es tu nombre?, no afecta en nada el código, solo por cuestiones de apariencia.

Casi listo! Procedemos a crear un JSP response, el cual mostrará el resultado de nuestra operación, para ello pulsamos el botón derecho sobre el nodo del proyectos y seleccionamos JSP…

Una vez allí le nombramos response

Justo después de la etiqueta <body> en el archivo response insertamos un Use Bean con la siguiente información:
  • ID: mybean
  • Class: myPackage.datoUsuario
  • Scope: session
Insertamos un Get Bean Property justo antes de la etiqueta <h1>

<body>
<jsp:useBean id="mybean" scope="session" class="myPackage.datoUsuario" />
<jsp:setProperty name="mybean" property="nombre" />
<h1>Hello World!</h1>
</body>

y remplazamos la palabra World por un Set Bean Property

<body>
<jsp:useBean id="mybean" scope="session" class="myPackage.datoUsuario" />
<h1>Hello <jsp:setProperty name="request" property="nombre" value="" />!</h1>
</body>

Importante: Eliminar el código value="" con lo que el código quedará de la siguiente manera:


<h1>Hello <jsp:setProperty name="request" property="nombre" />!</h1>

El código final para el archivo response.jsp es:

<%--
Document   : index
Created on : 23/12/2009, 12:14:42 PM
Author     : M.Octavio
--%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>JSP Page</title>
</head>
<body>
    <jsp:useBean id="mybean" scope="session" class="myPackage.datoUsuario" />
    <jsp:setProperty name="mybean" property="nombre" />
    <h1>Hello, <jsp:getProperty name="mybean" property="nombre" />!</h1>
</body>
</html>

Etiquetas: ,