viernes, 24 de julio de 2009

Introducción al desarrollo de Aplicaciones Web con Java y NetBeans

Esto lo escribo en consideración al comentario que me dijo Alex (aka Walex Sch!!), que necesitaba algo de info sobre aplicaciones web en java, específicamente de J2EE (Java 2 Enterprise Edition)....

Pues bien, partiremos entonces con una reseña desde lo más básico hasta lo más complicado en aplicaciones web con Java... desde el típico Hola Mundo, hasta el uso de persistencias...

Para esto me basaré en tres cosas:

  1. Primero y lo más importante: El material el tutoriales y Ejemplos que existen en la página de NetBeans, que con mucho esfuerzo y dedicación he de traducir para ustedes (ignaros!!)....
  2. y En segundo Lugar a mi propio conocimiento en estos mismos menesteres...
  3. Que el desarrollador está utilizando, al menos, NetBeans IDE 6.5, o idealmente 6.7...
Entonces, veremos ahora una Introducción al desarrollo de Aplicaciones Web





Este documento nos llevará a través del uso básico de NetBeans para el desarrollo de aplicaciones Web. Aquí se demostrará como crear una aplicación web simple, implementarla en un servidor y ver su representación en un navegador. La aplicación empleará JavaServer Pages™(JSP) para solicitarles que ingresen su nombre. Usará también un componenteJavaBeans™ para hacer que sus datos permanezcan durante la sesión HTTP, y nos dovolverá el nombre como salida en una segunda página JSP.

Contenidos

Para seguir este Tutorial, necesitan los siguientes Softwares y Recursos.
Software o RescursoVersión Requerida
NetBeans IDE 6.5 o 6.7
Java Development Kit (JDK)versión 6
GlassFish application server
o
Tomcat servlet container
V2

versión 6.x

Notas:

  • La instalación de componentes Web y Java EE habilita opcionalmente la instalación del servidor de aplicaciones GlassFish V2 y de Apache Tomcat 6.0.x. Necesitas instalar uno de ambos para seguir este tutorial (ojalá GlassFish si realmente deseas introducirte al mundo J2EE).

  • Si no se la puede para hacer estos simples ejercicios por su cuenta, o simplemente no tiene dedos para el piano y la programación no es lo suyo, puede ver un ejemplo funcional de este tutorial descargando la aplicación de ejemplo.



Configurando un proyecto de Aplicación Web

  1. Elije Archivo > Nuevo Proyecto (Ctrl-Shift-N) desde el menu principal. Bajo Categorías, selecciona Java Web. Bajo Proyectos, selecciona Aplicación Web y luego click en siguiente.
  2. En el paso 2, ingresa HelloWeb en el campo de texto Nombre del Proyecto.
  3. Especifica la Ubucación del proyecto en cualquier directorio de tu computador. Para efectos del tutorial, éste directorio será referido como
    $PROJECTHOME.
  4. Click en Siguiente. Selecciona el servidor con el que deseas implementar tu aplicación. Sólamente los servidores que están registrados con el IDE son los que se listan.. Nótese que la Ruta del Contexto (Context Path p.ej: en el servidor) viene siendo /HelloWeb, que es en base al mismo nombre que se le dió a la Aplicación en el paso anterior.
  5. Selecciona la versión de Java EE que deseas usar con tu aplicación y clickea siguiente.
  6. En el panel de Frameworks, no selecciones nada y simplemente haz click en Finalizar para crear el proyecto.
    El IDE crea el directorio del proyecto $PROJECTHOME/HelloWeb. El directorio del Proyecto contiene todos los archivos fuente y la metadata del proyecto, como los Scripts de construcción de Ant. El proyecto HelloWeb es abierto en el IDE automáticamente. La página de bienvenida, index.jsp, se abre en el editor de código en la ventana principal. Puedes ver la estructura de archivos del proyecto en la ventana Archivos (Ctrl-2), y su estructura lógica en la ventana Proyecto (Ctrl-1).


    Estructura lógica del proyecto HelloWeb vista en la Ventana de Proyectos

Creando y editando Archivos fuente de Aplicaciones Web

Crear y editar archivos de código fuente es la función principal y más importante que un IDE. Después de todo, es posible que te pases la mayor parte del día haciendolo. El IDE provee de una ampla gama de herramientas que complementan el estilo personal de cada desarrollador, sea que prefieras escribir todo el código a mano o quieras que el IDE genere largos trozos de código por ti.

Creando un Paquete Java y un archivo Fuente

  1. En la ventana de Proyectos, expande el nodo Paquetes de Fuentes. Fíjate que los paquetes de fuentes sólamente contienen un paquete vacío por defecto.
  2. Click derecho sobre Paquetes de Fuentes y elije Nuevo > Clase de Java. Ingresa NameHandler en el campo de texto Nombre de Clase y luego escribe org.mypackage.hello en el combo box Paquete. Click en Finalizar. Ahora la nueva clase NameHandler.java se abrirá en el Editor de código.
  3. En el editor, declara una variable String escribiendo la siguiente línea directamente debajo de la declaración de la Clase.
    String name;
  4. Agrega el siguiente constructor para la clase:
    public NameHandler()
  5. Por último agrega la siguiente línea en el constructor NameHandler():
    name = null;

