Ejercicio 1.4: Crear páginas para crear y actualizar información de usuario

Antes de empezar, debe realizar el Ejercicio 1.3: Desarrollar la página UserAdmin.

Basándose en el flujo de aplicación definido en el diagrama Web, debe haber páginas UserAdmin distintas para crear información de usuario (UserAdminCreate.jsp) y para actualizar información de usuario existente (UserAdminUpdate.jsp).

Crear la página UserAdminCreate.jsp

En esta parte del ejercicio, creará acceso a datos utilizando un bean de sesión en la página UserAdminCreate que permita al administrador crear registros de usuario nuevos. Puesto que para crear registros de usuario nuevos se necesita un valor de ID de usuario, esta página también incorpora lógica de validación. Además, añadiremos un botón Cancelar para permitir que un usuario finalice este proceso.

  1. Vuelva al editor de diagramas y efectúe una doble pulsación sobre la página UserAdminCreate.jsp.
  2. Pulse Finalizar en el asistente de creación.

    El archivo vacío se abre en el área de edición.

  3. Suprima el texto predeterminado Place content here..
  4. Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
  5. Cuando se abra el asistente Bean de sesión, seleccione ejb/UserFacade y pulse Siguiente.
  6. Seleccione la interfaz create(RegistrationData data) que se utilizará para el campo de entrada en la página del portlet.
  7. Pulse Siguiente.
  8. En la página Formulario de entrada, definirá el formulario de entrada que creará datos nuevos en la base de datos. Pulse Ninguno para deseleccionar todos los campos para poder seleccionar, organizar y configurar individualmente los campos adecuados del formulario de entrada que se vaya a utilizar en la página del portlet. A continuación, marque los recuadros de selección para los campos siguientes:
  9. Utilizando los botones de flecha arriba y abajo, disponga los campos de datos seleccionados en el orden mostrado en el paso anterior.
  10. Seleccione el valor Etiqueta para el campo data.userid y cámbielo por User ID:.
  11. Pulse el botón Opciones y teclee Create en el campo Etiqueta. Pulse Aceptar.
  12. Pulse Finalizar para generar el formulario de entrada en la página UserAdminCreate.jsp. La interfaz de usuario tendrá un aspecto similar al siguiente:
    UserAdminCreate.jsp con una Tabla de datos
  13. Seleccione el botón Crear en la página.
  14. Abra la vista Propiedades si todavía no está activa y pulse el botón Añadir regla. (Puede ser necesario desplazar a la derecha.)
    Añadir propiedad de regla para un botón de mandato.
  15. En el diálogo Añadir regla de navegación, seleccione UserAdminView.jsp en el recuadro de lista Página.
  16. Marque el botón de selección La salida llamada y teclee view.
  17. Pulse Aceptar.
  18. Pulse la pestaña de vista Quick Edit. Pulse el área de edición de Quick y teclee "view" en la serie return:
    	return "view";

Añadir lógica de validación

Puesto que el valor del ID de usuario es una entrada obligatoria para esta página, debemos añadir la validación para comprobar que se especifica el ID de usuario.

  1. Seleccione el componente de entrada User ID:.
  2. Abra la vista Propiedades.
  3. Seleccione la pestaña Validación.
  4. Marque el recuadro de selección Valor obligatorio.
  5. Guardar UserAdminCreate.jsp.

No tiene que escribir el código necesario para ejecutar esta parte de la aplicación. Se genera toda la lógica de referencia EJB y el código para enlazar la invocación y los resultados con la interfaz de usuario.

Añadir lógica de cancelación

Además, debe añadir un botón de cancelación, conjuntamente con la conexión de navegación adecuada con la página de búsqueda:

  1. Arrastre un Mandato - Botón de la bandeja de la paleta Componentes Faces y suéltelo junto al botón Crear.
  2. Abra la vista Propiedades si todavía no está activa.
  3. Pulse la pestaña Opciones de visualización en el conjunto de propiedades, teclee Cancelar en el campo Etiqueta de botón y pulse Intro.
  4. Pulse la pestaña de vista Quick Edit. Pulse el área de edición de Quick y teclee "view" en la serie return:
    	return "view";
  5. Guarde el archivo. Ahora la página UserAdminCreate.jsp debe tener un aspecto parecido al siguiente:
    UserAdminCreate.jsp

Cree la página UserAdminUpdate.jsp

