Tutorial do NetBeans E-commerce: Preparando as Views de Página e o Servlet Controlador

O conteúdo desta página se aplica ao NetBeans IDE, versões e 6.8 e 6.9

Esta unidade do tutorial demonstra como criar arquivos de projeto no IDE e apresenta alguns dos recursos 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 da aplicação. 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 views e configurará o servlet controlador para tratar solicitações de entrada.

Nesta unidade você também criará um descritor de implantação web (arquivo web.xml) para a aplicação. Você pode utilizar o descritor de implantação para especificar informações de configuração que serão lidas pelo servidor durante a implantação. Embora as especificações do Servlet 3.0, incluídas no Java EE 6, permitam a utilização de anotações de classe no lugar de XML, é possível ainda exigir que o descritor de implantação configure certos elementos da aplicação. Especificamente, nesta unidade serão adicionadas diretivas para o cabeçalho e rodapé e serão especificados em que arquivos elas serão aplicadas.

Um dos objetivos desta unidade do tutorial é criar páginas JSP que correspondem às views especificadas no design da aplicação. Consultando os modelos de página e o diagrama de fluxo do processo, você começa a implementar layouts de páginas de acordo com as maquetes ao criar placeholders 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 sozinho ou fazer download do snapshot 1 do projeto que fornece layouts completos de todas as páginas.

Você pode exibir uma demonstração ao vivo da aplicação construída neste tutorial: Aplicação de Demonstração do Tutorial do NetBeans E-commerce



Software ou Recurso Versão Necessária
NetBeans IDE Pacote Java, 6.8 ou 6.9
Java Development Kit (JDK) versão 6
GlassFish Server v3 ou Open Source Edition 3.0.1

Observações:

  • O NetBeans IDE requer o Java Development Kit (JDK) para ser executado adequadamente. Se você não tiver nenhum dos recursos listados acima, o JDK deverá ser o primeiro item a ser submetido a download e instalado.
  • O Pacote Java do NetBeans IDE inclui o Java Web e tecnologias EE, que são necessárias para a aplicação construída neste tutorial.
  • O pacote Java do NetBeans IDE também inclui o GlassFish Server, necessário para este tutorial. Você poderia fazer download do GlassFish Server independentemente, mas a versão fornecida pelo NetBeans do qual fez download tem a vantagem adicional de ser registrada automaticamente no IDE.

Criando Arquivos do Projeto

Para criar novos arquivos para o projeto, acesse o assistente de Arquivo do IDE. Você pode clicar no botão Novo Arquivo (Botão Novo Arquivo), pressionar Ctrl-N (⌘-N no Mac), ou na janela Projetos, clique com o botão direito do mouse no nó de pasta que conterá o novo arquivo, e selecione Novo > [tipo de arquivo]. Nas subseções a seguir, crie páginas JSP e folha de estilo para o projeto.

Criando Páginas JSP

Comece a trabalhar no projeto criando páginas JSP que correspondem às views exibidas no diagrama de fluxo do processo.

A página index.jsp que foi gerada pelo IDE se tornará a página de boas-vindas do projeto. Crie uma página JSP para as quatro views remanescentes e, por enquanto, coloque-as na raiz da web do projeto com index.jsp.

  1. Clique no botão Novo Arquivo (Botão Novo Arquivo) para abrir o assistente de Arquivo.
  2. Selecione a categoria da Web e, em seguida, selecione JSP e clique em Próximo.
  3. Nomeie o arquivo "category". Note que o campo Localização está definido como Páginas Web, indicando que o arquivo será criado na raiz da web do projeto. Isso corresponde à pasta web do projeto, que pode ser verificada mais tarde na janela Arquivos do IDE.
  4. Clique em Finalizar. O IDE gera a nova página JSP e a abre no editor.
  5. Repita as etapas 1 a 4 acima para criar as páginas cart.jsp, checkout.jsp, confirmation.jsp remanescentes.

    Quando você finalizar, a janela Projetos terá a seguinte aparência:
    Janela Projetos que exibe a pasta

