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:

  1. 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 Novo > Portlet.
  2. Na página inicial do assistente de Novo Portlet, altere o Prefixo do Nome Padrão para ListingSearch.
  3. Selecione o botão de opções Portlet do Faces.
  4. Clique em Avançar.
  5. Selecione AuctionPortlet application na lista drop-down Nome do Aplicativo.
  6. Digite Procura de Listagem no campo Título do Portlet.
  7. Clique em 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:

  1. Exclua o texto padrão Place content here.
  2. Arraste o objeto Bean de Sessão EJB da gaveta Dados na paleta para o arquivo.
  3. Quando o assistente de Bean de Sessão for aberto, clique no botão Nova Referência EJB.
  4. Expanda as pastas AuctionPortletEAR e AuctionEJB50 e selecione ListingFacade para criar a referência de bean corporativo. Clique em Concluir.
  5. Clique em Avançar no assistente de Bean de Sessão.
  6. Selecione a interface findByTitle(String title) que será utilizada para o campo de entrada na página do portlet e clique em Avançar.
  7. Observe que o campo de título está selecionado. Clique em Opções.
  8. Digite Localizar no campo Etiqueta. Clique em OK.
  9. Clique em 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.
  10. Clique em 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:
  11. Utilizando os botões de seta para cima e para baixo, mova as colunas de dados selecionadas na ordem mostrada na etapa acima.
  12. Selecione e altere o valor da Etiqueta da coluna itemid para ID do Item.
  13. Clique em 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:
    ListingSearchView.jsp
  14. 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:

    1. Selecione Editar Código de Página no menu pop-up no Page Designer.
    2. 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;
      }
      
    3. 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;
      }
      
    4. 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;
      }
      
    5. Salve o ListingSearchView.java.

    Criar o Portlet ListingDetail

    Para criar o portlet ListingDetail, siga estas etapas:

    1. 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 Novo > Portlet.
    2. Na página inicial do assistente de Novo Portlet, altere o Prefixo do Nome Padrão para ListingDetail.
    3. Selecione o botão de opções Portlet do Faces.
    4. Clique em Avançar.
    5. Selecione AuctionPortlet application na lista drop-down Nome do Aplicativo.
    6. Digite Listing Detail no campo Título do Portlet.
    7. Clique em 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:

    1. Exclua o texto padrão Place content here.
    2. Arraste o objeto Bean de Sessão EJB da gaveta Dados na paleta para o arquivo.
    3. Quando o assistente de Bean de Sessão for aberto, selecione ejb/ListingFacade e clique em Avançar.
    4. Selecione a interface findById(Integer itemid), que será utilizada para o campo de entrada na página do portlet.
    5. Clique em Avançar.
    6. Observe que o campo itemid está selecionado. Selecione e altere o valor da Etiqueta do campo itemid para ID do Item:.
    7. Clique em Opções.
    8. Digite Localizar no campo Etiqueta. Clique em OK.
    9. Clique em 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.
    10. Clique em 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:
    11. Utilizando os botões de seta para cima e para baixo, mova os campos de dados selecionados na ordem mostrada na etapa acima.
    12. Clique em 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:
      ListingDetailView.jsp
    13. 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:

    1. Selecione Editar Código de Página no menu pop-up no Page Designer.
    2. 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;
      }
      
    3. 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;
      }
      
    4. 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;
      }
      
    5. 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:

    1. Abra o ListingSearchView.jsp no Page Designer. (No Explorador de Projetos, expanda as pastas AuctionPortlet e WebContent e dê um clique duplo no arquivo.)
    2. Arraste um objeto 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 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:
      Soltando uma Propriedade de Saída em um campo de saída.
      (Talvez você precise mover a caixa de diálogo para ver a seleção do campo de saída.)

    3. No diálogo Inserir Propriedade de Saída Click-to-Action, forneça os valores a seguir: Salve o arquivo.
    4. 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:

    1. Expanda AuctionPortlet > Descritor de Implementação do Portlet no Explorador de Projetos. Selecione Cooperativo > Ativar Destino no menu pop-up do portlet ListingDetail.
    2. No diálogo Ativar Portlet Cooperativo, digite itemid no campo Tipo de Dados.
    3. Clique no botão Procurar próximo ao campo Ação e selecione /ListingDetailView.jsp > form1 > button1. Clique em OK.
    4. No diálogo Ativar o Portlet Corporativo, digite Mostrar Detalhes no campo 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:
    Portlets Click-to-Action

    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:

    1. Selecione o projeto AuctionPortlet no Explorador de Projetos e selecione Executar > Executar no Servidor em seu menu pop-up.
    2. 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.
    3. No portlet ListingSearch, digite o caractere curinga de procura % para listar todos os itens e clique no botão Localizar. A tabela abaixo do botão Submeter exibirá os itens de leilão que correspondem à cadeia de procura.
    4. Clique no ícone Click-to-Actioní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 servidorParar servidor.

    Agora você está pronto para começar o Exercício 2.1: Criando um Novo Portal para Exibir o Aplicativo de Portlet.

    Termos de Utilização | Feedback
    (C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.