Generando los métodos Accesadores(Getter) y Mutadores(Setter)

  1. Click derecho en el campo name en el editor de código y elije Refactorizar > Encapsular Campos. Se abrirá el dialogo de Encapsulador de Campos, listando el campo name.
  2. Click en Refactorizar. Los métodos Accesadores y Mutadores son generados para el campo name. Los modificadores de acceso para la variable de la clase son modificados a private mientras los accesadores y mutadores son generados con modificadores públicos. La clase debería verse similar a la siguiente.

    package org.mypackage.hello;
    /**
    *
    * @author nbuser
    */4
    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;

    }
    }

  3. Editando la página JSP por defecto

    1. Debes Retomar el archivo index.jsp haciendole click en su pestaña, arriba del Editor de código.
    2. En la Paleta (Ctrl-Shift-8) ubicada a la derecha del editor, expande los Formularios HTML y arrastra un item Formulario hacia un punto ubicado después de las etiquetas <h1> en el editor de código.

      La caja de dialogo Insertar Formulario aparecerá en la pantalla.

    3. Especifica los siguientes valores:
      • Acción: response.jsp
      • Método: GET
      • Nombre: Name Input Form

      Haz Click en OK. Un formulario HTML ha sido añadido al archivo index.jsp.

      Caja de Dialogo Formulario de Ingreso

    4. Arrastra un item de Ingreso de Texto hasta un punto justo antes de la etiqueta </form>, luego especifica los siguientes valores:
      • Nombre: name
      • Tipo: text
      Click en OK. Una etiqueta <input> fue añadida entre las etiquetas <form>.
    5. Arrastra un item Botón;n hasta un punto justo antes de la etiqueta</form>. Indícale los siguiente valores:
      • Etiqueta: OK
      • Tipo: submit
      Haz click en OK. Un botón HTML ha sido añadido entre las etiquetas <form>.
    6. Escribe Enter your name: justo antes de la primera etiqueta <input>, luego cambiale el texto por defecto Hello World! entre las etiquetas <h1> a Formulario de Ingreso.
    7. Click derecho dentro del editor de código y elije Formato (Alt-Shift-F) para limpiar el formato de tu código. Tu página index.jsp debería verse similar a la siguiente:

      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>JSP Page</title>
      </head>
      <body>
      <h1>Entry Form</h1>

      <form name="Name Input Form" action="response.jsp">
      Enter your name:

      <input type="text" name="name" />
      <input type="submit" value="OK" />

      </form>
      </body>
      </html>



    8. Creando una página JSP

      1. En la ventana Proyectos, click derecho en el proyecto HelloWeb y elije Nuevo > JSP. El asistente para un nuevo archivoJSP se abrirá. Nomnra al archivo response, y haz click en finalizar. Fíjate que el archivo response.jsp se muestra en la ventana de Peoyectos, debajo de index.jsp, y el nuevo archivo se abre en el editor.
      2. En la paleta, a la derecha del editor, expande JSP y arrastera un item Use Bean hasta un punto debajo de <body>. El dialogo para insertar un nuevo Bean se abre. Especifica los valores como se muestra en la siguiente figura.

        Use Bean dialog containing specified fields
        • ID: mybean
        • Clase: org.mypackage.hello.NameHandler
        • Alcance: session
        Click en OK. Fíjate que la etiqueta <jsp:useBean> se añadió debajo de <body>.
      3. Arrastra un item Bean Property desde la paleta hasta después de la etiqueta <h1> y haz click en OK. En la etiqueta <jsp:setProperty> aparecerá, borra el atributo vacío value y edita como sigue:<jsp:setProperty name="mybean" property="name" />Como se indica en la documentación de <jsp:setProperty>, puedes modificar un valor de la propiedad de varias formas. En este caso el ingreso de datos del usuario viene de index.jsp desde un par de un par name/value que es enviado hacia el objeto request. Cuando modificas una propiedad usando la etiqueta <jsp:setProperty>, puedes especificar el valor de acuerdo al nombre de3 la propiedad contenida en el objeto request. Por lo tanto, mediante la modificación de property a name, puedes devolver el valor especificado por el ingreso(input) del usuario.
      4. Cambia el texto entre las etiquetas <h1> para que se vea como esto:<h1>Hello, !</h1>
      5. Arrastra un item Get Bean Property (Obtener propiedades del Bean) desde la paleta y suéltalo después de la coma entre las etiquetas <h1>. Especifica los siguientes valores en el dialogo Get Bean Property:
        • Nombre del Bean: mybean
        • Nombre de la Propiedad: name
        Click en OK. Si te fijas, la etiqueta<jsp:getProperty> ahora está en tu código; entre las etiquetas <h1>.
      6. Click derecho dentro del editor de código y elije Formato (Alt-Shift-F) para limpiar nuevamente el formato de tu código. Las etiquetas <body> de tu archivo response.jsp deberían verse similares a las siguientes:<body>
        <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
        <jsp:setProperty name="mybean" property="name" />
        <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
        </body>

Ejecutando un proyecto de Aplicacion Web

El IDE usa un constructor de Scripts Ant para compilar y ejecutar tus aplicaciones Web. El IDE genera un script de compilación basado en las opciones que tú indicaste en el Asistente de Nuevo Proyecto, así como las que están en el cuadro de dialogo Propiedades del Proyecto (En la ventana Proyectos, elijes Propiedades desde la raiz del tuyo, haciendo Click derecho sobre él).

  1. En la ventana de Proyectos, click derecho en el Proyecto HelloWeb y elije Ejecutar (F6).


    index.jsp en un navegador
  2. Ingresa tu nombre en la caja de texto, luego haz click en OK. La página response.jsp aparece, mostrandote los datos con un simple saludo.


    response.jsp en un navegador






Ya se viene la Segunda Parte...

Creación de una Aplicacón Web simple usando Base de datos MySql



No hay comentarios:

Publicar un comentario