En esta parte del ejercicio, utilizando un JavaBean creará un acceso a datos para actualizar la información de usuario en la página UserAdminUpdate. Además, añadirá un botón de cancelación para permitir que un usuario finalice este proceso y añada código adicional para obtener registros existentes de forma que puedan actualizarse en esta página.

  1. Vuelva al editor de diagramas y efectúe una doble pulsación sobre la página UserAdminUpdate.jsp.
  2. Pulse Finalizar en el asistente de creación.

    El archivo vacío se abre en el área de edición.

  3. Suprima el texto predeterminado Place content here..
  4. Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
  5. Cuando se abra el asistente Bean de sesión, seleccione ejb/UserFacade y pulse Siguiente.
  6. Seleccione la interfaz update(RegistrationData data) que se utilizará para el campo de entrada en la página del portlet.
  7. Pulse Siguiente.
  8. En la página Formulario de entrada, definirá el formulario de entrada que actualizará datos en la base de datos. Pulse Ninguno para deseleccionar todos los campos para poder seleccionar, organizar y configurar individualmente los campos adecuados para los campos de entrada que se vayan a utilizar en la página del portlet. A continuación, marque los recuadros de selección para los campos siguientes:
  9. Utilizando los botones de flecha arriba y abajo, disponga los campos de datos seleccionados en el orden mostrado en el paso anterior.
  10. Seleccione el valor Etiqueta para el campo data.userid y cámbielo por User ID:.
  11. Seleccione Campo de salida en la lista Tipo de control para data.userid porque desea evitar el cambio del ID al actualizar otra información en el portlet.
  12. Pulse el botón Opciones y teclee Update en el campo Etiqueta. Pulse Aceptar.
  13. Pulse Finalizar para generar el formulario de entrada en la página UserAdminUpdate.jsp. La interfaz de usuario tendrá un aspecto similar al siguiente:
    UserAdminUpdate.jsp con una Tabla de datos
  14. Seleccione el botón Actualizar en la página.
  15. Abra la vista Propiedades si todavía no está activa y pulse el botón Añadir regla. (Puede ser necesario desplazar a la derecha.)
  16. En el diálogo Añadir regla de navegación, seleccione UserAdminView.jsp en el recuadro de lista Página.
  17. Marque el botón de selección La salida llamada y teclee view.
  18. Pulse Aceptar.
  19. Pulse la pestaña de vista Quick Edit. Pulse el área de edición de Quick y teclee "view" en la serie return:
    	return "view";

No tiene que escribir el código necesario para ejecutar esta parte de la aplicación. Se genera toda la lógica de referencia EJB y el código para enlazar la invocación y los resultados con la interfaz de usuario.

Añadir lógica de cancelación

Además, debe añadir un botón de cancelación, conjuntamente con la conexión de navegación adecuada con la página de búsqueda:

  1. Arrastre un Mandato - Botón de la bandeja de la paleta Componentes Faces y suéltelo junto al botón Actualizar.
  2. Abra la vista Propiedades si todavía no está activa.
  3. Pulse la pestaña Opciones de visualización en el conjunto de propiedades, teclee Cancelar en el campo Etiqueta de botón y pulse Intro.
  4. Pulse la pestaña de vista Quick Edit. Pulse el área de edición de Quick y teclee "view" en la serie return:
    	return "view";
  5. Guarde el archivo. Ahora la página UserAdminUpdate.jsp debe tener un aspecto parecido al siguiente:
    UserAdminUpdate.jsp

Añadir código adicional para actualizar registros existentes

La lógica de actualización añadida en esta parte del ejercicio habilita la aplicación para obtener registros existentes de forma que un usuario pueda actualizarlos en esta página. El formulario se cumplimenta con datos relevantes inicializando el bean de parámetro utilizando un método proporcionado por UserFacade, findById().

  1. Seleccione Editar código de página en el menú emergente UserAdminUpdate.jsp. El código de página es el archivo Java que contiene la lógica subyacente para UserAdminUpdate.jsp. Inserte el código siguiente (la parte en negrita):
    public UserFacadeLocalUpdateParamBean getUserFacadeLocalUpdateParamBean() {
      if (userFacadeLocalUpdateParamBean == null) {
         userFacadeLocalUpdateParamBean = new UserFacadeLocalUpdateParamBean();
         Integer userid = (Integer)getSessionScope().get("userid");
         try {
         userFacadeLocalUpdateParamBean.setData(getUserFacadeLocal()
                                                 .findById(userid));
         } catch (Exception e) {
             logException(e);
         }
     }
     return userFacadeLocalUpdateParamBean;
    }
    
  2. Guarde y cierre UserAdminUpdate.java.

Añadir enlaces para la navegación de página

Finalmente, para completar el portlet UserAdmin, debe añadir enlaces para proporcionar navegación desde la página principal (UserAdminView.jsp) a las páginas de detalles (UserAdminCreate.jsp y UserAdminUpdate.jsp). Para añadir los enlaces, siga estos pasos:

  1. Vuelva al archivo Diagrama Web para observar el diagrama Web finalizado:
    Diagrama Web finalizado
    Observe que se han completado cada uno de los nodos de página y que los enlaces de botones de mandato están en su sitio.
  2. Abra UserAdminView.jsp.
  3. Arrastre un componente Enlace desde la bandeja de la paleta Componentes Faces y suéltelo junto a la tabla de datos en el archivo.
  4. Teclee /UserAdminCreate.jsp en el campo URL y Create en el campo Etiqueta. Pulse Aceptar.
  5. Arrastre un componente Mandato - Hiperenlace de la bandeja de la paleta Componentes Faces y suéltelo en el campo de salida con la etiqueta {userid} en la tabla de datos.
  6. Abra la vista Propiedades si todavía no está activa y pulse el botón Añadir regla. (Puede ser necesario desplazar a la derecha.)
  7. En el diálogo Añadir regla de navegación, seleccione UserAdminUpdate.jsp en el recuadro de lista Página.
  8. Marque el botón de selección La salida llamada y teclee update.
  9. Pulse Aceptar.
  10. Seleccione la pestaña Parámetro en la vista Propiedades.
  11. Pulse el botón Añadir parámetro.
  12. Teclee userid en el campo Nombre.
  13. Pulse la casilla del campo Valor y después pulse el icono examinar para abrir el diálogo Seleccionar objeto de datos de página. Expanda userFacadeLocal > findByName(java.lang.String) > userFacadeLocalFindByNameResultBean y seleccione userid (java.lang.Integer) en el diálogo Seleccionar objeto de datos de página.

    Diálogo Seleccionar objeto de datos de página
  14. Pulse Aceptar.

A continuación, debe añadir código para almacenar el parámetro en el ámbito de sesión de forma que la página de actualización pueda utilizar el ID de usuario para proporcionar la información de usuario en el formulario de entrada de la página de actualización.

  1. Pulse la pestaña de vista Quick Edit. Pulse en el área de edición de Quick Edit, con lo que se creará una plantilla vacía para el código de acción asociado con el botón Update y teclee el código siguiente:
    String userid = (String)getRequestParam().get("userid");
    getSessionScope().put("userid", new Integer(userid));
    return "update";
    
  2. Guarde y cierre el archivo.

Ejecute el portlet UserAdmin

Para verificar que las páginas del portlet UserAdmin funcionan como se pretende hasta este punto, debe ejecutar el archivo JSP en el navegador interno proporcionado con las herramientas de Rational. Para ejecutar el portlet UserAdmin, haga lo siguiente:

  1. Seleccione el proyecto AuctionPortlet en el Explorador de proyectos y seleccione Ejecutar > Ejecutar en servidor desde el menú emergente.
  2. Puesto que ya ha definido el entorno de prueba de WebSphere Portal v5.1, selecciónelo y pulse Finalizar en el asistente Selección de servidor.
  3. El archivo se visualizará en el navegador. Aquí puede ver los campos de entrada, los enlaces y el diseño que un usuario verá en un sitio de portal.
  4. Teclee % en el campo de nombre y pulse el botón Buscar para buscar usuarios existentes en la base de datos.

    Ejecute los portlets recién creados

Observe que al pulsar el enlace Crear o al seleccionar un usuario en la tabla de la base de datos se abren las páginas UserAdminCreate o UserAdminUpdate respectivamente. Si proporciona valores en cualquiera de estas páginas y pulsa el botón Crear o Actualizar, se aceptarán las adiciones y actualizaciones. Los datos actualizados deben reflejarse inmediatamente en la página UserAdminView. Si el nombre de búsqueda coincide con un nombre de usuario creado (por ejemplo, puede utilizar un carácter comodín % para recuperar todos los usuarios), el usuario nuevo debería visualizarse al volver de la página de creación.

Antes de pasar al ejercicio siguiente, detenga el servidor del entorno de prueba. Para detener el servidor del entorno de prueba, simplemente selecciónelo en la vista Servidores y pulse el botón de la barra de herramientas Detener el servidor Detener el servidor.

Ahora está listo para iniciar el Ejercicio 1.5: Añadir portlets que busquen en listados del sitio de subastas y proporcionen detalles del listado.

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