Criando uma Folha de Estilo

Crie um arquivo CSS para conter todos os estilos específicos da aplicação.

  1. Na janela Projetos, clique com o botão direito do mouse no nó Páginas Web e selecione Nova > Pasta.
  2. No assistente de Nova Pasta, nomeie a pasta "css" e clique em Finalizar.
  3. Clique com o botão direito do mouse na nova pasta css e selecione Novo > Folha de Estilo em Cascata. (Se o item Folha de Estilo em Cascata não estiver listado, escolha Outro. No assistente de Arquivo, selecione a categoria Web e, em seguida, selecione Folha de Estilo em Cascata e selecione Próximo.)
  4. Nomeie a folha de estilo como affablebean e clique em Finalizar.

    Quando finalizar, você verá o arquivo affablebean.css exibido na janela de Projetos.
    Janela Projetos que a exibe folha de estilo

Implementando conteúdo HTML e CSS

O propósito desta seção é criar as views de página para que comecem a espelhar os modelos de página fornecidos. Assim, elas servirão como andaime que pode ser utilizado para inserir conteúdo dinâmico durante estágios posteriores do desenvolvimento 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 browser: este tutorial utiliza Firefox 3 e não garante que a marcação da view da página seja compatível com outros browsers modernos. Naturalmente, ao trabalhar com tecnologias web front-end (HTML, CSS e JavaScript) é recomendado ter medidas para assegurar que as páginas web tenham sido renderizadas apropriadamente nos browsers e versões dos browsers que você espera que os visitantes do site utilizarão (normalmente Internet Explorer, Firefox, Safari, Chrome e Opera). Ao trabalhar com o IDE, você pode definir o browser em que deseja que sua aplicação seja aberta. Selecione Ferramentas > Opções (NetBeans > Preferências no Mac) e na guia Geral na janela Opções, selecione o browser que deseja utilizar do drop-down do Browser da Web. O IDE detecta os browsers instalados nas suas localizações default. Se um browser instalado no seu computador não for exibido, clique no botão Editar e registre o browser manualmente.

