Ejercicio 1.2: Preparar el desarrollo del portlet y definir el flujo de la aplicación

Antes de empezar, debe realizar el Ejercicio 1.1: Puesta a punto.

En el ejercicio anterior, se ha creado el proyecto AuctionPortlet para albergar los portlets que se desarrollarán en esta guía de aprendizaje. Para preparar la creación de la interfaz de usuario y añadir datos a portlets Faces específicos, definiremos el flujo de la aplicación utilizando el editor de diagramas Web. Un diagrama Web solo es un método para definir el flujo de la aplicación, pero resulta especialmente adecuado para el desarrollo visual de aplicaciones de portlet basadas en Faces.

Crear un diagrama Web para construir el flujo de aplicaciones

Un diagrama Web es un archivo que le ayuda a visualizar y cambiar el flujo de una aplicación Web como por ejemplo una aplicación de portlet Faces o basada en Struts. El editor de diagramas Web es un editor visual para editar diagramas Web. La acción de añadir de nodos, conexiones y otros componentes a un diagrama Web, se conoce genéricamente como dibujar en el diagrama.

Un diagrama Web consta de nodos y conexiones entre nodos. Un nodo es un icono que representa un recurso como por ejemplo una página JSP de portlet o un bean JavaTM. Si el recurso existe, el nodo se llama realizado; si el recurso no existe, el nodo se llama no realizado. Los nodos realizados se muestran en color con los nombres en negrita. Los nodos no realizados se muestran como en gris.

Añadiremos tres nodos JSP al diagrama Web. Uno se considerará nodo maestro, lo que permitirá la navegación a dos nodos de detalles enlazados.

  1. Cuando creó el proyecto de portlet Auction, el asistente creó automáticamente un archivo de diagrama Web por omisión llamado diagram.gph. En el Explorador de proyectos, expanda las carpetas Proyectos Web dinámicos y AuctionPortlet y efectúe una doble pulsación sobre el Diagrama Web

    El archivo se abrirá en el panel de edición con instrucciones acerca de cómo utilizar el editor de diagramas Web.
    Diagrama Web nuevo

  2. La vista activa en el lado derecho del área de trabajo es una paleta que contiene varias bandejas que a su vez contienen objetos que puede soltar en el diagrama Web. Añadirá objetos de Página Web de la paleta en el archivo UserAdmin.gph. La paleta proporciona un comportamiento "adhesivo" de arrastrar y soltar, lo que significa que una vez pulsado el objeto en la paleta no es necesario mantener pulsado el botón del ratón durante la operación de arrastre. Simplemente mueva el cursor al diagrama Web y vuelva a pulsar para soltar el objeto.

    Para crear el primer nodo, puede arrastrar UserAdminView.jsp, la página de vista JSP inicial creada con el proyecto AuctionPortlet, desde el Explorador de proyectos al editor. Puesto que este archivo ya se ha creado, se visualiza como un objeto realizado.

  3. Arrastre y suelte un objeto Página Web al editor. Cambie el nombre de la página Web por UserAdminCreate.jsp.
  4. Repita el paso anterior para crear una Página Web llamada UserAdminUpdate.jsp.

    Nota: puede arrastrar los nodos para volver a situarlos.

  5. A continuación creará conexiones entre los nodos de página Web para especificar el flujo de datos en los portlets:
    1. Seleccione Conexión en el menú emergente de UserAdminView.jsp. En UserAdminView.jsp, arrastre la conexión al nodo UserAdminCreate.jsp.
    2. Seleccione Enlace de página Web en el diálogo Elegir una conexión y pulse Aceptar.
    3. Seleccione Conexión en el menú emergente del nodo UserAdminCreate.jsp y arrastre la conexión al nodo UserAdminView.jsp.
    4. Seleccione Salida de Faces en el diálogo Elegir una conexión y pulse Aceptar.
    5. Teclee view sobre el <new> resaltado para denominar la conexión nueva.
    6. Seleccione Conexión en el menú emergente de UserAdminView.jsp. En UserAdminView.jsp, arrastre la conexión al nodo UserAdminUpdate.jsp.
    7. Seleccione Salida de Faces en el diálogo Elegir una conexión y pulse Aceptar.
    8. Teclee update sobre el <new> resaltado para denominar la conexión nueva.
    9. Seleccione Conexión en el menú emergente del nodo UserAdminUpdate.jsp y arrastre la conexión al nodo UserAdminView.jsp.
    10. Seleccione Salida de Faces en el diálogo Elegir una conexión y pulse Aceptar.
    11. Teclee view sobre el <new> resaltado para denominar la conexión nueva.
    12. Guarde el diagrama Web.
    El diagrama debería tener el aspecto siguiente:
    Esqueleto de diagrama Web

Los enlaces que se han definido preferirán las páginas de portlet con los enlaces adecuados, de forma que los datos iniciados por el usuario fluirán adecuadamente a través de la aplicación. Cuando la página UserAdminView solicite una creación de usuario o una acción de actualización, se abrirá el formulario adecuado. Después de someter la información necesaria a través de estos formularios, la nueva información de usuario estará disponible para la función de consulta del portlet UserAdmin.

Ahora está listo para iniciar el Ejercicio 1.3: Desarrollar la página UserAdmin.

Comentarios
(C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.