Eclipse -- VIII -- Desarrollo Visual de una Aplicación Struts con el Plug-in Exadel Studio

Puede encontrar la versión original de este artículo en Inglés en:

http://www.exadel.com/

Introducción

En este artículo se utilizará el marco de trabajo Struts para crear y construir una aplicación Web utilizando el IDE Exadel Studio Web. Puede descargar la última versión de Exadel Studio en http://www.exadel.com/.

Usaremos el ya conocido ejemplo Numberguess que viene con el contenedor de servlets Tomcat. Esta aplicación le pide que acierte un número aleatorio entre 0 y 100 generado por la aplicación. Funciona de esta forma:

  1. La aplicación le pide al usuario que acierte un número entre 0 y 100.
  2. La aplicación compara la entrada del usuario con el número generado aleatoriamente.
  3. Luego:
    • Si el número no corresponde, le pide al usuario que lo intente de nuevo.
    • Si el número es el correcto, el juego termina, pero puede iniciarse otra vez.

Antes de Empezar

Este artículo está Basado en Eclipse SDK 3.1.1 y en el plug-in Exadel Studio 3.0.5.

Descarga e Instalación de Exadel Studio

  1. Descargue la versión de Exadel Studio adecuada para su sistema operativo desde http://box.exadel.com/exadelproducts/
  2. Instale el plug-in
  3. Arranque Eclipse.
  4. Si no ve la perspectiva Exadel Studio seleccione Window/Open Perspective.../Other.../Exadel Studio en la barra de menú

    Figura 1: Aspecto de la Perspectiva Exadel Studio

Desarrollo de la Aplicación

Ahora, creemos nuestra aplicación. Necesitaremos crear un nuevo proyecto, diseñar el Flujo Web, construir un par de clases Java, escribir algunas páginas JSP, y luego ejecutar la aplicación. Todo desde dentro de Exadel Studio

Crear un Nuevo Proyecto

Al igual que en cualquier otro IDE, primero necesitamos crear un nuevo proyecto en Exadel Studio. Para hacer esto, seleccione File/New/Project... en la barra de menú, y luego Exadel Studio/Struts/Struts Project en la caja de diálogo New Project . Pulse sobre Next.

En el primer paso, debería ver los siguientes valores:

itemvalor
Project Name El nombre de su nuevo proyecto, teclee guessGame
Use Default PathDéjelo marcado
LocationDéjelo como está
VersionDéjelo como está
TemplateDéjelo como está

Pulse sobre Next para ir al paso dos del asistente de creación de proyectos. Este paso le permite registrar su aplicación con el contenedor Tomcat, para que pueda probar y ejecutar su aplicación en un navegador web. Deje todos los valores según están. Usaremos guessGame como nombre de la aplicación. Esto significa que podrá ejecutar la aplicación en un navegador utilizando la URL http://localhost:8880/guessGame/.


Figura 2: Aspecto del asistente de creación de proyectos

Pulse sobre Next para ir al último paso. Este paso le permite seleccionar qué ficheros TLD se incluirán en su proyecto. Déjelo todo como está. Pulse sobre Finish para finalizar la creación del proyecto.

Finalmente, en la vista del árbol de Navegación donde se muestra el árbol del proyecto, expanda el nodo WebContent/WEB-INF, pulse con el botón derecho sobre struts-config.xml, y seleccione Open.

Su proyecto debería parecerse al de la siguiente figura. A la izquierda está el árbol del proyecto, con el fichero struts-config.xml seleccionado, a la derecha, el diagrama de Flujo Web, donde crearemos nuestra aplicación.


Figura 3: Aspecto del proyecto recién creado.

Nota:
Si no ve la Paleta Exadel en Eclipse, seleccione Window/Show View/Exadel Palette en la barrá de menú.

Adelante y cambie a la vista Tree seleccionando la pestaña en el diagrama Web Flow. Esta vista le muestra el fichero struts-config en una estructura de árbol, y le permite añadir diferentes componenes Struts a su fichero struts-config.xml.


Figura 4: Aspecto de la vista del árbol del fichero struts-config.xml

Crear el Flujo web

