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:
- 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.
- En la página inicial del asistente Portlet nuevo, cambie Prefijo de nombre
predeterminado por ListingSearch.
- Marque el botón de selección Portlet Faces.
- Pulse Siguiente.
- Seleccione AuctionPortlet application en la lista desplegable Nombre de
aplicación.
- Teclee Listing Search en el campo Título de portlet.
- 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:
- Suprima el texto predeterminado Place content here..
- Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
- Cuando se abra el asistente Bean de sesión, pulse el botón Referencia de EJB nueva.
- Expanda las carpetas AuctionPortletEAR y AuctionEJB50 y seleccione ListingFacade
para crear la referencia del bean de empresa. Pulse Finalizar.
- Pulse Siguiente en el asistente Bean de sesión.
- Seleccione la interfaz findByTitle(String title) que se utilizará para el campo de
entrada en la página de portlet y pulse Siguiente.
- Fíjese en que el campo de título está seleccionado. Pulse Opciones.
- Teclee Find en el campo Etiqueta. Pulse Aceptar.
- 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.
- 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:
- Utilizando los botones de flecha arriba y abajo, disponga las columnas de datos seleccionadas
en el orden mostrado en el paso anterior.
- Seleccione el valor Etiqueta para la columna itemid y cámbielo por Item ID.
- 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:

- 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:
- Seleccione Editar código de página en el menú emergente de Page Designer.
- 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;
}
- 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;
}
- 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;
}
- Guardar ListingSearchView.java.
Crear el portlet ListingDetail
Para crear el portlet ListingDetail, siga estos pasos:
- 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.
- En la página inicial del asistente Portlet nuevo, cambie Prefijo de nombre
predeterminado por ListingDetail.
- Marque el botón de selección Portlet Faces.
- Pulse Siguiente.
- Seleccione AuctionPortlet application en la lista desplegable Nombre de
aplicación.
- Teclee Listing Detail en el campo Título de portlet.
- 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:
- Suprima el texto predeterminado Place content here..
- Arrastre el objeto Bean de sesión EJB de la bandeja Datos de la paleta al archivo.
- Cuando se abra el asistente Bean de sesión, seleccione ejb/ListingFacade y pulse
Siguiente.
- Seleccione la interfaz findById(Integer itemid) que se utilizará para el campo de
entrada en la página del portlet.
- Pulse Siguiente.
- Fíjese en que el campo de itemid está seleccionado. Seleccione el valor Etiqueta del
campo itemid y cámbielo por Item ID:.
- Pulse Opciones.
- Teclee Find en el campo Etiqueta. Pulse Aceptar.
- 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.
- 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:
- Utilizando los botones de flecha arriba y abajo, disponga los campos de datos seleccionados en
el orden mostrado en el paso anterior.
- Pulse Finalizar para generar la interfaz de usuario para la página
ListingDetailView.jsp.
La interfaz de usuario tendrá un aspecto similar al siguiente:

- 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:
- Seleccione Editar código de página en el menú emergente de Page Designer.
- 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;
}
- 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;
}
- 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;
}
- 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:
- 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.)
- 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:
.
(Tendrá que apartar el recuadro de diálogo para ver la selección del campo de salida.)
- En el diálogo Insertar propiedad de salida Pulsar-para-accionar, proporcione los valores
siguientes:
- Teclee itemid en el campo Tipo de datos.
- Seleccione el portlet ListingSearch en la lista Portlet origen y pulse
Aceptar.
Guarde el archivo.
- 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:
- Expanda AuctionPortlet > Descriptor de despliegue de portlet en el Explorador de
proyectos. Seleccione Cooperativo > Habilitar destino en el menú emergente del portlet.
- En el diálogo Habilitar portlet cooperativo, teclee itemid en el campo
Tipo de datos.
- Pulse el botón Examinar junto al campo Acción y seleccione
/ListingDetailView.jsp > form1 > button1. Pulse Aceptar.
- 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:

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:
- Seleccione el proyecto AuctionPortlet en el Explorador de proyectos y seleccione
Ejecutar > Ejecutar en servidor desde el menú emergente.
- 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.
- 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.
- Pulse el 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
.
Ahora está listo para iniciar el Ejercicio 2.1: crear
un portal nuevo para visualizar la aplicación de portlet.