Tutorial do NetBeans E-commerce: Preparando as visualizações da página e o servlet controlador

Esta unidade do tutorial demonstra como criar arquivos de projeto no IDE e introduz algumas facilidades disponíveis para desenvolvimento em HTML e CSS. Após criar os arquivos de projeto necessários, você começa a organizar o front-end do aplicativo. Isso é, você colocará arquivos JSP nos seus locais apropriados dentro da estrutura do projeto, criará um cabeçalho e um rodapé que serão aplicados a todas as visualizações e definidos como servlet controlador para lidar com os pedidos recebidos.

Nesta unidade, será criado um descritor de deployment de Web (arquivo web.xml) para o aplicativo. É possível utilizar o descritor de deployment para especificar a informação de configuração que será lida pelo servidor durante o deployment. Apesar das especificações Servlet 3.0, incluídas no Java EE 6, permitir a utilização de anotações de classe no lugar de XML, é possível ainda exigir que o descritor de implementação configure certos elementos do aplicativo. Especificamente, nesta unidade serão adicionadas diretivas para o cabeçalho e rodapé e serão especificados em que arquivos eles serão aplicados.

Um dos objetivos desta unidade do tutorial é criar páginas JSP que correspondem às visualizações especificadas no desenho do aplicativo. Remetendo às maquetes da página e diagrama do fluxo de processo, você começa a implementar layouts de páginas de acordo com as maquetes ao criar espaços reservados para todos os componentes visuais e funcionais. Esta unidade fornece um guia para a implementação do layout da página de boas-vindas. É possível aplicar as etapas descritas para criar as outras páginas independentemente ou efetuar o download do instantâneo 1 do projeto que fornece layouts completos de todas as páginas.

É possível visualizar uma demonstração ao vivo do aplicativo construído neste tutorial: Aplicativo de demonstração do tutorial do NetBeans E-commerce

Observações:

• O NetBeans IDE necessita do Java Development Kit (JDK) para executar apropriadamente. Se você não possuir nenhum dos recursos listados acima, o JDK deve ser o primeiro item a ser baixado e instalado.
• O pacote Java do NetBeans IDE inclui o Java Web e tecnologias EE, que são necessárias para o aplicativo construído neste tutorial.
• O pacote Java do NetBeans IDE também inclui o servidor GlassFish , necessário para este tutorial. É possível baixar o servidor GlassFish independentemente, mas a versão fornecida pelo NetBeans baixado possui o benefício adicional de ser registrado automaticamente com o IDE.

Criando arquivos do projeto

Para criar novos arquivos para o projeto, acesse o assistente de arquivo do IDE. É possível clicar no botão Novo arquivo ( ), pressionar Ctrl-N (⌘-N on Mac) ou, na janela Projetos, clicar com o botão direito do mouse no nó da pasta que contém o novo arquivo e escolher Novo > [tipo de arquivo]. Nas subseções a seguir, crie páginas JSP e folha de estilo para o projeto.

• Criando páginas JSP
• Criando uma folha de estilo

Implementando conteúdo HTML e CSS

O propósito desta seção é projetar as visualizações da página de modo que comecem a espelhar as maquetes da página fornecidas. Como tal, eles servirão como andaime que pode ser utilizado para inserir conteúdo dinâmico durante estágios posteriores do deployment do projeto. Para fazer isso, serão utilizados os editores de HTML e CSS do IDE, junto com várias janelas de suporte do CSS.

Nota de compatibilidade do navegador: este tutorial utiliza Firefox 3 e não garante que a marcação da visualização da página seja compatível com outros navegadores modernos. Naturalmente, ao trabalhar com tecnologias de Web front-end (HTML, CSS e JavaScript) é recomendado ter medidas para assegurar que as páginas de Web foram renderizadas apropriadamente nos navegadores e versões dos navegadores que você espera que os visitantes do site utilizarão (normalmente Internet Explorer, Firefox, Safari, Chrome e Opera). Ao trabalhar com o IDE é possível definir o navegador que deseja que o seu aplicativo abra. Escolha Ferramentas > Opções (NetBeans > Preferências no Mac) e na aba Geral na janela Opções, selecione o navegador que deseja utilizar do navegador suspenso da Web. O IDE exclui os navegadores instalados para suas localizações padrão. Se um navegador instalado no seu computador não for exibido, clique no botão Editar e registre o navegador manualmente.

Preparar a exibição da sua página da Web é, geralmente, um processo interativo, que você iria ajustar com comentários normais do cliente. As seguintes etapas são designadas para introduzir as facilidades fornecidas pelo IDE e demonstrar como iniciar utilizando a maquete da página de boas-vindas como exemplo.

1. Na janela Projetos, clique duas vezes emindex.jsp para abrí-lo no editor.
2. Comece criando marcadores <div> das áreas principais da página. É possível criar ao todo cinco marcadores: quatro áreas principais (cabeçalho, rodapé, coluna da esquerda e coluna da direita) e a quinta que contém as outras. Remova qualquer conteúdo de dentro do marcador <body> e substitua o seguinte. (Novo código é mostrado em negrito.)

   <body>
       <div id="main">
           <div id="header">
               header
           </div>
   
           <div id="indexLeftColumn">
               left column
           </div>
   
           <div id="indexRightColumn">
               right column
           </div>
   
           <div id="footer">
               footer
           </div>
       </div>
   </body>

3. Adicione referências à folha de estilo no cabeçalho da página e altere o texto do título.

   <head>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
       <link rel="stylesheet" type="text/css" href="css/affablebean.css">
       <title>The Affable Bean</title>
   </head>

4. Abra a folha de estilos affablebean.css no editor. Comece criando regras de estilo para os IDs <div> recém criados.
   • Utilize as propriedades largura e altura para criar espaço para cada área.
   • Utilize a propriedade plano de fundo para discernir as áreas quando visualizar a página.
   • A fim de centralizar horizontalmente as quatro áreas na página, é possível incluir margem: 20px auto às regras de corpo. (20px) aplica ao topo e fundo; auto cria espaços iguais na direita e esquerda.) Depois inclua flutuação: esquerda às colunas da esquerda e da direita.
   • O rodapé requer clear:left de modo que sua borda superior exiba após as bordas inferiores de qualquer área flutuante da direita acima dela (exemplo, as colunas da esquerda e da direita).

   body {
       font-family: Arial, Helvetica, sans-serif;
       width: 850px;
       text-align: center;
       margin: 20px auto;
   }
   
   #main { background: #eee }
   
   #header {
       height: 250px;
       background: #aaa;
   }
   
   #footer {
       height: 60px;
       clear: left;
       background: #aaa;
   }
   
   #indexLeftColumn {
       height: 400px;
       width: 350px;
       float: left;
       background: #ccc;
   }
   
   #indexRightColumn {
       height: 400px;
       width: 500px;
       float: left;
       background: #eee;
   }

5. Clique em Executar projeto ( ) na barra de ferramentas principal do IDE. Os arquivos de projeto que contêm mudanças são automaticamente salvos, qualquer código Java no projeto compila, o projeto é empacotado e implantado ao GlassFish e o navegador abre para exibir o estado atual da página de boas-vindas.
   
6. Agora, comece criando espaços reservados para componentes de página dentro de cada uma das quatro áreas visíveis. Inicie com o novo cabeçalho. Visualizando a maquete da página de boas-vindas, o cabeçalho deve conter todos os componentes a seguir:
   • logo
   • texto da logo
   • assistente de carrinho de compras
   • alternância de idioma
   Execute as mudanças a seguir no arquivo index.jsp. (Novo código mostrado em negrito.)

   <div id="header">
       <div id="widgetBar">
   
           <div class="headerWidget">
               [ language toggle ]
           </div>
   
           <div class="headerWidget">
               [ shopping cart widget ]
           </div>
   
       </div>
   
       <a href="#">
           <img src="#" id="logo" alt="Affable Bean logo">
       </a>
   
       <img src="#" id="logoText" alt="the affable bean">
   </div>

   No código acima, utilize um elemento <div id="widgetBar"> para conter a alternância de idioma e o assistente de carrinho de compras.
   
   

   Suporte ao editor de HTML NetBeans

   Ao trabalhar no editor, obtenha benefícios do suporte de HTML do IDE. Além do realce de sintaxe típico que permite diferenciar marcadores, atributos, valores de atributo e texto, existem muitos outros recursos.

   Ao digitar marcadores e atributos no editor, é possível invocar o autocompletar de código e o suporte da documentação ao pressionar Ctrl-Espaço. O IDE apresenta uma lista de sugestões para que você escolha, assim como uma janela de documentação que define o item selecionado e fornece exemplo de códigos.

   

   O IDE detecta erros no seu código e fornece avisos, mensagens de erro e, em alguns casos, sugestões. Mensagens de aviso são exibidas em amarelo, enquanto erros são mostrados em vermelho. É possível passar o ponteiro do mouse sobre uma área designada para visualizar a mensagem em uma dica de ferramentas.

   

   É possível obter benefícios de inúmeros atalhos de teclado. Escolha Ajuda > Cartão de atalhos de teclado do menu principal.

   
   
7. Na folha de estilo, crie regras para a nova ID e classes. Adicione as regras a seguir abaixo da regra cabeçalho. (Novo código mostrado em negrito.)

   #header {
       height: 250px;
       background: #aaa;
   }
   
   #logo {
       height: 155px;
       width: 155px;
       float: left;
       margin-left: 30px;
       margin-top: -20px;
   }
   
   #logoText {
       float: left;
       margin: 20px 0 0 70px;
       /* os estilos de fonte se aplicam ao texto dentro de tags alt */
       font-family: 'American Typewriter', Courier, monospace;
       font-size: 50px;
       color: #333;
   }
   
   #widgetBar {
       height: 50px;
       width: 850px;
       float: right;
       background: #ccc;
   }
   
   .headerWidget {
       width: 194px;
       margin: 20px 2px;
       font-size: small;
       float: right;
       line-height: 25px;
       background: #aaa;
   }

   Para a regra logo são aplicadas as propriedades margin-left e margin-top para posicionar o componente na página.
   
   Se existem propriedades no código acima com que você não está familiarizado, posicione o cursor na propriedade atribuída e pressione Ctrl-Espaço para invocar uma janela pop-up que fornece o suporte de documentação.
   
   

   Para visualizar como uma propriedade está afetando sua página, é possível comentá-la e depois atualizar a página no navegador. Para comentar o código, posicione o cursor em uma linha ou realce um bloco de código e, em seguida, pressione Ctrl-/ (⌘-/ no Mac).

8. Salve (Ctrl-S; ⌘-S no Mac) os arquivos index.jsp e affablebean.css e, em seguida, mude para o navegador e atualize a página para visualizar o estado atual.
   
   

   Nota: a facilidade do IDE "Implementar ao Salvar" é ativada automaticamente pelos projetos Web Java. Isso significa que toda vez que um arquivo é salvo, o arquivo é automaticamente compilado (exemplo, se é uma classe Java ou página JSP) e que o projeto está recém-empacotado e implementado no seu servidor. Portanto, quando fizer alterações em HTML ou CSS, não é necessário executar novamente explicitamente o projeto pra visualizar a versão atualizada em um navegador. Simplesmente salve seu(s) arquivo(s) e, em seguida, mude para o navegador e atualize a página.

   
   Ao seguir as etapas a seguir, você provavelmente estará apto a visualizar um padrão emergindo. Para cada área na página, é possível efetuar três etapas.
   1. Criar a estrutura em HTML.
   2. Crie um conjunto de estilos para definir a aparência.
   3. Visualizar a página para examinar os resultados das suas alterações.
   Ao seguir essas três etapas, vamos implementar os componentes nas áreas remanescentes.
9. Crie espaços reservados para componentes na coluna da direita. De acordo com a maquete da página de boas-vindas, a coluna da direita contém quatro caixas com espaço uniforme.
   
   Crie a estrutura para as quatro caixas. Insira o código a seguir entre os marcadores <div id="indexRightColumn">. (Novo código mostrado em negrito.)

   <div id="indexRightColumn">
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">dairy</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">meats</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">bakery</span>
           </a>
       </div>
       <div class="categoryBox">
           <a href="#">
               <span class="categoryLabelText">fruit & veg</span>
           </a>
       </div>
   </div>

10. Adicione regras de estilo ao addablebean.css para as novas classes categoryBox e categoryLabelText. (Novo código mostrado em negrito.)

    #indexRightColumn {
        height: 400px;
        width: 500px;
        float: left;
        background: #eee;
    }
    
    .categoryBox {
        height: 176px;
        width: 212px;
        margin: 21px 14px 6px;
        float: inherit;
        background: #ccc;
    }
    
    .categoryLabelText {
        line-height: 150%;
        font-size: x-large;
    }

    Suporte ao CSS NetBeans

    Ao trabalhar em folhas de estilo, há duas janelas que podem ser particularmente úteis. A Visualização CSS habilita a visualização de regras de estilo como são renderizadas no navegador. Para abrir a Visualização CSS, escolha Janela > Outro > Visualização CSS do menu principal. Ao colocar o cursor dentro de uma regra de estilo no editor, a Visualização CSS atualiza automaticamente para exibir o texto de amostra de acordo com as propriedades definidas na regra.

    

    O Construtor de estilo CSS é útil se você não gosta de codificar regras de estilo manualmente. Para abrir o Construtor de estilo CSS, escolha Janela > Outro > Construtor de estilo CSS do menu principal. Utilizando essa interface, é possível construir regras ao escolher propriedades e valores de uma interface gráfica.

    

    Como a Visualização CSS, o Construtor de estilo está sincronizado com o editor. Ao fazer uma seleção no Construtor de estilo, a regra de estilo é atualizada automaticamente no editor. Do mesmo modo, ao digitar mudanças no editor, as seleções no Construtor de estilo são atualizadas instantaneamente.

    
    
11. Salve (Ctrl-S; ⌘-S no Mac) os arquivos index.jsp e affablebean.css e, em seguida, mude para o navegador e atualize a página para visualizar o estado atual.
    
12. A coluna da esquerda e o rodapé requerem apenas espaços reservados para o texto estático, então vamos implementar ambos simultaneamente.
    
    Insira o código a seguir entre os marcadores <div id="indexLefttColumn"> e <div id="footer">. (Novo código mostrado em negrito.)

    <div id="indexLeftColumn">
        <div id="welcomeText">
            <p>[ welcome text ]</p>
        </div>
    </div>
    
    ...
    
    <div id="footer">
        <hr>
        <p id="footerText">[ footer text ]</p>
    </div>

13. Efetue as mudanças na folha de estilo affablebean.css. Não é necessário calcular para todas as novas IDs e classes: é possível ajustar a aparência em um ponto posterior ao receber o texto e as imagens do cliente.
    
    O marcador de regra horizontal (<hr>) executa o comprimento total dos elementos contidos (<div id="footer"). Portanto, para encurtá-lo de acordo com a imagem da maquete, é possível ajustar a altura do <div id="footer">. (Novo código mostrado em negrito.)

    #footer {
        height: 60px;
        width: 350px;
        clear: left;
        background: #aaa;
    }
    
    hr {
        border: 0;
        background-color: #333;
        height: 1px;
        margin: 0 25px;
        width: 300px;
    }

14. Salve (Ctrl-S; ⌘-S no Mac) os arquivos index.jsp e affablebean.css e, em seguida, mude para o navegador e atualize a página para visualizar o estado atual.
    
    A página de boas-vindas está completa. Foram criados todos os espaços reservados necessários para componentes que existirão na página.

O projeto inicial da página de boas-vindas do aplicativo foi concluído. Todos os espaços reservados para os componentes de página existem. Posteriormente neste tutorial, ao começar a aplicar lógica dinâmica às visualizações das páginas, você pode simplesmente ligar expressões JSTL e EL aos espaços reservados.

A tarefa continua para que o projeto inicial seja implementado para as outras páginas com base nas maquetes. Para realizar isso, siga o padrão descrito acima, isto é:

1. Crie marcadores <div> para as áreas da página principal.
2. Repetir através de cada área e efetuar as três etapas a seguir:
   1. Criar a estrutura em HTML.
   2. Crie um conjunto de estilos para definir a aparência.
   3. Visualizar a página para examinar os resultados das suas alterações.

Assegure-se de obter benefícios do suporte HTML e CSS que o IDE fornece. Algumas dicas e truques estão descritos abaixo. Se você apenas deseja pegar o código para as páginas remanescentes e prosseguir com o tutorial, é possível baixar o instantâneo 1 do projeto AffableBean. Imagens das implementações da maquete inicial para as páginas remanescentes estão incluídas aqui.

página de categoria

página do carrinho

página de retirada

página de confirmação

Nota: ao desenvolver o aplicativo, as cores do plano de fundo para cada página serve apenas para ajudar os elementos de posição. Eventualmente, você poderá querer removê-los da folha de estilo e aplicar uma cor de plano de fundo mais adequado para o aplicativo. É possível fazer isso ao ajustar a regra do plano de fundo para a classe principal:

#main { background: #f7f7e9 }

Dicas e truques

O editor do IDE fornece muitas facilidades que auxiliam você a trabalhar de forma mais eficiente. Se for familiarizado com os atalhos de teclado e botões na barra de ferramentas do editor, é possível melhorar a produtividade. A lista de dicas a seguir se aplica ao editor para arquivos HTML e CSS. Para visualizar mais atalhos de teclado, abra o Cartão de atalhos de teclado do IDE, escolhendo Ajuda > Cartão de atalhos do teclado do menu principal.

• Autocompletar de código: ao digitar marcadores e atributos, sugestões para autocompletar de código aparecem automaticamente em uma caixa pop-up. Pressionando Enter o marcador sugerido é completo.
• Formate seu código: clique com o botão direito do mouse no editor e escolha Formatar.
• Alterne os números da linha: clique com o botão direito do mouse na margem da esquerda e escolha Mostrar números de linha.
• Localize ocorrências: realce um bloco de texto e pressione Ctrl-F (⌘-F no Mac). Todos os correspondentes ficam realçados no editor. Para alternar o realce, pressione o botão Alternar destaque da pesquisa ( ) (Ctrl-Shift-H) na barra de ferramentas do editor.
• Crie um marcador de livros: pressione o botão Alternar marcador de livros ( ) (Ctrl-Shift-M) para criar um marcador de livro na margem da esquerda do editor. Onde quer que esteja no arquivo, é possível pular para o marcador de livro ao pressionar os botões Anterior/Próximo marcador de livro na barra de ferramentas do editor.
• Copie um trecho de código para cima ou para baixo: realce um trecho de código, depois pressione Ctrl-Shift-Up/Down.
• Realce os marcadores de abertura e encerramento: coloque o cursor no marcador de abertura ou encerramento e ambos serão realçados em amarelo.

Colocando páginas JSP em WEB-INF

Ao visualizar novamente as maquetes de página que foram criadas, é possível perceber que a página de boas-vindas deveria ter a mesma aparência sempre que solicitada, independente de quem solicitar. Isto é, o conteúdo que é exibido na página de boas-vindas não é determinado por uma seção do usuário. (Sessões são discutidas na Unidade 8, Gerenciando sessões.) Entretanto, note que todas as outras páginas necessitam de algum formulário de informação de usuário específica para exibir apropriadamente. Por exemplo, a página da categoria requer que o usuário selecione uma categoria a fim de exibir e a página do carrinho necessita saber todos os itens incluídos atualmente no carrinho de compras. Essas páginas não processarão apropriadamente se o servidor não for capaz de associar informações específicas de usuário com um pedido de entrada. Portanto, não queremos que essas páginas sejam acessadas diretamente de uma barra de endereço do navegador. A pasta do projeto WEB-INF pode ser utilizada para esse propósito: quaisquer recursos contidos na pasta WEB-INF não são acessíveis diretamente de um navegador.

Crie uma nova pasta nomeada visualização e coloque-a na pasta WEB-INF. Em seguida, mova todas as páginas JSP, menos a página de boas-vindas, para essa pasta nova.

1. Na janela Projetos, clique com o botão direito do mouse no nó WEB-INF e escolha Novo > Pasta.
2. No assistente Nova pasta, nomeie a pasta visualização e clique em Terminar. Note que um novo nó de pasta aparece na janela Projetos.
3. Mova as pastas category.jsp, cart.jsp, checkout.jsp, e confirmation.jsp para a pasta visualização.
   
   É possível fazer isso clicando em cart.jsp para selecionar e, em seguida, clicando com o Shift pressionado em confirmation.jsp. Isso selecione os quatro arquivos. Em seguida, com os quatro arquivos selecionados, clique e arraste-os para a pasta WEB-INF/vista.
   

Para demonstrar que essas páginas não são mais acessíveis a partir de um navegador, clique no botão Executar projeto ( ) para executar o projeto. Quando o aplicativo exibir no navegador, insira o caminho inteiro para qualquer um desses arquivos na barra de endereço. Por exemplo, digite:

http://localhost:8080/AffableBean/WEB-INF/view/category.jsp

Você recebe uma mensagem 404 de estado HTTP, indicando que o recurso não está disponível.

Criando um cabeçalho e rodapé

Visualizar as maquetes de página é a maneira mais fácil de ver se todas as cinco visualizações compartilham conteúdo idêntico; no topo, elas contêm a logo da companhia, a alternância de idioma e outros assistentes associados com a funcionalidade do carrinho de compras. Ao fundo, elas contêm algum texto com links de Política de privacidade e Contato. Em vez de incluir esse código em cada página de código-fonte do arquivo, podemos fatorá-lo em dois fragmentos JSP: um cabeçalho e um rodapé. Então, iremos incluir os arquivos de fragmento em visualizações de páginas sempre que for necessário renderizá-los.

Para esses fragmentos, vamos criar uma nova pasta nomeada jspf e inserí-la dentro de WEB-INF.

1. Na janela Projetos, clique com o botão direito do mouse no nó WEB-INF e escolha Novo > Pasta.
2. No assistente Nova pasta, nomeie a pasta jspf e clique em Terminar.
   
   

   Itens do menu fornecidos pelo IDE são frequentemente sensíveis ao contexto. Por exemplo, como você clicou com o botão direito do mouse no nó WEB-INF, ao exibir o assistente Nova pasta, web/WEB-INF foi inserido automaticamente no campo Pasta pai. Do mesmo modo, ao clicar com o botão direito do mouse no nó da janela Projetos e escolher Novo, a lista do tipo de arquivo está parcialmente determinada por seleções anteriores.

3. Crie dois segmentos JSP: header.jspf e footer.jspf. Para fazê-lo, clique com o botão direito do mouse na pasta recém criada jspf e escolha Novo > JSP. No assistente Novo JSP, insira o nome do arquivo e em Opções, selecione a opção Criar como segmento JSP e clique em Terminar.
   
   Ao concluir, você visualizará header.jspf e footer.jspf exibidos na janela Projeto:
   
   
   Agora é possível copiar o código do cabeçalho de qualquer página JSP e colar no arquivo header.jspf. Do mesmo modo, agora é possível copiar o código do rodapé de qualquer página JSP e colar no arquivo footer.jspf. Ao concluir essa tarefa , é possível remover o código do cabeçalho e do rodapé de todas as páginas JSP.
4. Copie o código do cabeçalho de qualquer página JSP e cole no arquivo header.jspf. O cabeçalho deve incluir o tipo de documento da página e os marcadores de abertura <html>, <head> e <body> através do marcador de encerramento para o elemento <div id="header&quot>. Assegure-se de incluir espaços reservados para o assistente de carrinho de compras, alternância de idioma e prossiga para o botão check-out utilizado com as visualizações da página. Após colar o código no header.jspf, o arquivo ficará da seguinte forma.

   <%@page contentType="text/html" pageEncoding="UTF-8"%>
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
   
   <html>
       <head>
           <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
           <link rel="stylesheet" type="text/css" href="css/affablebean.css">
           <title>The Affable Bean</title>
       </head>
       <body>
           <div id="main">
               <div id="header">
                   <div id="widgetBar">
   
                       <div class="headerWidget">
                           [ language toggle ]
                       </div>
   
                       <div class="headerWidget">
                           [ checkout button ]
                       </div>
   
                       <div class="headerWidget">
                           [ shopping cart widget ]
                       </div>
   
                   </div>
   
                   <a href="#">
                       <img src="#" id="logo" alt="Affable Bean logo">
                   </a>
   
                   <img src="#" id="logoText" alt="the affable bean">
               </div>

5. Copie o código do rodapé de qualquer página JSP e cole no arquivo footer.jspf. O código do rodapé deve incluir o elemento <div id="footer"> até o marcador de fechamento <html>. Após colar o código no footer.jspf, o arquivo ficará da seguinte forma.

               <div id="footer">
                   <hr>
                   <p id="footerText">[ footer text ]</p>
               </div>
           </div>
       </body>
   </html>

6. Remova o cabeçalho e o rodapé de todas as cinco páginas JSP (index.jsp, category.jsp, cart.jsp, checkout.jsp e confirmation.jsp).

Adicionando uma diretiva ao descritor de deployment

Até agora, você colocou as visualizações nos seus locais apropriados e fatorizou o código comum de cabeçalho e de rodapé em arquivos header.jspf e footer.jspf. O aplicativo ainda precisa saber quais as páginas dos arquivos cabeçalho e rodapé serão aplicados. É possível adicionar marcadores <jsp:include> para cada uma das visualizações da página. Fazê-lo, entretanto, apenas reintroduziria a repetição de código que acabamos de nos esforçar para eliminar. Uma solução alternativa seria criar um descritor de deployment web.xml e adicionar uma diretiva Grupo apropriado JSP para especificar qual visualização de página dos fragmentos de cabeçalho e rodapé deveriam ser aplicados.