Una de las características únicas de Exadel Studio es el diagrama de Flujo Web. Este diagrama es una representación visual de un fichero de configuración de Struts que muestra cómo el flujo de la aplicación va de componente a componente. Exadel Studio le permite crear su flujo web (lógica de la aplicación) incluso antes de implementar cualquiera de las acciones o páginas JSP constituyentes. (Para ver el código XML subyacente del fichero de configuración Struts, siempre puede seleccionar la pestaña Source en la parte inferior del diagrama). Todos los elementos que necesita nuestra aplicación se pueden crear pulsando con el botón derecho sobre el fondo del diagrama, como muestra la siguiente figura. (También puede hacer lo mismo arrastrando los elementos de la paleta situada en la parte izquierda del diagrama).


Figura 5: Menú de creación de componentes Struts

Crear la Primera Página JSP

Empezaremos creando la primera página JSP. Esta página JSP pedirá al usuario que introduzca un número para compararlo con el número generado por la aplicación.

Pulse con el botón derecho sobre el fondo del diagrama y seleccione Add/Page.... Como nombre introduzca: /pages/start.jsp . Pulse sobre Finish. Debería aparecer una página JSP en el diagram de flujo web.

Crear un Forward Global

Luego crearemos un Global Forward. Un Forward simplemente le permite dirigir el tráfico a otro recurso de la aplicación. Piense en él como un enlace a otro recurso. El recurso puede ser otra Action, una Exception, o una página JSP. En nuestro caso, este Global Forward será el punto de entrada de la aplicación.

Pulse con el botón derecho en el fondo del diagrama y seleccione Add/Global Forward.... Aparecerá un asistente con los campos mostrados en la siguiente tabla. Rellénelos con estos valores:

ítemvalorexplicación
Name startEl nombre de este Forward.
Path/pages/start.jspEl forward saltará a este recurso.
Redirect Déjelo en blancoSi se debe enviar al nevegador una instrucción de redireccionamiento.
ContextRelative Déjelo en blancoUtilizado en aplicaciones multi-modulares

Una vez que ha creado el Forward su flujo Web debería parecerse al de la siguiente figura:


Figura 6: Aspecto del Diagrama de Flujo Web tras crear el Forward.

Crear una Action

Una Action es una unidad lógica. Es el lugar donde se puede realizar una función de negocio en la aplicación. Una vez que la función de negocio ha finalizado su ejecución, la Action enviará la ejecución (mediante un local forward que funciona de la misma forma que un global forward) al recurso especificado por el forward.

Pulse con el botón derecho en el fondo del diagrama de flujo y seleccione Add/Action.... Aparecerá el asistente para añadir acciones. Sus campos y valores se explican en la siguiente tabla:

ítemvalorexplicación
Path/makeGuessPath de esta Action
NameMakeGuessFormNombre del FormBean que capturará la entrada de la página start.jsp
ScopesessionÁmbito del action form.
Typesample.MakeGuessActionNombre de la clase Java para esta Action
ValidateDéjelo en blancoSi se llamará al método validate del action form

Pulse sobre Finish para crear esta acción.

Ahora necesitamos crear una transición desde la página start.jsp a la Action. Para hacer esto, seleccione el icono Create New Connection: en la esquina superior izquierda del diagrama para cambiar el cursor al cursor de conexión . Usando este cursor, seleccione la página start.jsp y luego seleccione la Action makeGuess. Para volver al cursor normal, vuelva a la esquina superior izquierda y seleccione el icono .

Su diagrama de flujo se debería parecer a éste:


Figura 7: Aspecto del Diagrama de Flujo Web tras crear la Action

Añadir Páginas JSP

Hasta ahora, hemos conseguido hacer lo siguiente: A un usuario se le mostrará start.jsp e introducirá un número. Luego se pasará la ejecución a la Action makeGuess donde se tomará la decisión sobre la igualdad de los números.

Ahora necesitamos añadir los resultados de la decisión al Flujo Web. Si ha acertado, queremos redirigir al usuario a una página donde se muestre que el juego ha terminado. Si no ha acertado, queremos que el usuario introduzca otro número.

Para hacer esto, necesitamos crear dos página JSP. Por eso, pulse con el botón derecho sobre el fondo del diagrama, seleccione Add/Page..., e introduzca este nombre: /pages/match.jsp. Luego, repita la acción con este otro nombre: /pages/nomatch.jsp