Preparar a exibição da suas páginas web é, geralmente, um processo iterativo, que você iria ajustar com comentários regulares do cliente. As seguintes etapas foram criadas para apresentar os recursos fornecidos pelo IDE e demonstrar como iniciar utilizando o modelo da página de boas-vindas como exemplo.

  1. Na janela Projetos, clique duas vezes emindex.jsp para abri-lo no editor.
  2. Comece criando tags <div> para as áreas principais da página. Você pode criar ao todo cinco tags: quatro para as áreas principais (cabeçalho, rodapé, coluna da esquerda e coluna da direita) e a quinta para conter as outras. Remova qualquer conteúdo de dentro da tag <body> e substitua-o pelo seguinte. (O 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 width e height para criar espaço para cada área.
    • Utilize a propriedade background para discernir as áreas quando exibir a página.
    • Para centralizar horizontalmente as quatro áreas na página, você pode incluir margin: 20px auto à regras body. (20px) aplica-se à parte superior e à inferior auto cria espaçamento igual para a esquerda e para a direita.) Depois inclua float: left às colunas da esquerda e da direita.
    • O rodapé requer clear:left para que sua borda superior seja exibida depois das bordas inferiores de qualquer área flutuante da esquerda 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 no botão Executar Projeto (Botão Executar Projeto) na barra de ferramentas principal do IDE. Os arquivos do projeto que contêm alterações são automaticamente salvos, qualquer código Java no projeto é compilado, o projeto é encapsulado e implantado ao GlassFish e o browser é aberto para exibir o estado atual da página de boas-vindas.
    Página de boas-vindas exibida no browser
  6. Agora, comece criando placeholders para componentes da página dentro de cada uma das quatro áreas visíveis. Inicie com o cabeçalho. Revisando o modelo da página de boas-vindas, o cabeçalho deverá conter todos os componentes a seguir:
    • Logotipo
    • texto do logotipo
    • widget 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 widget de carrinho de compras.


  7. Na folha de estilo, crie regras para os novos IDs e classes. Adicione as regras a seguir abaixo da regra header. (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;
        /* font styles apply to text within alt tags */
        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 houver propriedades no código acima com as quais você não está familiarizado, posicione o cursor na propriedade e pressione Ctrl-Espaço para chamar uma janela pop-up que fornece o suporte de documentação.
    Janela Documentação para suporte CSS

    Para ver como uma propriedade está afetando sua página, você pode comentá-la e depois atualizar a página no browser. 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 browser e atualize a página para exibir seu estado atual.

    Observação: o recurso "Implantar ao Salvar" do IDE é ativado automaticamente pelos projetos Java Web Isso significa que toda vez que você salva um arquivo ele é automaticamente compilado (exemplo, se for uma classe Java ou página JSP) e que o projeto está recém-encapsulado e implantado no seu servidor. Portanto, quando fizer alterações em HTML ou CSS, não é necessário reexecutar explicitamente o projeto pra exibir a versão atualizada em um browser. Simplesmente salve seu(s) arquivo(s) e, em seguida, mude para o browser e atualize a página.

    Página de boas-vindas exibida no browser
    Ao seguir as etapas anteriores, você provavelmente poderá ver um padrão surgindo. Para cada área na página, você executa três etapas.
    1. Crie a estrutura em HTML.
    2. Crie um conjunto de estilos para definir a aparência.
    3. Exiba a página para examinar os resultados das suas alterações.
    Seguindo essas três etapas, vamos implementar os componentes nas áreas remanescentes.
  9. Crie placeholders para componentes na coluna da direita. De acordo com o modelo da página de boas-vindas, a coluna da direita contém quatro caixas com espaçamento uniforme.

    Crie a estrutura para as quatro caixas. Insira o código a seguir entre as tags <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;
    }

  11. Salve (Ctrl-S; ⌘-S no Mac) os arquivos index.jsp e affablebean.css e, em seguida, mude para o browser e atualize a página para exibir seu estado atual.
    Página de boas-vindas exibida no browser
  12. A coluna da esquerda e o rodapé requerem placeholders apenas para o texto estático, então vamos implementar os dois simultaneamente.

    Insira o código a seguir entre as tags <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. Faça alterações na folha de estilo affablebean.css. Não é necessário explicar todos os novos IDs e classes: você pode ajustar a aparência posteriormente ao receber o texto e as imagens do cliente.

    A tag de regra horizontal (<hr>) executa todos os elementos nela contidos (<div id="footer"). Portanto, para encurtá-la de acordo com a imagem de modelo, você pode ajustar a largura 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 browser e atualize a página para exibir o estado atual.
    Página de boas-vindas exibida no browser
    A página de boas-vindas foi concluída. Foram criados todos os placeholders necessários para componentes que existirão na página.

Você concluiu o design inicial da página de boas-vindas da aplicação. Todos os placeholders para os componentes da página existem. Posteriormente neste tutorial, quando começar a aplicar lógica dinâmica às views de páginas, você poderá simplesmente conectar expressões JSTL e EL aos placeholders.

A tarefa continua para você implementar o design inicial para as outras páginas com base nos modelos. Para realizar isso, siga o padrão descrito acima, ou seja:

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

Assegure-se de aproveitar o suporte HTML e CSS que o IDE oferece. Algumas dicas e truques estão descritos abaixo. Se desejar apenas pegar o código para as páginas remanescentes e prosseguir com o tutorial,você pode fazer download do snapshot 1 do projeto AffableBean. Imagens das implementações do modelo inicial para as páginas remanescentes estão incluídas aqui.

página de categoria

Página da categoria exibida no browser

página do carrinho

Página do carrinho exibida no browser

página de check-out

Página de check-out exibida no browser

página de confirmação

Página de confirmação exibida no browser

