Introducción al Desarrollo de Aplicaciones Web
Este documento le guiará por los primeros pasos para desarrollar aplicaciones web usando NetBeans IDE. Le mostrará como crear una aplicación web simple, su despliegue en el servidor y su presentación en un navegador. La aplicación utiliza una pagina JavaServer Pages™ (JSP) para que ingrese su nombre. Luego utiliza un componente JavaBeans™ para que el nombre persista durante toda la sesión HTTP, y devuelve el nombre en la segunda página JSP.
Contenidos
Para completar este tutorial, necesitará el siguiente software y recursos.
| NetBeans IDE |
Instalación Web o Java EE
versión 6.1 o versión 6.0 |
| Java Developer Kit (JDK) |
versión 6 o
versión 5 |
Servidor de Aplicaciones GlassFish
o
Contenedor de Servlets Tomcat |
V2
versión 6.x |
Notas:
- Las instalaciones Web y Java EE le permitirán que instale, de manera opcional, el servidor de aplicaciones GlassFish V2 y el contenedor de servlets Apache Tomcat 6.0.x. Debe de instalar una de las aplicaciones anteriores para realizar el tutorial.
- Para aprovechar las capacidades Java EE 5 de NetBeans IDE, use un servidor de aplicaciones que cumpla con los requisitos de la especificación Java EE 5, como el Servidor de Aplicaciones GlassFish V2 UR2. Si usa un servidor diferente, consulte las Notas de la Versión y Preguntas Frecuentes para informarse acerca de problemas conocidos y soluciones. Para información detallada sobre los servidores soportados y la plataforma Java EE, revise las Notas de la Versión.
- Si necesita comparar su proyecto con una solución efectiva, puede descargar la aplicación de ejemplo.
Configurando un Proyecto de Aplicación Web
- Escoja File > New Project (Ctrl-Shift-N) del menú principal. En Categories, seleccione Web. Bajo Projects, seleccione Web Application entonces haga click en Next.
- Introduzca HelloWeb en el campo Project Name. Note que el Context Path (e.j., en el servidor) se convierte en /HelloWeb.
- Especifique en Project Location, cualquier directorio en su computador. Para propósitos de este tutorial, este directorio se refiere como $PROJECTHOME.
Nota: La creación de proyectos en NetBeans IDE 6.1 incluye nuevas opciones que se pueden dejar por defecto. Por ejemplo, puede dejar sin marcar la casilla Use Dedicated Folder for Storing Libraries.
- Si esta utilizando NetBeans IDE 6.1, haga click en Next; de otra manera continúe con el paso 5.
- Seleccione el servidor en el cual va a desplegar su aplicación. Solamente se listaran servidores que estén registrados en el IDE.
- Seleccione la versión de Java EE que quiere utilizar en su aplicación y haga click en Next.
- En el panel de Frameworks, haga click en Finish para crear el proyecto.
El IDE crea la carpeta del proyecto $PROJECTHOME/HelloWeb. La carpeta del proyecto contiene todas las fuentes y metadata del proyecto, como el script de compilación Ant. El proyecto HelloWeb se abre en el IDE. La página de bienvenida, index.jsp, se abre en el Source Editor de la ventana principal. Podrá ver la estructura de archivos del proyecto en la ventana Files (CTRL-2), y su estructura lógica en la ventana Projects (CTRL-1):
Creando y Editando los Archivos Fuente de la Aplicación Web
La creación y edición de archivos fuente es la función más importante que proporciona el IDE. Claro está que es la actividad a la que le dedica más tiempo. El IDE proporciona una amplia variedad de herramientas que pueden complementar el estilo personal de cualquier desarrollador, aun si prefiere escribir todo a mano o si espera que el IDE genere el código por usted.
Creando un Paquete Java y un Archivo Fuente Java
- En la ventana Projects, expanda el nodo Source Packages. Note que el nodo Source Packages solo contiene un nodo por de facto vacío.
- Haga click derecho en el nodo Source Package y seleccione New > Java Class. Ingrese NameHandler en el campo Class Name y escriba org.mypackage.hello en el campo Package. Haga click en Finish. Note que el nuevo archivo NameHandler.java se abre en Source Editor.
- En Source Editor, declare una variable String escribiendo la siguiente línea directamente debajo de la declaración de la clase:
String name;
- Añada el siguiente constructor a la clase:
public NameHandler()
- Añada la siguiente línea en el constructor NameHandler():
name = null;
Generando Métodos Getter y Setter
- Haga click derecho en el campo name en Source Editor y seleccione Refactor > Encapsulate. Se abre el dialogo Encapsulate Fields, listado el campo name. Note que Fields' Visibility está por de facto establecido como private, y Accessors' Vissibility como public, indicando que el modificador de acceso para la declaración de variable de clase será especificada como privada, mientras que los métodos getter y setter se generaran con modificadores public y private respectivamente.
- Haga click en Refactor. Los métodos getter y setter son generados para el campo name. El modificador para la variable de clase esta definido como private mientras que los métodos getter y setter son generados como modificadores públicos. La clase Java ahora se verá similar a lo siguiente:
package org.mypackage.hello;
/**
*
* @author nbuser
*/
public class NameHandler {
private String name;
/** Creates a new instance of NameHandler */
public NameHandler() {
name = null;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
Editando el Archivo JSP (JavaServer Pages)
- Retorne al archivo index.jsp haciendo click en la lengüeta disponible sobre Source Editor.
- En Palette (Ctrl-Shift-8) localizada en la parte derecha de Editor Source, expanda HTML Forms y arrastre el ítem Form dentro de Source Editor, a un punto después de las etiquetas <h2>. La caja de dialogo de Insert Form se muestra así:
Especifique los siguientes valores:
- Action: response.jsp
- Method: GET
- Name: Name Input Form
Haga click en OK. Un formulario HTML es añadido al archivo index.jsp.
- Arrastre un ítem Text Input a un punto antes de la etiqueta </form>, entonces especifique los siguientes valores:
Haga click en OK. Una etiqueta HTML <input> ha sido añadida dentro de las etiquetas <form>.
- Arrastre un ítem Button a un punto justo antes de la etiqueta </form>. Especifique los siguientes valores:
Haga click en OK. Un boton HTML a sido añadido entre las etiquetas <form>.
- Escriba Enter your name: justo antes de la etiqueta <input>, entonces cambie el texto Hello World! que esta entre las etiquetas <h2> a Entry Form.
- Haga click derecho dentro de Source Editor y seleccione Format (Alt-Shift-F) para limpiar el formato de su código. Su archivo index.jsp se parecerá a lo siguiente:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
</head>
<body>
<h2>Entry Form</h2>
<form name="Name Input Form" action="response.jsp">
Enter your name:
<input type="text" name="name" />
<input type="submit" value="OK" />
</form>
</body>
</html>
Creando un Archivo JSP (JavaServer Pages)
- En la ventana Projects, haga click derecho en el nodo del proyecto HelloWeb y seleccione New > JSP. El asistente New JSP File se abrirá. Dele el nombre response, y haga click en Finish. Note que el nodo del archivo response.jsp se muestra en la ventana Projects debajo de index.jsp, y el nuevo archivo se abre en Source Editor.
- En Palette a la derecha de Source Editor, expanda JSP y arrastre el ítem Use Bean a un punto debajo de la etiqueta <body> en Source Editor. La caja de dialogo de Insert Use Bean se abre. Ingrese los siguientes valores:
- ID: mybean
- Class: org.mypackage.hello.NameHandler
- Scope: session
Haga click en OK. Note que las etiquetas <jsp:useBean> aparecen debajo de la etiqueta <body>.
- Arrastre el ítem Set Bean Property de Palette a un punto antes de la etiqueta <h2> y haga click en OK. En la etiqueta <jsp:setProperty> , borre el atributo vacío value y cámbielo por lo siguiente:
<jsp:setProperty name="mybean" property="name" />
Como se indica en la documentación de <jsp:setProperty>, puede indicar un valor de propiedad de varias maneras. En este caso, el ingreso del usuario que viene de index.jsp se convierte en un par nombre/valor que pasa al objeto request object. Cuando define una propiedad usando la etiqueta <jsp:setProperty>, podrá especificar el valor de acuerdo con el nombre de la propiedad contenida en el objeto request. Por tanto, al definir property a name, podrá recuperar el valor especificado por el ingreso del usuario.
- Cambie el texto entre las etiquetas <h2> para que se vea como los siguiente:
<h2>Hello, !</h2>
- Arrastre el ítem Get Bean Property de Palette y sueltelo despues de la coma entre las etiquetas <h2>. Especifique los siguientes valores en la caja de dialogo de Insert Get Bean Property:
- Bean Name: mybean
- Property Name: name
Haga click en OK. Note que las etiquetas <jsp:getProperty> están entre las etiquetas <h2>.
- Haga click derecho en Source Editor y seleccione Format (Alt-Shift-F) para limpiar el formato de su código. Las etiquetas <body> del archivo response.jsp deberán ser similares a:
<body>
<jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
<jsp:setProperty name="mybean" property="name" />
<h2>Hello, <jsp:getProperty name="mybean"property="name" />!</h2>
</body>
Compilando y Ejecutando un Proyecto de Aplicación Web
El IDE usa un script de compilación Ant y ejecuta las aplicaciones Web. El IDE genera el script de compilación basado en las opciones que especifique en el asistente New Project, así como los de la caja de dialogo Project Properties del proyecto (En la ventana Projects, seleccione Properties del menú del nodo del proyecto).
- En la ventana Projects, haga click derecho sobre el nodo del proyecto HelloWeb y seleccione Run (F6). El IDE compila la aplicación web y la despliega en el servidor que especificó cuando creó el proyecto. La página index.jsp se abre en su navegador:
- Ingrese su nombre en la caja de texto, y haga click en OK. La página response.jsp se mostrará, saludándole:
Solución de Problemas
He compilado y ejecutado el proyecto. Cuando hago click en en el botón OK para index.jsp, una página de error aparece indicando que response.jsp no está disponible.
¿Está utilizando JDK versión 5 o superior? Seleccione Help > del menú principal para verificar la versión del JDK que está usando el iDE. ¿Está usando Tomcat versión 5.x o superior? Seleccione Tools > Servers del menú principal. Seleccione el servidor que el proyecto esta utilizando y observe la entrada Server Type mostrada cerca de la cabecera del dialogo. También puede intentar descargar el proyecto ejemplo y compararlo con el suyo.
Véase También
Esto concluye el tutorial Introducción al Desarrollo de Aplicaciones Web. Este documento muestra como crear una simple aplicación web usando NetBeans IDE, desplegándola en un servidor, y mostrando su presentación en un navegador. También muestra como utilizar JSP (JavaServer Pages) y JavaBeans en su aplicación para capturar, mantener y mostrar la información del usuario.
Para información relacionada y más avanzada sobre el desarrollo de aplicaciones web en NetBeans IDE, vea los siguientes recursos:
