Ejercicio 1.5: Añadir portlets que busquen en listados del sitio de subastas y proporcionen detalles del listado

Antes de empezar, debe realizar el Ejercicio 1.4: Crear páginas para crear y actualizar información de usuario.

En este ejercicio, creará portlets adicionales que proporcionen comportamiento cooperativo, utilizando el mecanismo Pulsar para accionar para enviar datos de un portlet origen a un portlet destino. El portlet origen (ListingSearch) utiliza un bean de sesión para acceder a los datos del elemento Auction. Después de buscar listados específicos con el portlet ListingSearch, el portlet ListingDetail visualiza información detallada para los elementos encontrados mediante una búsqueda. En cada caso, primero debe crear el portlet.

Crear el portlet ListingSearch

Para crear el portlet ListingSearch, siga estos pasos:

  1. En el Explorador de proyectos, expanda la carpeta Proyecto Web dinámico y busque la carpeta del proyecto AuctionPortlet. Pulse la carpeta del proyecto con el botón derecho y seleccione Nuevo > Portlet.
  2. En la página inicial del asistente Portlet nuevo, cambie Prefijo de nombre predeterminado por ListingSearch.
  3. Marque el botón de selección Portlet Faces.
  4. Pulse Siguiente.
  5. Seleccione AuctionPortlet application en la lista desplegable Nombre de aplicación.
  6. Teclee Listing Search en el campo Título de portlet.
  7. Pulse Finalizar.

ListingSearchView.jsp se abre en el panel de edición.

Añada una tabla de datos a la página del portlet ListingSearch

Con el archivo ListingSearchView.jsp abierto en Page Designer, siga estos pasos para añadir datos de bean de sesión como el origen de datos para la página ListingSearch:

  1. Suprima el texto predeterminado Place content here..
  2. Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
  3. Cuando se abra el asistente Bean de sesión, pulse el botón Referencia de EJB nueva.
  4. Expanda las carpetas AuctionPortletEAR y AuctionEJB50 y seleccione ListingFacade para crear la referencia del bean de empresa. Pulse Finalizar.
  5. Pulse Siguiente en el asistente Bean de sesión.
  6. Seleccione la interfaz findByTitle(String title) que se utilizará para el campo de entrada en la página de portlet y pulse Siguiente.
  7. Fíjese en que el campo de título está seleccionado. Pulse Opciones.
  8. Teclee Find en el campo Etiqueta. Pulse Aceptar.
  9. Pulse Siguiente, lo que le llevará a la página Formulario de resultados del asistente. En esta página definirá la tabla de datos que recuperará y visualizará los datos de la base de datos.
  10. Pulse Ninguno para deseleccionar todas las columnas para poder seleccionar, organizar y configurar individualmente las columnas adecuadas para la tabla de datos que desee utilizar en la página del portlet. A continuación, marque los recuadros de selección para las columnas siguientes:
  11. Utilizando los botones de flecha arriba y abajo, disponga las columnas de datos seleccionadas en el orden mostrado en el paso anterior.
  12. Seleccione el valor Etiqueta para la columna itemid y cámbielo por Item ID.
  13. Pulse Finalizar para generar la interfaz de usuario por omisión para la página UserAdminView.jsp. La interfaz de usuario tendrá un aspecto similar al siguiente:
    ListingSearchView.jsp
  14. Guarde el archivo.

Añadir código de página Java a la página UserAdmin

En esta parte del ejercicio, añadirá código de página Java para conseguir lo siguiente:

  • Almacenar el parámetro title en el ámbito de sesión para que pueda reutilizarse para renovaciones futuras del contenido del portlet.
  • Inicializar el parámetro a visualizar en el campo de entrada Title con el almacenado en el ámbito de sesión,
  • Inicializar los datos de resultado utilizando el parámetro title almacenado en el ámbito de sesión.
  • Puede añadir la lógica de referencia EJB y el código para enlazar la invocación y los resultados con la interfaz de usuario utilizando los pasos siguientes:

    1. Seleccione Editar código de página en el menú emergente de Page Designer.
    2. Teclee el código en negrita siguiente en doListingFacadeLocalFindByTitleAction():
      public String doListingFacadeLocalFindByTitleAction() {
          String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
          getSessionScope().put("title", title);
          try {
              listingFacadeLocalFindByTitleResultBean = 
              	getListingFacadeLocal().findByTitle(title);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Teclee el código en negrita siguiente en getListingFacadeLocalFindByTitleParamBean():
      public ListingFacadeLocalFindByTitleParamBean 
      	getListingFacadeLocalFindByTitleParamBean() {
          if (listingFacadeLocalFindByTitleParamBean == null) {
              listingFacadeLocalFindByTitleParamBean = 
              	new ListingFacadeLocalFindByTitleParamBean();
              String title = (String)getSessionScope().get("title");
              listingFacadeLocalFindByTitleParamBean.setTitle(title);
          }
          return listingFacadeLocalFindByTitleParamBean;
      }
      
    4. Teclee el código en negrita siguiente en getListingFacadeLocalFindByTitleResultBean():
      public ItemData[] getListingFacadeLocalFindByTitleResultBean() {
          if (listingFacadeLocalFindByTitleResultBean == null) {
              String title = (String)getSessionScope().get("title");
              if (title != null) {
                  try {
                      listingFacadeLocalFindByTitleResultBean = 		
                           getListingFacadeLocal().findByTitle(title);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByTitleResultBean;
      }
      
    5. Guardar ListingSearchView.java.

    Crear el portlet ListingDetail

    Para crear el portlet ListingDetail, siga estos pasos:

    1. En el Explorador de proyectos, expanda la carpeta Proyecto Web dinámico y busque la carpeta del proyecto AuctionPortlet. Pulse la carpeta del proyecto con el botón derecho y seleccione Nuevo > Portlet.
    2. En la página inicial del asistente Portlet nuevo, cambie Prefijo de nombre predeterminado por ListingDetail.
    3. Marque el botón de selección Portlet Faces.
    4. Pulse Siguiente.
    5. Seleccione AuctionPortlet application en la lista desplegable Nombre de aplicación.
    6. Teclee Listing Detail en el campo Título de portlet.
    7. Pulse Finalizar.

    El archivo ListingDetailView.jsp se abrirá en el panel de edición.

    Añada un formulario de datos a la página del portlet ListingDetail

    Con el archivo ListingDetailView.jsp abierto en Page Designer, siga estos pasos para añadir datos de bean de sesión como el origen de datos para la página ListingDetail:

    1. Suprima el texto predeterminado Place content here..
    2. Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
    3. Cuando se abra el asistente Bean de sesión, seleccione ejb/ListingFacade y pulse Siguiente.
    4. Seleccione la interfaz findById(Integer itemid) que se utilizará para el campo de entrada en la página del portlet.
    5. Pulse Siguiente.
    6. Fíjese en que el campo de itemid está seleccionado. Seleccione el valor Etiqueta del campo itemid y cámbielo por Item ID:.
    7. Pulse Opciones.
    8. Teclee Find en el campo Etiqueta. Pulse Aceptar.
    9. Pulse Siguiente, lo que le llevará a la página Formulario de resultados del asistente. En esta página definirá el formulario de datos que recuperará y visualizará los datos de la base de datos.
    10. Pulse Ninguno para deseleccionar todos los campos para poder seleccionar, organizar y configurar individualmente las columnas adecuadas para la tabla de datos que desee utilizar en la página del portlet. A continuación, marque los recuadros de selección para los campos siguientes:
    11. Utilizando los botones de flecha arriba y abajo, disponga los campos de datos seleccionados en el orden mostrado en el paso anterior.
    12. Pulse Finalizar para generar la interfaz de usuario para la página ListingDetailView.jsp. La interfaz de usuario tendrá un aspecto similar al siguiente:
      ListingDetailView.jsp
    13. Guarde el archivo.

    Añadir código de página Java a la página UserAdmin

    En esta parte del ejercicio, añadirá código de página Java para conseguir lo siguiente:

  • Almacenar el parámetro itemid en el ámbito de sesión para que pueda reutilizarse para renovaciones futuras del contenido del portlet.
  • Inicializar el parámetro a visualizar en el campo de entrada Item ID con el almacenado en el ámbito de sesión,
  • Inicializar los datos de resultado utilizando el parámetro itemid almacenado en el ámbito de sesión.
  • Puede añadir la lógica de referencia EJB y el código para enlazar la invocación y los resultados con la interfaz de usuario utilizando los pasos siguientes:

    1. Seleccione Editar código de página en el menú emergente de Page Designer.
    2. Teclee el código en negrita siguiente en doListingFacadeLocalFindByIdAction():
      public String doListingFacadeLocalFindByIdAction() {
          Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
          getSessionScope().put("itemid", itemid);
          try {
              listingFacadeLocalFindByIdResultBean = 
              	getListingFacadeLocal().findById(itemid);
          } catch (Exception e) {
              logException(e);
          }
          return null;
      }
      
    3. Teclee el código en negrita siguiente en getListingFacadeLocalFindByIdParamBean():
      public ListingFacadeLocalFindByIdParamBean 
      	getListingFacadeLocalFindByIdParamBean() {
          if (listingFacadeLocalFindByIdParamBean == null) {
              listingFacadeLocalFindByIdParamBean = 
              	new ListingFacadeLocalFindByIdParamBean();
              Integer itemid = (Integer)getSessionScope().get("itemid");
              listingFacadeLocalFindByIdParamBean.setItemid(itemid);
          }
          return listingFacadeLocalFindByIdParamBean;
      }
      
    4. Teclee el código en negrita siguiente en getListingFacadeLocalFindByIdResultBean():
      public ItemData getListingFacadeLocalFindByIdResultBean() {
          if (listingFacadeLocalFindByIdResultBean == null) {
              Integer itemid = (Integer)getSessionScope().get("itemid");
              if (itemid != null) {
                  try {
                      listingFacadeLocalFindByIdResultBean = 
                           getListingFacadeLocal().findById(itemid);
                  } catch (Exception e) {
                      logException(e);
                  }
              }
          }
          return listingFacadeLocalFindByIdResultBean;
      }
      
    5. Guardar ListingDetailView.java.

    Añadir enlaces cooperativos al portlet ListingSearch

    El término portlets cooperative (cooperativos) hace referencia a la posibilidad de los portlets de una página de interactuar entre sí compartiendo información. Uno o varios portlets cooperativos de una página de portal pueden reaccionar automáticamente a cambios de un portlet origen desencadenado por una acción o evento en el portlet origen. Los portlets que son destinos del evento pueden reaccionar para que los usuarios no tengan que realizar cambios o acciones repetitivas en otros portlets de la página. El mecanismo utilizado para implementar el comportamiento cooperativo se llama Evento Pulsar-para-accionar.

    Puede lanzar un evento Pulsar-para-accionar desde un icono del portlet origen. El icono presenta un menú emergente que contiene la lista de destinos para la acción. Una vez que el usuario selecciona un destino específico, el intermediario de la propiedad entrega los datos al destino en la forma de la acción de portlet correspondiente. Utilizando el método de entrega Pulsar-para-accionar, los usuarios pueden transferir datos con una simple pulsación desde un portlet origen a uno o varios portlets destino, lo que hace reaccionar al destino y origina la visualización de los resultados.

    Utilice los pasos siguientes para configurar un comportamiento cooperativo entre los portlets ListingSearch y ListingDetail:

    1. Abra ListingSearchView.jsp en Page Designer. (En el Explorador de proyectos, expanda las carpetas AuctionPortlet y WebContent y efectúe una doble pulsación sobre el archivo.)
    2. Arrastre un objeto Propiedad de salida de Pulsar-para-accionar de la bandeja de la paleta Portlet y suéltelo en el campo de salida en la tabla de datos etiquetada {itemid}.

      Nota: asegúrese de soltar el objeto Propiedad de salida Pulsar para accionar en el campo de salida, no antes, ni después de él. El campo de salida debe estar resaltado dentro de un recuadro rectangular y tener un aspecto parecido al siguiente:
      Soltar una propiedad de salida en un campo de salida.
      (Tendrá que apartar el recuadro de diálogo para ver la selección del campo de salida.)

    3. En el diálogo Insertar propiedad de salida Pulsar-para-accionar, proporcione los valores siguientes: Guarde el archivo.
    4. Para verificar que se haya añadido el código Pulsar para accionar, abra la vista Fuente y asegúrese de que el código siguiente esté incluido en el archivo:
      <h:outputText id="text3"
      	value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}"
      	styleClass="outputText">
      	<f:convertNumber />
      </h:outputText>
      	<c2a:encodeProperty type="itemid" 
      		namespace="http://auctionportlet" name="itemid"
      		value="#{varlistingFacadeLocalFindByTitleResultBean.itemid}">
      	</c2a:encodeProperty>
      
      Fíjese en el atributo value resaltado. Este atributo no estará presente si no se ha añadido correctamente la propiedad de salida a la página.

    Estos pasos identifican ListingSearch como el portlet portlet origen. A continuación, tiene que habilitar ListingDetail como el portlet destino:

    1. Expanda AuctionPortlet > Descriptor de despliegue de portlet en el Explorador de proyectos. Seleccione Cooperativo > Habilitar destino en el menú emergente del portlet.
    2. En el diálogo Habilitar portlet cooperativo, teclee itemid en el campo Tipo de datos.
    3. Pulse el botón Examinar junto al campo Acción y seleccione /ListingDetailView.jsp > form1 > button1. Pulse Aceptar.
    4. En el diálogo Habilitar portlet cooperativo, teclee Show Detail en el campo Etiqueta. Pulse Aceptar.

    Para verificar que el origen de Pulsar-para-accionar está correctamente identificado, vuelva a la carpeta Descriptor de despliegue de portlet en el Explorador de proyectos. Los iconos que caracterizan un portlet origen (ListingSearch) y un portlet destino (ListingDetails) deben tener el aspecto siguiente:
    Portlets Pulsar-para-accionar

    Probar el comportamiento cooperativo en los portlets de listado

    Para verificar que los portlets ListingSearch y ListingDetail funcionan adecuadamente, puede probarlos en el entorno de prueba.

    Para ejecutar los portlets, 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 servidor WebSphere Portal v5.1 Test Environment, selecciónelo y pulse Finalizar en el asistente Selección de servidor.
    3. Los portlets se visualizarán en el navegador. Aquí puede ver los campos de entrada, los botones y el diseño que un usuario verá en un sitio de portal.
    4. En el portlet ListingSearch, teclee el carácter de búsqueda comodín % para listar todos los elementos y pulse el botón Buscar. La tabla situada debajo del botón Someter visualizará los elementos de la subasta que coincidan con la serie de búsqueda.
    5. Pulse el icono Pulsar-para-accionar Icono Pulsar-para-accionar en la columna ID de elemento para enviar el ID del listado al portlet ListingDetail. El portlet ListingDetail y visualizar información detallada acerca del elemento encontrado mediante la búsqueda.

    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 2.1: crear un portal nuevo para visualizar la aplicación de portlet.

    Condiciones de uso | Comentarios
    (C) Copyright IBM Corporation 2000, 2005. Reservados todos los derechos.