Observação: as cores do segundo plano de cada página servem apenas para ajudá-lo a posicionar os elementos enquanto desenvolve a aplicação Eventualmente, será necessário removê-las da folha de estilo e aplicar uma cor de segundo plano mais adequada para a aplicação. Você pode fazer isso ajustando a regra de segundo plano para a classe main:

#main { background: #f7f7e9 }

Dicas e Truques

O editor do IDE fornece muitos recursos que o ajudam a trabalhar de forma mais eficiente. Se estiver familiarizado com os atalhos de teclado e botões na barra de ferramentas do editor, você poderá melhorar a produtividade. A lista de dicas a seguir se aplica ao editor para arquivos HTML e CSS. Para exibir mais atalhos do teclado, abra o Cartão de Atalhos do Teclado do IDE selecionando Ajuda > Cartão de Atalhos do Teclado no menu principal.

  • Autocompletar código: durante a digitação de tags e atributos, sugestões para autocompletar código aparecem automaticamente em uma caixa pop-up. Pressionar Enter completa a tag sugerida.
  • Formatar seu código: clique com o botão direito do mouse no editor e selecione Formatar.
  • Alternar números de linha: clique com o botão direito do mouse na margem esquerda e selecione Mostrar Números de Linha.
  • Localizar ocorrências: realce um bloco de texto e pressione Ctrl-F (⌘-F no Mac). Todas as correspondências ficam realçados no editor. Para alternar o realce, pressione o botão Alternar Realce da Pesquisa (Botão Alternar Realce da Pesquisa) (Ctrl-Shift-H) na barra de ferramentas do editor.
  • Criar um marcador: pressione o botão Alternar Marcador (Botão Alternar Marcador) (Ctrl-Shift-M) para criar um marcador na margem esquerda do editor. Onde quer que esteja no arquivo, você pode pular para o marcador pressionando os botões Anterior/Próximo Marcador na barra de ferramentas do editor.
  • Copiar um snippet de código para cima ou para baixo: realce um snippet de código e, em seguida, pressione Ctrl-Shift-Up/Down.
  • Realçar as tags de abertura e fechamento: coloque o cursor na tag de abertura ou de fechamento e as duas serão realçadas em amarelo.

Colocando Páginas JSP em WEB-INF

Olhando novamente os modelos de página que foram criados, você pode ver 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 sessão do usuário. (Sessões são discutidas na Unidade 8, Gerenciando Sessões.) Entretanto, note que todas as outras páginas precisam de alguma forma de informação específica do usuário para ser exibida adequadamente. Por exemplo, a página da categoria requer que o usuário selecione uma categoria para ser exibida e a página do carrinho precisa saber todos os itens incluídos atualmente no carrinho de compras. Essas páginas não serão renderizadas de forma adequada se o servidor não puder associar as informações específicas do usuário a uma solicitação de entrada. Portanto, não queremos que essas páginas sejam acessadas diretamente de uma barra de endereço do browser. A pasta WEB-INF do projeto pode ser utilizada para esse propósito: quaisquer recursos contidos na pasta WEB-INF não são acessíveis diretamente de um browser.

Crie uma nova pasta de nome view 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 selecione Novo > Pasta.
  2. No assistente Nova Pasta, nomeie a pasta view e clique em Finalizar. Note que um novo nó de pasta aparecerá na janela Projetos.
  3. Mova as páginas category.jsp, cart.jsp, checkout.jsp, e confirmation.jsp para a pasta view.

    Você pode fazer isso clicando em cart.jsp para selecioná-la e, em seguida, clicando com o Shift pressionado em confirmation.jsp. Isso seleciona os quatro arquivos. Em seguida, com os quatro arquivos selecionados, clique e arraste-os para a pasta WEB-INF/view.
    Janela Projetos que exibe páginas JSP sendo arrastadas para a pasta

