Exercício 1.5: Incluindo Portlets que Procuram Listagens do Site de Leilão e Fornecem Detalhes da Listagem
Antes de começar, você deve concluir o Exercício 1.4: Criando Páginas para Criar e Atualizar Informações do Usuário.
Neste exercício, você criará portlets adicionais que fornecem comportamento cooperativo, utilizando o mecanismo Click-to-Action para enviar dados de um portlet de origem para um portlet de destino. O portlet de origem (ListingSearch) utiliza um bean de sessão para acessar os dados do item Leilão. Depois de localizar listagens específicas com o portlet ListingSearch, o portlet ListingDetail de destino exibe informações detalhadas para os itens localizados por uma procura. Em cada caso, você deve primeiro criar o portlet.
Criar o Portlet ListingSearch
Para criar o portlet ListingSearch, siga estas etapas:
- No Explorador de Projetos, expanda a pasta Projeto Dinâmico da Web e localize a pasta de projeto AuctionPortlet. Clique com o botão direito do mouse na pasta de projeto e selecione New (Novo) > Portlet.
- Na página inicial do assistente de Novo Portlet, altere o Default name prefix (Prefixo do Nome Padrão) para ListingSearch.
- Selecione o botão de rádio Faces portlet.
- Clique em Next (Avançar).
- Selecione AuctionPortlet application na lista drop-down Application name (Nome do Aplicativo).
- Digite Listing Search (Procura de Listagem) no campo Portlet title (Título do Portlet).
- Clique em Finish (Concluir).
ListingSearchView.jsp é aberto na área de janela de edição.
Incluir uma Tabela de Dados na Página do Portlet ListingSearch
Com o arquivo ListingSearchView.jsp aberto no Page Designer, siga estas etapas para incluir dados do bean de sessão como a origem de dados para a página ListingSearch:
- Exclua o texto padrão Place content here.
- Arraste o objeto EJB Session bean (Bean de Sessão EJB) da gaveta Data (Dados)
na paleta para o arquivo.
- Quando o assistente de Bean de Sessão for aberto, clique no botão New EJB Reference (Nova Referência EJB).
- Expanda as pastas AuctionPortletEAR e AuctionEJB50 e selecione ListingFacade para criar a referência de bean corporativo. Clique em Finish (Concluir).
- Clique em Next (Avançar) no assistente de Bean de Sessão.
- Selecione a interface findByTitle(String title) que será utilizada para o campo de entrada na página do portlet e clique em Next (Avançar).
- Observe que o campo de título está selecionado. Clique em Options (Opções).
- Digite Find (Localizar) no campo Label (Etiqueta). Clique em OK.
- Clique em Next (Avançar), que deverá conduzi-lo para a página Formulário de Resultados do assistente. Nessa página, você definirá a tabela de dados que recuperará e exibirá os dados do banco de dados.
- Clique em None (Nenhum) para cancelar a seleção de todas as colunas, para que você possa selecionar, organizar e configurar individualmente as colunas apropriadas para a tabela de dados a ser utilizada na página do portlet. Em seguida, selecione as caixas de opções para as colunas a seguir:
- Utilizando os botões de seta para cima e para baixo, mova as colunas de dados selecionadas na ordem mostrada na etapa acima.
- Selecione e altere o valor da Label (Etiqueta) da coluna itemid para Item ID (ID do Item).
- Clique em Finish (Concluir) para gerar a interface com o usuário padrão para a página
UserAdminView.jsp. A interface com o usuário será semelhante ao seguinte:

- Salve o arquivo.
Incluir Código de Página Java na Página UserAdmin
Nesta parte do exercício, você incluirá código de página Java para executar o seguinte:
Armazenar o parâmetro title no escopo de sessão, para que ele possa ser reutilizado em qualquer atualização futura do conteúdo do portlet.
Inicializar o parâmetro a ser exibido no campo de entrada Title com aquele armazenado no escopo de sessão.
Inicializar os dados do resultado utilizando o parâmetro title armazenado no escopo de sessão.
Você pode incluir a lógica de referência EJB e o código para ligar a chamada e os resultados à interface com o usuário, utilizando as etapas a seguir:
- Selecione Edit Page Code (Editar Código de Página) no menu pop-up no Page Designer.
- Digite o seguinte código em negrito no doListingFacadeLocalFindByTitleAction():
public String doListingFacadeLocalFindByTitleAction() {
String title = getListingFacadeLocalFindByTitleParamBean().getTitle();
getSessionScope().put("title", title);
try {
listingFacadeLocalFindByTitleResultBean =
getListingFacadeLocal().findByTitle(title);
} catch (Exception e) {
logException(e);
}
return null;
}
- Digite o seguinte código em negrito no getListingFacadeLocalFindByTitleParamBean():
public ListingFacadeLocalFindByTitleParamBean
getListingFacadeLocalFindByTitleParamBean() {
if (listingFacadeLocalFindByTitleParamBean == null) {
listingFacadeLocalFindByTitleParamBean =
new ListingFacadeLocalFindByTitleParamBean();
String title = (String)getSessionScope().get("title");
listingFacadeLocalFindByTitleParamBean.setTitle(title);
}
return listingFacadeLocalFindByTitleParamBean;
}
- Digite o seguinte código em negrito no 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;
}
- Salve o ListingSearchView.java.
Criar o Portlet ListingDetail
Para criar o portlet ListingDetail, siga estas etapas:
- No Explorador de Projetos, expanda a pasta Projeto Dinâmico da Web e localize a pasta de projeto AuctionPortlet. Clique com o botão direito do mouse na pasta de projeto e selecione New (Novo) > Portlet.
- Na página inicial do assistente de Novo Portlet, altere o Default name prefix (Prefixo do Nome Padrão) para ListingDetail.
- Selecione o botão de rádio Faces portlet.
- Clique em Next (Avançar).
- Selecione AuctionPortlet application na lista drop-down Application name (Nome do Aplicativo).
- Digite Listing Detail no campo Portlet title (Título do Portlet).
- Clique em Finish (Concluir).
O arquivo ListingDetailView.jsp será aberto na área de janela de edição.
Incluir um Formulário de Dados na Página do Portlet ListingDetail
Com o arquivo ListingDetailView.jsp aberto no Page Designer, siga estas etapas para incluir dados do bean de sessão como a origem de dados para a página ListingDetail:
- Exclua o texto padrão Place content here.
- Arraste o objeto EJB Session bean (Bean de Sessão EJB) da gaveta Data (Dados)
na paleta para o arquivo.
- Quando o assistente de Bean de Sessão for aberto, selecione ejb/ListingFacade e clique em Next (Avançar).
- Selecione a interface findById(Integer itemid), que será utilizada para o campo de entrada na página do portlet.
- Clique em Next (Avançar).
- Observe que o campo itemid está selecionado. Selecione e altere o valor da Label (Etiqueta) do campo itemid para ID do Item:.
- Clique em Options (Opções).
- Digite Find (Localizar) no campo Label (Etiqueta). Clique em OK.
- Clique em Next (Avançar), que deverá conduzi-lo para a página Formulário de Resultados do assistente. Nessa página, você definirá o formulário de dados que recuperará e exibirá os dados do banco de dados.
- Clique em None (Nenhum) para cancelar a seleção de todos os campos, para que você possa selecionar, organizar e configurar individualmente os campos apropriados para a tabela de dados a ser utilizada na página do portlet. Depois, selecione as caixas de opções para os campos a seguir:
- Utilizando os botões de seta para cima e para baixo, mova os campos de dados selecionados na ordem mostrada na etapa acima.
- Clique em Finish (Concluir) para gerar a interface com o usuário para a página
ListingDetailView.jsp. A interface com o usuário será semelhante ao seguinte:

- Salve o arquivo.
Incluir Código de Página Java na Página UserAdmin
Nesta parte do exercício, você incluirá código de página Java para executar o seguinte:
Armazenar o parâmetro itemid no escopo de sessão, para que ele possa ser reutilizado em qualquer atualização futura do conteúdo do portlet.
Inicializar o parâmetro a ser exibido no campo de entrada ID do Item com aquele armazenado no escopo de sessão.
Inicializar os dados do resultado utilizando o parâmetro itemid armazenado no escopo de sessão.
Você pode incluir a lógica de referência EJB e o código para ligar a chamada e os resultados à interface com o usuário, utilizando as etapas a seguir:
- Selecione Edit Page Code (Editar Código de Página) no menu pop-up no Page Designer.
- Digite o seguinte código em negrito no doListingFacadeLocalFindByIdAction():
public String doListingFacadeLocalFindByIdAction() {
Integer itemid = getListingFacadeLocalFindByIdParamBean().getItemid();
getSessionScope().put("itemid", itemid);
try {
listingFacadeLocalFindByIdResultBean =
getListingFacadeLocal().findById(itemid);
} catch (Exception e) {
logException(e);
}
return null;
}
- Digite o seguinte código em negrito no getListingFacadeLocalFindByIdParamBean():
public ListingFacadeLocalFindByIdParamBean
getListingFacadeLocalFindByIdParamBean() {
if (listingFacadeLocalFindByIdParamBean == null) {
listingFacadeLocalFindByIdParamBean =
new ListingFacadeLocalFindByIdParamBean();
Integer itemid = (Integer)getSessionScope().get("itemid");
listingFacadeLocalFindByIdParamBean.setItemid(itemid);
}
return listingFacadeLocalFindByIdParamBean;
}
- Digite o seguinte código em negrito no 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;
}
- Salve ListingDetailView.java.
Incluir Link Corporativo no Portlet ListingSearch
O termo portlets cooperativos refere-se ao recurso de portlets em uma página para interação mútua, compartilhando informações. Um ou mais portlets cooperativos em uma página do portal podem reagir automaticamente a alterações de um portlet de origem acionado por uma ação ou evento no portlet de origem. Os portlets que são destinos do evento podem reagir para que os usuários não precisem fazer alterações ou ações repetitivas em outros portlets na página. O mecanismo utilizado para implementar o comportamento cooperativo é chamado de evento Click-to-Action.
Você ativa um evento Click-to-Action a partir de um ícone no portlet de origem. O ícone apresenta um menu pop-up que contém a lista de destinos para a ação. Depois que o usuário seleciona um destino específico, o intermediário da propriedade entrega os dados para o destino na forma da ação do portlet correspondente. Utilizando o método de entrega Click-to-Action, os usuários podem transferir dados com um simples clique de um portlet de origem para um ou mais portlets de destino, fazendo com que o destino reaja à ação e exiba uma nova visualização com os resultados.
Utilize as etapas a seguir para configurar o comportamento cooperativo entre os portlets ListingSearch e ListingDetail:
- Abra o ListingSearchView.jsp no Page Designer. (No Explorador de Projetos, expanda as pastas AuctionPortlet e WebContent e dê um clique duplo no arquivo.)
- Arraste um objeto Click-to-Action Output Property (Propriedade de Saída Click-to-Action) da gaveta de paleta Portlet e solte-o no campo de saída na tabela de dados rotulada {itemid}.
Nota: Certifique-se de que você soltou o objeto Click-to-Action Output Property (Propriedade de Saída Click-to-Action) no campo de saída e não antes ou depois dele. O campo de saída deve ser destacado em uma caixa retangular e deve ser parecido com isso:
.
(Talvez você precise mover a caixa de diálogo para ver a seleção do campo de saída.)
- No diálogo Insert Click-to-Action Output Property (Inserir Propriedade de Saída Click-to-Action), forneça os valores a seguir:
- Digite itemid no campo Data type (Tipo de Dados).
- Selecione portlet ListingSearch na lista drop-down Source portlet (Portlet de Origem) e clique em OK.
Salve o arquivo.
- Para verificar se o código correto do Click-to-Action foi incluído, abra a visualização da Origem e certifique-se de que o seguinte código está incluído no arquivo:
<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>
Observe o atributo valor destacado. Esse atributo será perdido se a Propriedade de Saída não tiver sido incluída corretamente na página.
Essas etapas identificam o ListingSearch como o portlet de origem. Depois, você deve ativar o ListingDetail como o portlet de destino:
- Expanda AuctionPortlet > Descritor de Implementação do Portlet no Explorador de Projetos. Selecione Cooperative (Cooperativo) > Enable Target (Ativar Destino) no menu pop-up do portlet ListingDetail.
- No diálogo Enable Cooperative Portlet (Ativar Portlet Cooperativo), digite itemid no campo Data type (Tipo deDados).
- Clique no botão Browse (Procurar) próximo ao campo Action (Ação) e selecione /ListingDetailView.jsp > form1 > button1. Clique em OK.
- No diálogo Enable Cooperative Portlet (Ativar o Portlet Corporativo), digite Mostrar Detalhes no campo Label (Etiqueta). Clique em OK.
Para verificar se a origem Click-to-Action está corretamente identificada, retorne para a pasta Descritor de Implementação do Portlet no Explorador de Projetos. Os ícones que significam um portlet de origem (ListingSearch) e um portlet de destino (ListingDetails) deverão ser semelhantes a este:

Testar o Comportamento Cooperativo nos Portlets de Listagem
Para verificar se os portlets ListingSearch e ListingDetail estão trabalhando conforme o planejado,
você deve executá-los no ambiente de teste.
Para executar os portlets, faça o seguinte:
- Selecione o projeto AuctionPortlet no Explorador de Projetos e selecione Run (Executar) > Run on server (Executar no Servidor) em seu menu pop-up.
- Como você já definiu o ambiente de teste do WebSphere Portal v5.1, selecione-o e clique em Finish (Concluir) no assistente de Seleção de Servidor.
- Os portlets serão exibidos no navegador. Aqui, você poderá ver os campos de entrada,
os botões e o layout que um usuário veria em um site de portal.
- No portlet ListingSearch, digite o caractere curinga de procura % para listar todos os itens e clique no botão Find (Localizar). A tabela abaixo do botão Submit (Submeter) exibirá os itens de leilão que correspondem à cadeia de procura.
- Clique no ícone Click-to-Action
na coluna ID do Item para enviar o ID de listagem para o portlet ListingDetail. O portlet ListingDetail exibe informações detalhadas sobre o item que foi localizado pela procura.
Antes de avançarmos para o próximo exercício, pare o servidor de ambiente de teste. Para parar o servidor de ambiente de teste, basta selecioná-lo em visualizar Servidores e clicar no botão na barra de ferramentas Parar servidor
.
Agora você está pronto para começar o Exercício 2.1: Criando um Novo Portal para Exibir o Aplicativo de Portlet.