Exercício 1.2: Preparando para o Desenvolvimento do Portlet e Definindo o Fluxo do Aplicativo

Antes de iniciar, você deve concluir o Exercício 1.1: Configuração.

No exercício anterior, criamos o projeto AuctionPortlet para conter os portlets que serão desenvolvidos neste tutorial. Para preparar para a criação da interface com o usuário e incluir dados em portlets específicos do Faces, definiremos o fluxo do aplicativo utilizando o editor de Diagrama da Web. Um diagrama da Web é apenas um método para definir o fluxo do aplicativo, mas é especialmente apropriado para o desenvolvimento visual de aplicativos de portlet baseados no Faces.

Criando um diagrama Web para construir o fluxo do aplicativo

Um diagrama Web é um arquivo que ajuda a visualizar e alterar o fluxo de um aplicativo Web, tais como um aplicativo portlet com base no Faces ou no Struts. O editor do diagrama Web é um editor visual para edição de diagramas Web. Quando você inclui nós, conexões e outros componentes em um diagrama da Web, isso é referido genericamente como desenhar o diagrama.

Um diagrama Web é consistido de nós e conexões entre nós. Um nó é um ícone que representa um recurso, como uma página JSP do portlet ou um JavaTM bean. Se o recurso existe, o nó é chamado de realizado; se o recurso não existe, o nó é chamado de não realizado. Nós realizados não mostrados coloridos com seus nomes em negrito. Nós não realizados são mostrados como ícones cinzas.

Nós incluiremos três nós JSP no diagrama da Web. Um será considerado um nó master, que permitirá a navegação a dois nós de detalhes vinculados.

  1. Quando você criou o projeto do AuctionPortlet , o assistente automaticamente criou um arquivo padrão do diagrama da Web denominado diagram.gph. No Explorador de Projetos, expanda as pastas Projetos Dinâmicos da Web e AuctionPortlet e, em seguida, dê um clique duplo em Diagrama da Web

    O arquivo será aberto no painel de edição com algumas instruções sobre como utilizar o editor de diagramas Web.
    Novo Diagrama da Web

  2. A visualização ativa no lado direito do espaço de trabalho é uma paleta, que contém um número de gavetas com objetos que você pode soltar no diagrama da Web. Você incluirá objetos da página da Web no arquivo UserAdmin.gph a partir da paleta. A paleta fornece um comportamento de arrastar e soltar "pegajoso", o que significa que após clicar no objeto na paleta, não é necessário segurar o botão do mouse pressionado durante a operação de arraste. Apenas mova o cursor para o diagrama da Web e clique novamente para soltar o objeto.

    Para criar o primeiro nó, você pode arrastar UserAdminView.jsp, a página de visualização inicial do JSP criada com o projeto AuctionPortlet, do Project Explorer ao editor. Como esse arquivo já foi criado, ele é exibido como um objeto realizado.

  3. Arraste e solte um objeto da página da Web para o editor. Altere o nome da página da Web para UserAdminCreate.jsp.
  4. Repita o passo anterior para criar uma página da Web chamada UserAdminUpdate.jsp.

    Nota: Você pode arrastar os nós para reposicioná-los.

  5. A seguir, você criará conexões entre os nós da página da Web para especificar o fluxo de dados nos portlets:
    1. Selecione Connection (Conexão) no menu pop-up UserAdminView.jsp. A partir de UserAdminView.jsp, arraste a conexão para o nó UserAdminCreate.jsp.
    2. Selecione Web Page Link (Link da Página da Web) no diálogo Choose a connection (Escolher uma Conexão) e clique em OK.
    3. Selecione Connection (Conexão) no menu pop-up do nó UserAdminCreate.jsp e arraste a conexão de volta para o nó UserAdminView.jsp.
    4. Selecione Faces Outcome (Faces Outcome) no diálogo Choose a connection (Escolher uma conexão) e clique em OK.
    5. Digite visualização sobre o <novo> realçado para nomear a nova conexão.
    6. Selecione Connection (Conexão) no menu pop-up UserAdminView.jsp. A partir de UserAdminView.jsp, arraste a conexão para o nó UserAdminUpdate.jsp.
    7. Selecione Faces Outcome (Faces Outcome) no diálogo Choose a connection (Escolher uma conexão) e clique em OK.
    8. Digite atualizar sobre o <novo> realçado para nomear a nova conexão.
    9. Selecione Connection (Conexão) a partir do menu pop-up do nó UserAdminUpdate.jsp e arraste a conexão de volta para o nó UserAdminView.jsp.
    10. Selecione Faces Outcome (Faces Outcome) no diálogo Choose a connection (Escolher uma conexão) e clique em OK.
    11. Digite visualização sobre o <novo> realçado para nomear a nova conexão.
    12. Salve o diagrama da Web.
    O diagrama deve ser semelhante a este:
    Estrutura do Diagrama da Web

Os links que foram definidos proverão as páginas do portlet com os vínculos, para um fluxo apropriado dos dados iniciados pelo usuário no aplicativo. Quando a página UserAdminView solicita uma ação de criação ou atualização do usuário, o formulário apropriado é aberto. Depois que as informações necessárias são submetidas por esses formulários, as novas informações do usuário ficam disponíveis para a função de consulta do portlet UserAdmin.

Agora você está pronto para iniciar o Exercício 1.3: Desenvolvendo a Página UserAdmin.

Feedback
(C) Copyright IBM Corporation 2000, 2005. Todos os Direitos Reservados.