Ahora, necesitamos crear las transiciones desde la Action makeGuess a las dos páginas JSP que hemos creado. En otras palabras, necesitamos crear dos forwards locales para la Action makeGuess. Seleccione el icono Create New Connection de la esquina superior izquierda del diagrama para cambiar el cursor al cursor de conectores: . Utilizando este cursor, seleccione, la Action makeGuess y luego seleccione la página /pages/match.jsp. Luego seleccione de nuevo la Action makeGuess y después la página /pages/nomatch.jsp. Para volver al cursor normal, vuelva a la esquina superior izquierda del diagrama y selecione el icono de Selección .

Si el usuario ha acertado, no necesitamos hacer nada más, pero si no ha acertado, queremos que el usuario pueda volver a intentarlo. Por eso, necesitamos crear una transición desde la página /pages/nomatch.jsp de vuelta hacia la Action makeGuess. Adelante, cree una conexión arrastando y conectando.

En este punto, su diagrama de flujo se debería parecer a éste:


Figura 8: Aspecto del Diagrama de Flujo Web tras crear las páginas JSP

Crear un FormBean

Un FormBean actúa como un puente entre la página JSP y la Action. Un FormBean también pude validar la entrada antes de pasársela a la Action.

Creemos el FormBean. Cambie al modo Tree del editor, pulse con el botón derecho sobre struts-config.xml/form-beans, y seleccione Create Form Bean.... Luego introduzca los siguientes valores:

ítemvalorexplicación
NameMakeGuessFormRecuerde cuando creamos la acción makeGuess le dimos este valor al campo name. Para asociar este formBean a la Action, los nombres deben corresponder.
Typesample.MakeGuessFormTipo de la clase Java para este Form Bean.


Figura 9: Aspecto del Asistente para la Creación de FormBeans

Completar el Diseño del flujo Web

Ahora que hemos terminado la fase de diseño del flujo Web, echemos un vistazo al código fuente de struts-config.xml. Seleccione la pestaña Source en la parte inferior del editor. Este es el fichero de configuración de Struts que hemos creado. Observe que en ningún momento hemos tenido que escribir código XML a mano. El flujo Web se creó con la ayuda de asistentes y arrastando y soltando.


Figura 10: Código Fuente de struts-config.xml

Trabajar con las Clases Java

Hasta ahora hemos creado nuestro flujo sin implementar ninguna funcionalidad. Ahora, necesitamos empezar a implementar las funcionalidades construyendo primero las dos clases Java referenciadas en nuestro diseño de Flujo web. Usaremos Exadel Studio para crear esqueletos de código, rellenaremos el código, y luego compilaremos las clases.

Crear los Esqueletos de las Clases Java

Necesitamos generar esqueletos (stub) de clases Java para la Action y el FormBean. Las clases Java generadas están basadas en plantillas (utilizando el lenguaje Velocity de Apache) que se pueden modificar de acuerdo a las necesidades del proyecto. Las plantillas se pueden encontrar en ${StrutsStudio_Home}/templates/generation/.

Pulse con el botón derecho sobre el diagrama de Flujo Web y seleccione Generate Java Code....


Figura 11: Primer paso para generar el código Java

Pulse sobre el botón Generate. Debería ver la ventana que aparece en la siguiente figura, mostrando los ficheros que se han generado.


Figura 12: Listado de clases Java generadas

Hemos generado dos ficheros fuente de código Java. Uno para la clase Action y otro para la clase FormBean. Ahora rellenemos el código fuente de las clases. Puede ver los ficheros generados en la carpeta guessGame/JavaSource en el árbol del Explorador de Paquetes de la Vista Exadel Studio.

La Clase FormBean(MakeGuessForm.java)

Un FormBean en el marco de trabajo Struts actúa como puente entre una página JSP y una Action. Captura todas las entradas de la página JSP mediante el uso de métodos setXXX(). Para que el FormBean pueda capturar todas las entradas de formularios, los campos de los formularios HTML deben corresponder exactamente con los métodos set (incluyendo mayúsculas y minúsculas).

Nuestro FormBean es muy simple. Sólo tiene un atributo junto con los métodos set y get para ese atributo. El método reset() borra del formulario los valores anteriores. Sólo ponemos los valores a -1. El método validate() chequea la validez de la entrada capturada antes de enviarla a la Action. En este ejemplo, no nos estamos preocupando de eso, por eso devolvemos null indicando que no se necesita validación.

En la siguiente figura puede ver el código Java generado para la clase MakeGuessForm.java.:


Figura 13: Clase Java Autogenerada

