| // |
| // Licensed to the Apache Software Foundation (ASF) under one |
| // or more contributor license agreements. See the NOTICE file |
| // distributed with this work for additional information |
| // regarding copyright ownership. The ASF licenses this file |
| // to you under the Apache License, Version 2.0 (the |
| // "License"); you may not use this file except in compliance |
| // with the License. You may obtain a copy of the License at |
| // |
| // http://www.apache.org/licenses/LICENSE-2.0 |
| // |
| // Unless required by applicable law or agreed to in writing, |
| // software distributed under the License is distributed on an |
| // "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| // KIND, either express or implied. See the License for the |
| // specific language governing permissions and limitations |
| // under the License. |
| // |
| |
| = Tutorial do NetBeans E-commerce: Preparando as Views de Página e o Servlet Controlador |
| :jbake-type: tutorial |
| :jbake-tags: tutorials |
| :jbake-status: published |
| :icons: font |
| :syntax: true |
| :source-highlighter: pygments |
| :toc: left |
| :toc-title: |
| :description: Tutorial do NetBeans E-commerce: Preparando as Views de Página e o Servlet Controlador - Apache NetBeans |
| :keywords: Apache NetBeans, Tutorials, Tutorial do NetBeans E-commerce: Preparando as Views de Página e o Servlet Controlador |
| |
| |
| |
| 1. link:intro.html[+Introdução+] |
| 2. link:design.html[+Criando a Aplicação+] |
| 3. link:setup-dev-environ.html[+Configurando o Ambiente de Desenvolvimento+] |
| 4. link:data-model.html[+Criando o Modelo de Dados+] |
| 5. *Preparando as Views de Página e Servlet do Controlador* |
| 6. link:connect-db.html[+Conectando a Aplicação ao Banco de Dados+] |
| 7. link:entity-session.html[+Adicionando Classes de Entidades e Beans de Sessão+] |
| 8. link:manage-sessions.html[+Gerenciando Sessões+] |
| 9. link:transaction.html[+Integrando a Lógica de Negócios Transacional+] |
| 10. link:language.html[+Adicionando o Suporte a Idioma+] |
| 11. link:security.html[+Protegendo a Aplicação+] |
| 12. link:test-profile.html[+Testando e Criando Perfis+] |
| 13. link:conclusion.html[+Conclusão+] |
| |
| image::../../../../images_www/articles/68/netbeans-stamp-68-69.png[title="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 link:http://jcp.org/en/jsr/detail?id=315[+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 link:design.html#mockups[+modelos de página+] e o link:design.html#business[+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 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip[+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: link:http://dot.netbeans.org:8080/AffableBean/[+Aplicação de Demonstração do Tutorial do NetBeans E-commerce+] |
| |
| |
| |
| |=== |
| |Software ou Recurso |Versão Necessária |
| |
| |link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |Pacote Java, 6.8 ou 6.9 |
| |
| |link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+Java Development Kit (JDK)+] |versão 6 |
| |
| |<<glassFish,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 link:https://glassfish.dev.java.net/public/downloadsindex.html[+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. |
| |
| |
| |
| [[createProjectFiles]] |
| == 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 (image::images/new-file-btn.png[]), 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. |
| |
| * <<jsp,Criando Páginas JSP>> |
| * <<css,Criando uma Folha de Estilo>> |
| |
| |
| [[jsp]] |
| === Criando Páginas JSP |
| |
| Comece a trabalhar no projeto criando páginas JSP que correspondem às views exibidas no link:design.html#business[+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 (image::images/new-file-btn.png[]) 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: |
| image::images/projects-win-views.png[title="As views estão contidas na pasta "] |
| |
| |
| [[css]] |
| === 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. |
| image::images/projects-win-css.png[title="A janela Projetos exibe a nova pasta ''css"] |
| |
| |
| |
| [[implementHTML]] |
| == Implementando conteúdo HTML e CSS |
| |
| O propósito desta seção é criar as views de página para que comecem a espelhar os link:design.html#mockups[+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 link:design.html#index[+modelo da página de boas-vindas+] como exemplo. |
| |
| 1. Na janela Projetos, clique duas vezes em`index.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*.) |
| |
| [source,html] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=3] |
| . Adicione referências à folha de estilo no cabeçalho da página e altere o texto do título. |
| |
| [source,xml] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=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). |
| |
| [source,java] |
| ---- |
| |
| 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; |
| } |
| ---- |
| |
| [start=5] |
| . Clique no botão Executar Projeto (image::images/run-project-btn.png[]) 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. |
| image::images/index-page.png[title="Executar o projeto para exibir o estado atual das páginas"] |
| |
| [start=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 link:design.html#index[+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*.) |
| |
| [source,html] |
| ---- |
| |
| <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. |
| |
| |
| === Suporte ao Editor HTML do NetBeans |
| |
| Ao trabalhar no editor, aproveite o suporte HTML do IDE. Além do realce de sintaxe típico que permite diferenciar tags, atributos, valores de atributo e texto, existem muitas outras funcionalidades. |
| |
| Durante a digitação de tags e atributos no editor, você pode chamar a funcionalidade autocompletar código e o suporte da documentação pressionando 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. |
| |
| image::images/documentation-popup.png[title="Pressione Ctrl-Espaço para exibir as janelas de autocompletar código e de documentação"] |
| |
| O IDE detecta erros no seu código e fornece advertências, mensagens de erro e, em alguns casos, sugestões. As mensagens de advertência são exibidas em amarelo, enquanto erros são mostrados em vermelho. Você pode passar o ponteiro do mouse sobre uma área designada para exibir a mensagem em uma dica de ferramentas. |
| |
| image::images/html-hint.png[title="Passe o ponteiro do mouse para exibir uma advertência de dica de ferramentas"] |
| |
| Você pode também aproveitar os vários atalhos do teclado. Selecione Ajuda > Cartão de Atalhos do Teclado no menu principal. |
| |
| |
| |
| [start=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*.) |
| |
| [source,java] |
| ---- |
| |
| #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. |
| image::images/css-doc-support.png[title="Pressione Ctrl-Espaço em uma propriedade CSS para chamar o suporte de documentação"] |
| |
| 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). |
| |
| |
| [start=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. |
| |
| image::images/index-page2.png[title="Placeholders para cabeçalho são visíveis ao executar o projeto"] |
| 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. |
| |
| [start=9] |
| . Crie placeholders para componentes na coluna da direita. De acordo com o link:design.html#index[+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*.) |
| |
| [source,html] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=10] |
| . Adicione regras de estilo ao `addablebean.css` para as novas classes `categoryBox` e `categoryLabelText`. (Novo código mostrado em *negrito*.) |
| |
| [source,java] |
| ---- |
| |
| #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 CSS do NetBeans |
| |
| Quando você trabalha em folhas de estilo, há duas janelas que podem ser particularmente úteis. A Visualização CSS permite exibir regras de estilo conforme são renderizadas no browser. Para abrir a Visualização CSS, selecione Janela > Outro > Visualização CSS no menu principal. Quando você coloca o cursor dentro de uma regra de estilo no editor, a Visualização CSS é atualizada automaticamente para exibir o texto de amostra de acordo com as propriedades definidas na regra. |
| |
| image::images/css-preview.png[title="Usar a Visualização CSS para exibir regras de estilo renderizadas"] |
| |
| O Construtor de Estilo CSS é útil se você não gostar de codificar regras de estilo manualmente. Para abrir o Construtor de Estilo CSS, selecione Janela > Outro > Construtor de Estilo CSS no menu principal. Utilizando essa interface, você pode construir regras ao selecionar propriedades e valores de uma interface gráfica. |
| |
| image::images/style-builder.png[title="Usar o Construtor de Estilo CSS para criar regras de estilo"] |
| |
| Como a Visualização CSS, o Construtor de Estilo está sincronizado com o editor. Quando você faz uma seleção no Construtor de Estilo, a regra de estilo é atualizada automaticamente no editor. Do mesmo modo, ao digitar alterações no editor, as seleções no Construtor de Estilo são atualizadas instantaneamente. |
| |
| |
| |
| [start=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. |
| image::images/index-page3.png[title="Placeholders para cabeçalho e a coluna da direita são visíveis ao executar o projeto"] |
| |
| [start=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*.) |
| |
| [source,html] |
| ---- |
| |
| <div id="indexLeftColumn"> |
| *<div id="welcomeText"> |
| <p>[ welcome text ]</p> |
| </div>* |
| </div> |
| |
| ... |
| |
| <div id="footer"> |
| *<hr> |
| <p id="footerText">[ footer text ]</p>* |
| </div> |
| ---- |
| |
| [start=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*.) |
| |
| [source,java] |
| ---- |
| |
| #footer { |
| height: 60px; |
| *width: 350px;* |
| clear: left; |
| background: #aaa; |
| } |
| |
| *hr { |
| border: 0; |
| background-color: #333; |
| height: 1px; |
| margin: 0 25px; |
| width: 300px; |
| }* |
| ---- |
| |
| [start=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. |
| image::images/index-page4.png[title="Placeholders para a coluna esquerda e o rodapé são visíveis"] |
| 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 link:design.html#mockups[+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: |
| .. Crie a estrutura em HTML. |
| .. Crie um conjunto de estilos para definir a aparência. |
| .. 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 <<tipsTricks,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 link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot1.zip[+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. |
| |
| |
| [[categoryPage]] |
| ==== página de categoria |
| |
| image::images/category-page.png[title="Placeholders implementados para página da categoria"] |
| |
| |
| [[cartPage]] |
| ==== página do carrinho |
| |
| image::images/cart-page.png[title="Placeholders implementados para página do carrinho"] |
| |
| |
| [[checkoutPage]] |
| ==== página de check-out |
| |
| image::images/checkout-page.png[title="Placeholders implementados para a página de check-out"] |
| |
| |
| ==== página de confirmação |
| |
| image::images/confirmation-page.png[title="Placeholders implementados para a página de check-out"] |
| |
| *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`: |
| |
| |
| [source,java] |
| ---- |
| |
| #main { background: #f7f7e9 } |
| ---- |
| |
| |
| [[tipsTricks]] |
| === 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 (image::images/toggle-highlight.png[]) (Ctrl-Shift-H) na barra de ferramentas do editor. |
| * *Criar um marcador:* pressione o botão Alternar Marcador (image::images/toggle-bookmark.png[]) (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. |
| |
| |
| |
| [[view]] |
| == Colocando Páginas JSP em WEB-INF |
| |
| Olhando novamente os link:design.html#mockups[+modelos de página+] que foram criados, você pode ver que a link:design.html#index[+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, link:manage-sessions.html[+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 link:design.html#category[+página da categoria+] requer que o usuário selecione uma categoria para ser exibida e a link:design.html#cart[+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`. |
| image::images/view-folder.png[title="Clique e arraste as páginas JSP 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 (image::images/run-project-btn.png[] 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: |
| |
| |
| [source,java] |
| ---- |
| |
| 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. |
| |
| |
| |
| [[jspf]] |
| == Criando um Cabeçalho e Rodapé |
| |
| Olhando os link:design.html#mockups[+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. |
| |
| |
| [start=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: |
| image::images/projects-win-jspf.png[title="Fragmentos JSP de cabeçalho e rodapé serão exibidos no projeto"] |
| |
| 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. |
| |
| [start=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. |
| |
| [source,html] |
| ---- |
| |
| <%@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> |
| ---- |
| |
| [start=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. |
| |
| [source,html] |
| ---- |
| |
| <div id="footer"> |
| <hr> |
| <p id="footerText">[ footer text ]</p> |
| </div> |
| </div> |
| </body> |
| </html> |
| ---- |
| |
| [start=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`). |
| |
| |
| |
| [[dd]] |
| == 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. |
| |
| [start=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. |
| |
| [start=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. |
| |
| [start=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.) |
| image::images/add-jsp-prop-group-dialog.png[title="Use a caixa de diálogo Adicionar Grupo de Propriedade JSP para especificar as tags <jsp-config> no descritor de implantação"] |
| |
| [start=7] |
| . Clique em OK. Uma entrada é adicionada à categoria Grupos de Propriedades JSP na guia Páginas. |
| |
| [start=8] |
| . Volte para a guia XML. Note que o código a seguir foi adicionado ao descritor de implantação. |
| |
| [source,xml] |
| ---- |
| |
| <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. |
| |
| |
| [start=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. |
| [.feature] |
| -- |
| image::images/jsp-prop-groups-small.png[role="left", link="images/jsp-prop-groups.png"] |
| -- |
| |
| [start=10] |
| . Volte para a guia XML. Note que o código a seguir foi adicionado. (Alterações em *negrito*.) |
| |
| [source,xml] |
| ---- |
| |
| <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-pattern`s 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 link:http://jcp.org/en/jsr/detail?id=315[+Especificação do Servlet+]. |
| |
| |
| [start=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 <<welcome-page,página de boas-vindas será exibida como anteriormente>>, com o conteúdo do cabeçalho e rodapé incluído. |
| |
| |
| |
| [[controller]] |
| == 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 link:design.html#mvcDiagram[+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 link:http://java.sun.com/javaee/6/docs/api/javax/servlet/annotation/WebServlet.html[+`@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.) |
| image::images/servlet-wizard.png[title="Use o assistente Criar Servlet para criar servlets para seu projeto"] |
| |
| [start=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. |
| |
| [source,java] |
| ---- |
| |
| http://localhost/AffableBean*/category* |
| ---- |
| Os padrões de URL devem corresponder às views e ações que um usuário pode iniciar. Observando o link:design.html#index[+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 link:design.html#category[+página da categoria+], os usuários devem poder adicionar um item ao carrinho de compras. Podemos, portanto, especificar `/addToCart`. |
| |
| [start=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. |
| image::images/servlet-wizard2.png[title="Configurar a implantação do servlet diretamente no assistente"] |
| |
| [start=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. |
| |
| [source,java] |
| ---- |
| |
| *@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. |
| |
| [source,xml] |
| ---- |
| |
| <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> |
| ---- |
| |
| [start=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: |
| |
| [source,java] |
| ---- |
| |
| @WebServlet(name="ControllerServlet", |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart"*, |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"*}) |
| ---- |
| |
| [start=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). |
| |
| [source,java] |
| ---- |
| |
| @WebServlet(name="ControllerServlet", |
| *loadOnStartup = 1,* |
| urlPatterns = {"/category", |
| "/addToCart", |
| "/viewCart", |
| "/updateCart", |
| "/checkout", |
| "/purchase", |
| "/chooseLanguage"}) |
| ---- |
| |
| |
| |
| [[implement]] |
| == 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 link:design.html#mvcDiagram[+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 (image::images/code-fold-icon.png[]) 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. |
| |
| |
| === Modificando os Modelos de Arquivos com o Gerenciador de Modelos do IDE |
| |
| O IDE fornece um modelo básico para qualquer novo arquivo que você criar. Se o modelo não for ideal para seus padrões de trabalho, você pode alterá-lo utilizando o Gerenciador de Modelos do IDE. O IDE fornece um modelo para praticamente qualquer tipo de arquivo. |
| |
| Por exemplo, para modificar o modelo do servlet: |
| |
| 1. Abra o Gerenciador de Modelos selecionando Ferramentas > Modelos no menu principal. |
| 2. Expanda a categoria Web e, em seguida, selecione o modelo Servlet. |
| image::images/template-manager.png[title="Acessar e modificar modelos de arquivos via Gerenciador de Modelos"] |
| |
| [start=3] |
| . Clique no botão Abrir no Editor. |
| |
| [start=4] |
| . Modifique o modelo no editor. Na próxima vez em que criar um novo servlet (por exemplo, utilizando o assistente de Servlet), a nova versão será aplicada. |
| |
| |
| |
| 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. |
| |
| [source,xml] |
| ---- |
| |
| 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. |
| |
| [start=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: |
| |
| [source,java] |
| ---- |
| |
| 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`: |
| |
| [source,java] |
| ---- |
| |
| String url = "/WEB-INF/view" + userPath + ".jsp"; |
| ---- |
| * O `RequestDispatcher` é obtido a partir do `HttpServletRequest` e aplicado ao `url` para encaminhar a solicitação: |
| |
| [source,java] |
| ---- |
| |
| request.getRequestDispatcher(url).forward(request, response); |
| ---- |
| * As notas `TODO` têm sido utilizadas para denotar o trabalho que ainda precisa ser feito. Por exemplo: |
| |
| [source,java] |
| ---- |
| |
| // 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. |
| image::images/tasks-window.png[title="Controlar as tarefas de implementação com a janela Tarefas do IDE"] |
| |
| 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. |
| |
| |
| [start=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 <<categoryPage,página da categoria>> da aplicação será exibida. |
| * Digite `http://localhost:8080/AffableBean/viewCart` na barra de endereço do browser. A <<cartPage,página do carrinho>> da aplicação será exibida. |
| * Digite `http://localhost:8080/AffableBean/checkout` na barra de endereço do browser. A <<checkoutPage,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 <<confirmationPage,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á link:https://netbeans.org/projects/samples/downloads/download/Samples%252FJavaEE%252Fecommerce%252FAffableBean_snapshot2.zip[+fazer download do snapshot 2 do projeto AffableBean+]. |
| |
| link:/about/contact_form.html?to=3&subject=Feedback: NetBeans E-commerce Tutorial - Preparing the Page Views and Controller Servlet[+Envie-nos Seu Feedback+] |
| |
| |
| |
| [[seeAlso]] |
| == Consulte Também |
| |
| |
| === Tutoriais do NetBeans |
| |
| * link:../javaee-intro.html[+Introdução à Tecnologia Java EE+] |
| * link:../javaee-gettingstarted.html[+Introdução às Aplicações do Java EE 6+] |
| * link:../../web/quickstart-webapps.html[+Introdução ao Desenvolvimento de Aplicações Web+] |
| * link:../../web/mysql-webapp.html[+Criando uma Aplicação Web Simples Usando um Banco de Dados MySQL+] |
| * link:../../screencasts.html[+Tutoriais e Demonstrações em Vídeo para NetBeans IDE 6.x+] |
| * link:https://netbeans.org/projects/www/downloads/download/shortcuts.pdf[+Atalhos de Teclado e Cartão de Modelos de Código+] |
| * link:../../../trails/java-ee.html[+Trilha do Aprendizado do Java EE e Java Web+] |
| |
| |
| === Livros do NetBeans |
| |
| * link:https://netbeans.org/kb/articles/netbeans-tips-and-tricks-book.html[+100 Dicas e Truques do NetBeans IDE+] |
| * link:http://www.apress.com/book/view/1590598954[+Pro NetBeans IDE 6 Rich Client Platform Edition+] |
| * link:http://apress.com/book/view/1430219548[+Iniciando a Plataforma Java EE 6 com o GlassFish 3: Do Novato ao Profissional+] |
| * link:https://netbeans.org/kb/articles/books.html[+Mais livros sobre o NetBeans IDE+] |
| |
| |
| === Recursos Externos |
| |
| * link:http://jcp.org/en/jsr/detail?id=315[+Especificações do Servlet 3.0+] |
| * link:https://developer.mozilla.org/en/Common_CSS_Questions[+Perguntas Frequentes de CSS+] |
| * link:http://quirksmode.org/compatibility.html[+Tabela Mestre de Compatibilidade do Browser+] |
| * link:http://refcardz.dzone.com/refcardz/netbeans-ide-67-update[+Cartão de Referência DZone do Editor NetBeans Java+] |