1. Pressione Ctrl-N (⌘-N no Mac) para abrir o assistente Novo arquivo. Selecione a categoria Web e, em seguida, em Tipos de arquivo, selecione Descritor de deployment padrão (web.xml).
2. Clique em Próximo. Note que o arquivo é nomeado web.xml e que o assistente irá colocá-lo no diretório do projeto WEB-INF após a conclusão.
3. Clique em Terminar. O arquivo web.xml é criado e adicionado ao projeto. A interface gráfica do IDE para o descritor de deployment abre no editor.
   
   A interface é categorizada pelas áreas que podem ser configuradas em um aplicativo da web. Essas áreas são exibidas como abas na barra de ferramentas do editor e inclui tópicos como Servlets, Filtros, referências e Segurança. A aba XML exibe o código-fonte inteiro par o arquivo. Qualquer alteração feita na interface gráfica causará atualizações imediatas no código-fonte do descritor de deployment, que você pode verificar alternando para a aba XML. Isso está demonstrado nas etapas a seguir.
4. Clique na aba Páginas e, em seguida clique no botão Adicionar grupo apropriado JSP. A caixa de diálogo Adicionar grupo apropriado JSP abre.
5. Digite "configurações de cabeçalho e rodapé" no campo Descrição. Deixe Nome de exibição em branco. Os campos Nome de exibição e Descrição são opcionais.
6. Para Padrões URL, especifique os caminhos para as cinco visualizações. Digite "/index.jsp" e "/WEB-INF/view/*". Separe os dois caminhos com vírgula. (O "*" é um curinga que representa todos os arquivos dentro da pasta determinada.)
   
7. Clique em OK. Uma entrada é adicionada à categoria Grupos apropriados JSP na aba Páginas.
8. Volte para a aba XML. Note que o código a seguir foi adicionado ao descritor de deployment.

   <jsp-config>
       <jsp-property-group>
           <description>header and footer settings</description>
           <url-pattern>/index.jsp</url-pattern>
           <url-pattern>/WEB-INF/view/*</url-pattern>
       </jsp-property-group>
   </jsp-config>

   Nota: pode ser necessário adicionar retorno de carro ao código para que ele seja exibido em várias linhas. É possível clicar com o botão direito do mouse no editor e escolher Formato (Alt-Shift-F; Ctrl-Shift-F no Mac) para ter o código corretamente recortado.

9. Volte novamente para a aba Páginas e nos campos Incluir preludes e Incluir codas, insira os caminhos para os arquivos header.jspf e footer.jspf, respectivamente. É possível clicar no botão Navegador e navegar pelos campos na caixa de diálogo fornecida.
   
10. Volte para a aba XML. Note que o código a seguir foi adicionado. (Alterações em negrito.)

    <jsp-config>
        <jsp-property-group>
            <description>header and footer settings</description>
            <url-pattern>/index.jsp</url-pattern>
            <url-pattern>/WEB-INF/view/*</url-pattern>
            <include-prelude>/WEB-INF/jspf/header.jspf</include-prelude>
            <include-coda>/WEB-INF/jspf/footer.jspf</include-coda>
        </jsp-property-group>
    </jsp-config>

    A diretiva acima especifica que para todos os arquivos encontrados dentro do url-pattern determinado, o arquivo header.jspf será precedido e o arquivo footer.jspf anexado.
    
    

    Para visualizar as definições dos marcadores acima, assim como de todos os marcadores disponíveis no descritor de deployment da Web, consulte Especificação do servlet.

11. Execute o aplicativo novamente (pressione F6; fn-F6 no Mac). O código do cabeçalho e rodapé já foram removidos do arquivo index.jsp, de maneira que é possível determinar se está sendo adicionado automaticamente quando o arquivo for solicitado.
    
    É possível visualizar que a página de boas-vindas exibe como fez anteriormente, com o conteúdo do cabeçalho e rodapé incluído.

Criando o servlet do controlador

O servlet do controlador manipula requisições recebidas iniciando quaisquer ações necessárias para gerar o modelo de requisição e, em seguida, encaminhando a requisição para a visualização apropriada. Para uma representação visual, remete para o diagrama MVC para o projeto AffableBean.

O IDE fornece um assistente servlet que habilita a definição do componente servlet em um aplicativo da Web também ao incluir a anotação @WebServlet na classe gerada ou adicionando as diretivas necessárias para o descritor de deployment. Nas etapas a seguir, é possível criar o ControllerServlet e definí-lo no contexto do aplicativo, utilizando a anotação @WebServlet.

1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto AffableBean e escolha Novo > Servlet.
2. No assistente, digite ControllerServlet no campo Nome de classe.
3. No campo Pacote, digite controlador. (O novo pacote é criado automaticamente ao concluir o assistente.)
   
4. Clique em Próximo. A etapa 3 do assistente permite que você configure o servlet. Os padrões de URL que precisam ser especificados são de importância primordial. Os padrões identificam os URLs que invocam o servlet. Por exemplo, se inserir "/category", você está direcionando o servlet para manipular uma requisição que aparece da maneira a seguir.

   http://localhost/AffableBean/category

   O padrão URL deve corresponder com às visualizações e ações que um usuário pode iniciar. Observando a maquete da página de boas-vindas, um usuário deve ser capaz de selecionar uma categoria. Entretanto, é possível associar o URL /category com a ação de clicar na imagem da categoria. Do mesmo modo, na página da categoria, usuários devem ser capazes de adicionar um item ao carrinho de compras. Entretanto, é possível especificar /addToCart.
5. No campo Padrão(ões) URL, digite "/category/addToCart, /viewCart". Padrões são separados por vírgula. É possível adicionar mais padrões diretamente da classe servlet uma vez que é criada.
   
6. Clique em Terminar. O IDE gera o ControllerServlet e abre-o no editor. Os padrões servlet e URL estão incluídos na anotação @WebServlet que aparece acima da assinatura de classe.

   @WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})
   public class ControllerServlet extends HttpServlet {

   Na etapa anterior, se você tivesse escolhido a opção "Adicionar informação ao descritor de deployment (web.xml)" no assistente, a marcação a seguir teria sido gerada no arquivo do aplicativo web.xml no lugar.

   <servlet>
       <servlet-name>ControllerServlet</servlet-name>
       <servlet-class>controller.ControllerServlet</servlet-class>
   </servlet>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/category</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/addToCart</url-pattern>
   </servlet-mapping>
   <servlet-mapping>
       <servlet-name>ControllerServlet</servlet-name>
       <url-pattern>/viewCart</url-pattern>
   </servlet-mapping>

7. Adicione outro padrão URL diretamente ao elemento de anotação@WebServlet urlPatterns. O aplicativo requer mais padrões URL para outras ações e visualizações. É possível digitar os padrões a seguir:
   • /updateCart
   • /checkout
   • /purchase
   • /chooseLanguage
   Assegure-se de separar cada padrão com uma vírgula. É possível também reformatar as anotações como a seguir:

   @WebServlet(name="ControllerServlet",
               urlPatterns = {"/category",
                              "/addToCart",
                              "/viewCart",
                              "/updateCart",
                              "/checkout",
                              "/purchase",
                              "/chooseLanguage"})

8. Finalmente, inclua o elemento loadOnStartup para que o servlet seja instanciado e inicializado quando o aplicativo for implantado. Um valor de 0 ou superior fará com que isso aconteça (-1 é o padrão).

   @WebServlet(name="ControllerServlet",
               loadOnStartup = 1,
               urlPatterns = {"/category",
                              "/addToCart",
                              "/viewCart",
                              "/updateCart",
                              "/checkout",
                              "/purchase",
                              "/chooseLanguage"})

Implementando o Servlet controlador

Como anteriormente relatado, o servlet controlador manipula requisições recebidas iniciando quaisquer ações necessárias para gerar o modelo de requisição e, em seguida, encaminhar a requisição para a visualização apropriada. Para uma representação visual, remete para o diagrama MVC para o projeto AffableBean.

Observando o código gerado para o novo ControllerServlet, é possível ver que o modelo de servlet do IDE emprega um método processRequest que é chamado por ambos os métodos doGet e doPost. (Pode ser necessário expandir a dobra do código clicando no ícone mais ( ) na margem esquerda do editor para visualizar esses métodos.) Como esse aplicativo diferencia entre doGet e doPost, o código será adicionado diretamente a esses métodos e o método processRequest será removido completamente.