Y aquí puede ver como quedará despues de rellenarla con el código necesario para nuestro ejemplo:


Figura 14: Contenido de la Clase MakeGuessForm.java.

La Clase Action (MakeGuessAction.java)

Una Action Struts es una unidad lógica. Es el lugar donde se hace una llamada a una función de negocio (en nuestro ejemplo incluiremos nuestro código de negocio dentro de la Action). Una clase Actión actúa como un puente entre la capa del Controlador y la Capa de Datos en una aplicación de tres capas.

En la siguiente figura puede ver el código fuente generado automáticamente para la clase MakeGuessAction.java:


Figura 15: Código generado para la clase MakeGuessAction.java.

En nuestra clase, una vez que se haya ejecutado el método execute(), se reenvia al siguiente recurso de la aplicación Struts. Ese recurso normalmente es una página JSP. Puede tener cualquier número de forwards locales dentro de una Action. En nuestro ejemplo tenemos dos: match y nomatch. Las transiciones se muestran en el diagrama de flujo Web.

Los forwards locales siempre sobreescriben los nombres de los forwards globales. Por eso para nuestro ejemplo, si tiene un forward global con el nombre shoppingCart y un forward local con el mismo nombre, este último tendrá prioridad. Si no se puede encontrar un forward local, Struts intentará encontrar el mismo nombre entre los forwards globales.

En la siguiente figura puede ver el código completo de nuestra clase MakeGuessAction.java:


Figura 16: Contenido completo de la Clase MakeGuessAction.java.

Compilar las Clases

Eclipse debería haber compilado las clases tan pronto como usted las grabe a menos que haya desactivado la opción de reconstrucción automática. (Para activarla sólo tiene que seleccionar Project/Build Automatically en la barra de menú)

Páginas JSP

Exadel Studio tiene muchas características que acelaran el desarrollo cuando se trabaja con ficheros JSP. Existe una Paleta Exadel y una característica de previsualización.

Exadel Studio tiene en su Paleta Exadel un conjunto de iconos que representan diferentes librerías de etiquetas para su utilización en páginas JSP. Usted puede simplemente arrastar y soltar estos iconos en sus páginas JSP.

Exadel Studio también dispone de una poderosa previsualización JSP en tiempo de diseño. Simplemente seleccione la pestaña Preview en la esquina inferior izquierda del editor de ficheros JSP.

La Página Inicial de la Aplicación

start.jsp es la primera página que se mostrará cuando ejecute la aplicación. Define un sencillo formulario con una entrada de texto para el usuario y un botón para enviar la solicitud. En la siguiente imagen puede ver el código completo de la página start.jsp:


Figura 17: Código JSP de la página start.jsp.

Página de Resultado Fallido

Se utilizará la página nomatch.jsp para mostrar información si no hemos acertado el número:


Figura 18: Código JSP de la página nomatch.jsp.

Cuando haya creado este fichero, seleccione la pestaña Preview para ver el aspecto de la página. En la siguiente figura puede ver una imagen de cómo se debería ser:


Figura 19: Previsualización de la página nomatch.java.

Página de Resultado Exitoso

La última página simplemente imprime que hemos acertado el número y tiene un enlace para jugar otra vez. Como hemos añadido un enlace al inicio de nuestra aplicación, si mira el diagrama de flujo Web, verá que la página match.jsp muestra un enlace al Global Forward.


Figura 20: Código JSP de la página match.java.

Ejecutar la Aplicación

Lo último que queda es ejecutar la aplicación en un navegador Web. Pulse sobre el botón con la flecha verde que hay en la barra de herramientas de Tomcat para arrancar el motor Servlet:


Figura 21: Botón para arrancar Tomcat

La salida de Tomcat se Escribe en la Vista Consola. Si está arrancando Tomcat por primera vez, Exadel Studio comprobará si tiene un JDK adecuado para su entorno Java (Necesitará tener el JDK completo para ejecutar apliaciones Struts). Si Eclipse apunta a un JRE, le pedirá que especifique la localización de su JDK. Una vez que ha arrancado Tomcat, pulse con el botón derecho sobre el Forward startGame en el diagrama de flujo web y seleccione Run, como se ve en la siguiene figura:


Figura 22: Menú para ejecutar la aplicación

Ahora, debería poder visualizar está página web en su navegador:


Figura 23: La aplicación en funcionamiento!!!

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP
ARTÍCULO ANTERIOR