Para demonstrar que essas páginas não estão mais acessíveis em um browser, clique no botão Executar Projeto (Botão Executar Projeto para executar o projeto. Quando a aplicação for exibida no browser, insira o caminho completo 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 HTTP Status 404, que indica que o recurso não está disponível.


Criando um Cabeçalho e Rodapé

Olhando os modelos de página é fácil ver se todas as cinco views compartilham conteúdo idêntico. Na parte superior, elas contêm o logotipo da empresa, a alternância de idioma e outros widgets associados à funcionalidade do carrinho de compras. Na parte inferior, elas contêm texto com links para Política de Privacidade e Contato. Em vez de incluir esse código em cada página do arquivo de origem, podemos fatorá-lo em dois fragmentos JSP: um cabeçalho e um rodapé. Em seguida, incluiremos os arquivos de fragmento em views de páginas sempre que for necessário renderizá-los.

Para esses fragmentos, vamos criar uma nova pasta chamada jspf e inseri-la dentro de WEB-INF.

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

    Itens do menu fornecidos pelo IDE são geralmente sensíveis ao contexto. Por exemplo, como você clicou com o botão direito do mouse no nó WEB-INF, quando o assistente Nova Pasta foi exibido, 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 selecionar Novo, a lista de tipos de arquivo será parcialmente determinada por seleções anteriores.

  3. Crie dois segmentos JSP: header.jspf e footer.jspf. Para fazer isso, clique com o botão direito do mouse na pasta jspf recém-criada e selecione Novo > JSP. No assistente Novo JSP, insira o nome do arquivo e em Opções, selecione a opção Criar como um Segmento JSP e clique em Finalizar.

    Ao finalizar, você visualizará header.jspf e footer.jspf exibidos na janela Projetos:
    A janela Projetos que exibe fragmentos JSP

    Agora você pode copiar o código do cabeçalho de qualquer página JSP e colar no arquivo header.jspf. Do mesmo modo, você pode copiar o código do rodapé de qualquer página JSP e colar no arquivo footer.jspf. Ao finalizar essa tarefa , você poderá 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 as tags de abertura <html>, <head> e <body> até a tag de fechamento para o elemento <div id="header&quot>. Certifique-se de incluir placeholders para o widget de carrinho de compras, alternância de idioma e para o botão "ir para o check-out" utilizado na parte superior das views de páginas. Após colar o código no header.jspf, o arquivo terá a seguinte aparência.
    <%@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é a tag de fechamento <html>. Após colar o código no footer.jspf, o arquivo terá a seguinte aparência.
                <div id="footer">
                    <hr>
                    <p id="footerText">[ footer text ]</p>
                </div>
            </div>
        </body>
    </html>
  6. Remova o código de cabeçalho e 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 Implantação

Até agora, você colocou as views nos locais apropriados e fatorou o código comum de cabeçalho e rodapé nos arquivos header.jspf e footer.jspf. A aplicação ainda precisa saber em quais páginas dos arquivos de cabeçalho e rodapé serão aplicados. Você pode adicionar tags <jsp:include> em cada uma das views de página. Fazer isso, 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 implantação web.xml e adicionar uma diretiva Grupo de Propriedade JSP para especificar a quais views de página os fragmentos de cabeçalho e rodapé deveriam ser aplicados.

  1. Pressione Ctrl-N (⌘-N no Mac) para abrir o assistente de Novo Arquivo. Selecione a categoria Web e, em seguida, em Tipos de Arquivo, selecione Descritor de Implantação 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 WEB-INF do projeto após a conclusão.
  3. Clique em Finalizar. O arquivo web.xml é criado e adicionado ao projeto. A interface gráfica do IDE para o descritor de implantação será aberta no editor.

    A interface é categorizada pelas áreas que podem ser configuradas em uma aplicação web. Essas áreas são exibidas como guias na barra de ferramentas do editor e incluem tópicos como Servlets, Filtros, Referências e Segurança. A guia XML exibe o código-fonte inteiro do arquivo. Qualquer alteração feita na interface gráfica provocará atualizações imediatas no código-fonte do descritor de implantação, que você pode verificar alternando para a guia XML. Isso está demonstrado nas etapas a seguir.
  4. Clique na guia Páginas e, em seguida clique no botão Adicionar Grupo de Propriedade JSP. A caixa de diálogo Adicionar Grupo de Propriedade JSP será aberta.
  5. Digite "definiçõ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 de URL, especifique os caminhos para as cinco views. 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.)
    Caixa de diálogo Adicionar Grupo de Propriedade JSP
  7. Clique em OK. Uma entrada é adicionada à categoria Grupos de Propriedades JSP na guia Páginas.
  8. Volte para a guia XML. Note que o código a seguir foi adicionado ao descritor de implantação.
    <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>

    Observação: pode ser necessário adicionar retorno de carro ao código para que ele seja exibido em várias linhas. Você pode clicar com o botão direito do mouse no editor e selecionar Formato (Alt-Shift-F; Ctrl-Shift-F no Mac) para que o código seja recuado corretamente.

  9. Volte novamente para a guia Páginas e nos campos Incluir Preludes e Incluir Codas, informe os caminhos para os arquivos header.jspf e footer.jspf, respectivamente. Você pode clicar no botão Browser e navegar para os arquivos na caixa de diálogo fornecida.
    Grupo de Propriedade JSP mostrado na guia Páginas de web.xml
  10. Volte para a guia 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 nos url-patterns fornecidos, o arquivo header.jspf será acrescentado ao início e o arquivo footer.jspf será acrescentado ao final.

    Para exibir as definições das tags acima, assim como de todas as tags disponíveis no descritor de implantação web, consulte Especificação do Servlet.

  11. Execute a aplicação novamente (pressione F6; fn-F6 no Mac). O código do cabeçalho e rodapé já foi removido do arquivo index.jsp, portanto, você pode determinar se está sendo adicionado automaticamente quando o arquivo é solicitado.

    Você verá que a página de boas-vindas será exibida como anteriormente, com o conteúdo do cabeçalho e rodapé incluído.

Criando o Servlet Controlador

O servlet do controlador trata as solicitações de entrada iniciando quaisquer ações necessárias para gerar o modelo de solicitação e, em seguida, encaminhando a solicitação para a view adequada. Para obter uma representação visual, consulte novamente o diagrama MVC para o projeto AffableBean.

O IDE fornece um assistente Servlet que permite definir o componente do servlet em uma aplicação web incluindo a anotação @WebServlet na classe gerada ou adicionando as diretivas necessárias ao descritor de implantação. Nas etapas a seguir, você cria o ControllerServlet e defini-lo no contexto da aplicação, utilizando a anotação @WebServlet.

  1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto AffableBean e selecione Novo > Servlet.
  2. No assistente, digite ControllerServlet no campo Nome da Classe.
  3. No campo Pacote, digite controller. (O novo pacote será criado automaticamente ao concluir o assistente.)
    Assistente de Servlet
  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 chamam o servlet. Por exemplo, se digitar "/category", você está direcionando o servlet para manipular uma requisição que aparece da maneira a seguir.
    http://localhost/AffableBean/category
    Os padrões de URL devem corresponder às views e ações que um usuário pode iniciar. Observando o modelo da página de boas-vindas, um usuário deve poder selecionar uma categoria. Entretanto, podemos associar o URL /category à ação de clicar na imagem de uma categoria. Do mesmo modo, na página da categoria, os usuários devem poder adicionar um item ao carrinho de compras. Podemos, portanto, especificar /addToCart.
  5. No campo Padrão(ões) de URL, digite "/category/addToCart, /viewCart". Padrões são separados por vírgulas. Você pode adicionar mais padrões diretamente na classe servlet depois de ela ter sido criada.
    Assistente de servlet, Etapa 3: Configurar a Implantação do Servlet
  6. Clique em Finalizar. O IDE irá gerar ControllerServlet e o abrirá no editor. Os padrões de servlet e de URL estão incluídos na anotação @WebServlet que aparece acima da assinatura da classe.
    @WebServlet(name="ControllerServlet", urlPatterns={"/category", "/addToCart", "/viewCart"})
    public class ControllerServlet extends HttpServlet {
    Na etapa anterior, se você tivesse selecionado a opção "Adicionar informações ao descritor de implantação (web.xml)" no assistente, a marcação a seguir teria sido gerada, em vez disso, no arquivo web.xml da aplicação.
    <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 outros padrões de URL diretamente ao elemento @WebServlet da anotação urlPatterns. A aplicação requer mais padrões de URL para outras ações e views. Você pode digitar os seguintes padrões:
    • /updatecart
    • /checkout
    • /purchase
    • /chooseLanguage
    Certifique-se de separar cada padrão com uma vírgula. Você também pode reformatar as anotações como se segue:
    @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 a aplicação for implantada. Um valor de 0 ou superior fará com que isso aconteça (-1 é o default).
    @WebServlet(name="ControllerServlet",
                loadOnStartup = 1,
                urlPatterns = {"/category",
                               "/addToCart",
                               "/viewCart",
                               "/updateCart",
                               "/checkout",
                               "/purchase",
                               "/chooseLanguage"})

Implementando o Servlet do Controlador

Como informado anteriormente, o servlet do controlador trata solicitações de entrada iniciando quaisquer ações necessárias para gerar o modelo da solicitação e, em seguida, encaminhando a solicitação para a view adequada. Para obter uma representação visual, consulte novamente o diagrama MVC para o projeto AffableBean.

Observando o código gerado para o novo ControllerServlet, você pode ver que o modelo de servlet do IDE implanta um método processRequest que é chamado pelos dois métodos doGet e doPost. (talvez seja necessário expandir o dobramento do código clicando no ícone de adição (Ícone de dobramento de código) na margem esquerda do editor para exibir esses métodos.) Como essa aplicação diferencia entre doGet e doPost, você adicionará o código diretamente nesses métodos e removerá o método processRequest será removido completamente.



Agora que mapeou os padrões de URL para o servlet utilizando a anotação @WebServlert, defina o ControlletServlet para tratar esses padrões. Além disso, instancie um RequestDispatcher para encaminhar o padrão solicitado para a view apropriada.

  1. Substitua o código de modelo da classe ControllerServlet pelo código a seguir.
    public class ControllerServlet extends HttpServlet {
    
        /**
         * Handles the HTTP <code>GET</code> method.
         * @param request servlet request
         * @param response servlet response
         * @throws ServletException if a servlet-specific error occurs
         * @throws IOException if an I/O error occurs
         */
        @Override
        protected void doGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    
            String userPath = request.getServletPath();
    
            // if category page is requested
            if (userPath.equals("/category")) {
                // TODO: Implement category request
    
            // if cart page is requested
            } else if (userPath.equals("/viewCart")) {
                // TODO: Implement cart page request
    
                userPath = "/cart";
    
            // if checkout page is requested
            } else if (userPath.equals("/checkout")) {
                // TODO: Implement checkout page request
    
            // if user switches language
            } else if (userPath.equals("/chooseLanguage")) {
                // TODO: Implement language request
    
            }
    
            // use RequestDispatcher to forward request internally
            String url = "/WEB-INF/view" + userPath + ".jsp";
    
            try {
                request.getRequestDispatcher(url).forward(request, response);
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }
    
        /**
         * Handles the HTTP <code>POST</code> method.
         * @param request servlet request
         * @param response servlet response
         * @throws ServletException if a servlet-specific error occurs
         * @throws IOException if an I/O error occurs
         */
        @Override
        protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    
            String userPath = request.getServletPath();
    
            // if addToCart action is called
            if (userPath.equals("/addToCart")) {
                // TODO: Implement add product to cart action
    
            // if updateCart action is called
            } else if (userPath.equals("/updateCart")) {
                // TODO: Implement update cart action
    
            // if purchase action is called
            } else if (userPath.equals("/purchase")) {
                // TODO: Implement purchase action
    
                userPath = "/confirmation";
            }
    
            // use RequestDispatcher to forward request internally
            String url = "/WEB-INF/view" + userPath + ".jsp";
    
            try {
                request.getRequestDispatcher(url).forward(request, response);
            } catch (Exception ex) {
                ex.printStackTrace();
            }
        }
    
    }
    Ao prosseguir com o tutorial, você retornará para o ControllerServlet e implementará individualmente cada um dos padrões de URL mapeados.
  2. Examine o código acima. Há vários pontos a serem observados:
    • O servlet utiliza uma variável da instância userPath para obter o padrão de URL solicitado pelo cliente:
      String userPath = request.getServletPath();
      O userPath é usado pelos dois métodos doGet e doPost.
    • Os padrões de URL associados, principalmente a solicitações de página são gerenciados pelo método doGet. Por exemplo, /category, /viewCart e /checkout resultam na exibição das páginas da categoria, do carrinho e check-out.)
    • Padrões URL associados às submissões de form e ao transporte de dados confidenciais do usuário (por exemplo, /addToCart, /updateCart e /purchase) são gerenciados pelo método doPost.
    • Para os métodos doGet e doPost, o caminho para a view apropriada é formado utilizando uma string de url:
      String url = "/WEB-INF/view" + userPath + ".jsp";
    • O RequestDispatcher é obtido a partir do HttpServletRequest e aplicado ao url para encaminhar a solicitação:
      request.getRequestDispatcher(url).forward(request, response);
    • As notas TODO têm sido utilizadas para denotar o trabalho que ainda precisa ser feito. Por exemplo:
      // if category page is requested
      if (userPath.equals("/category")) {
          // TODO: Implement category request
      Aplicar notas TODO no seu código é uma maneira útil de acompanhar as tarefas que você precisa concluir. Você pode utilizar a janela Tarefas do IDE (Ctrl-6; ⌘-6 no Mac) para exibir todas as notas TODO, assim como qualquer erro de sintaxe ou de compilação contido no projeto.
      Janela Tarefas

      Você pode controlar as palavras-chave que são exibidas na janela Tarefas. Abra a janela Opções (Ferramentas > Opções; NetBeans > Preferências no Mac) e, em seguida, selecione Diversos > Tarefas.

  3. Execute o projeto (pressione F6; fn-F6 no Mac) e teste para ver se o ControllerServlet está encaminhando solicitações para as views apropriadas.
    • Digite http://localhost:8080/AffableBean/category na barra de endereço do browser. A página da categoria da aplicação será exibida.
    • Digite http://localhost:8080/AffableBean/viewCart na barra de endereço do browser. A página do carrinho da aplicação será exibida.
    • Digite http://localhost:8080/AffableBean/checkout na barra de endereço do browser. A página de check-out da aplicação será exibida.

    Observação: Digitar http://localhost:8080/AffableBean/purchase na barra de endereço do browser não permite exibir a página de confirmação. Naturalmente, isso ocorre porque o padrão de URL de /purchase é tratado pelo método doPost do servlet e as solicitações enviadas da barra de endereço do browser são normalmente enviadas usando o método HTTP GET.

Nessa etapa, foram criadas páginas JSP que contêm placeholders para componentes funcionais. Também foi configurada a estrutura do front-end da aplicação. As páginas JSP agora residem dentro da pasta WEB-INF, os códigos do cabeçalho e rodapé foram fatorados em arquivos separados, o descritor de implantação está apropriadamente configurado e o ControllerServlet foi configurado para tratar as solicitações de entrada. Na próxima unidade do tutorial, você tomará medidas para ativar a conectividade entre a aplicação e o banco de dados.

Se desejar comparar o seu trabalho com a solução de amostra desta unidade, você poderá fazer download do snapshot 2 do projeto AffableBean.


Consulte Também

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo