// 
//     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.
//

= Introdução ao Desenvolvimento de Aplicações Web
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Introdução ao Desenvolvimento de Aplicações Web - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Introdução ao Desenvolvimento de Aplicações Web

Este documento oferece os conceitos básicos sobre o uso do NetBeans IDE no desenvolvimento de aplicações Web. Ele demonstra como criar uma aplicação Web simples, implantá-lo em um servidor e exibir sua apresentação em um browser. A aplicação implanta uma página link:http://www.oracle.com/technetwork/java/javaee/jsp/index.html[+JavaServer Pages+](tm) (JSP) para solicitar que você insira o seu nome. Em seguida, utiliza um componente JavaBeans para manter o nome durante a sessão HTTP e recupera o nome para saída em uma segunda página JSP.


image::images/netbeans-stamp-80-74-73.png[title="O conteúdo desta página se aplica ao NetBeans IDE 7.2, 7.3, 7.4 e 8.0"]


*Para seguir este tutorial, os recursos e softwares a seguir são necessários.*

|===
|Software ou Recurso |Versão Necessária 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE+] |Versão Java EE 7.2, 7.3, 7.4, 8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |versão 7 ou 8 

|GlassFish Server Open Source Edition 
_ou_ 
Contêiner do servlet Tomcat 
_ou_ 
Servidor Oracle WebLogic |4.x 
_ _ 


.x ou 8.x

11gR1 (10.3.3) ou mais recente 
|===

*Observações:*

* A instalação do Java EE (e não do Java SE!) permite instalar opcionalmente o GlassFish Server e o contêiner do servlet Apache Tomcat.
* Se quiser comparar seu projeto com uma solução que funciona, link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+faça download da aplicação de amostra+].


== Configurando um Projeto de Aplicação Web

1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N) no menu principal. Em Categorias, selecione Java Web. Em Projetos, selecione Aplicação Web e clique em Próximo.
2. Na Etapa 2, indique  ``HelloWeb``  na caixa de texto Nome do Projeto.
3. Especifique a Localização do Projeto para qualquer diretório no computador. Para fins deste tutorial, esse diretório é chamado de  ``_$PROJECTHOME_`` .
4. (Opcional) Marque a caixa de seleção Utilizar Pasta Dedicada para Armazenamento de Bibliotecas e especifique o local da pasta de bibliotecas. Consulte link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG366[+Criando Projetos Java+] em _Desenvolvendo Aplicações com o NetBeans IDE_ para obter mais informações sobre essa opção.
5. Clique em Próximo. O painel Servidor e Definições é aberto. Selecione a versão de Java EE que deseja usar com seu aplicação.
6. Selecione o servidor no qual deseja implantar a aplicação. Somente os servidores registrados com o IDE serão listados. Observe que o Caminho de Contexto (ou seja, no servidor) se torna  ``/HelloWeb`` , que se baseia no nome dado ao projeto na etapa anterior.
7. Clique em Finalizar.

O IDE cria a pasta do projeto  ``_$PROJECTHOME_/HelloWeb. ``  Você pode exibir a estrutura de arquivos do projeto na janela Arquivos (Ctrl-2) e sua estrutura lógica na janela Projetos (Ctrl-1):

image::images/projects-window.png[]

A pasta do projeto contém todas as fontes e metadados do projeto, como o script de construção Ant do projeto. O projeto HelloWeb é aberto no IDE. A página de boas-vindas,  ``index.jsp`` , é aberta no Editor de Código-Fonte na janela principal.

*Observação.* Dependendo do servidor e da versão de Java EE especificada quando você criou o projeto, o IDE pode gerar  ``index.html``  como a página de boas-vindas do projeto Web. Você pode executar as etapas deste tutorial e usar o arquivo  ``index.html``  ou pode usar o assistente Novo Arquivo para gerar um arquivo  ``index.jsp``  para usar como a página de boas-vindas, caso você delete o arquivo  ``index.html`` .


== Criando e Editando Arquivos de Origem de Aplicações Web

A criação e edição de arquivos de origem é a função mais importante do IDE. Afinal de contas, é isto o que você faz na maior parte do tempo. O IDE fornece uma ampla variedade de ferramentas que podem complementar o estilo pessoal de qualquer desenvolvedor, tanto se você preferir codificar tudo manualmente quanto se quiser que o IDE gere grandes blocos de código para você.


=== Criando um Pacote Java e um Arquivo de Origem Java

1. Na janela Projetos, expanda o nó Pacotes de Códigos-Fonte. Observe que o nó Pacotes de Código-Fonte contém somente um nó de pacote default vazio.
2. Clique com o botão direito do mouse no nó Pacotes de Código-Fonte e selecione Nova > Classe Java. Indique  ``NameHandler``  na caixa de texto Nome da Classe e digite  ``org.mypackage.hello``  na caixa de combinação Pacote. Clique em Finalizar. Observe que o novo arquivo  ``NameHandler.java``  será aberto no Editor de Código-Fonte.
3. No Editor de Código-Fonte, declare uma variável  ``String``  digitando a linha seguinte diretamente abaixo da declaração da classe.

[source,java]
----

String name;
----


. Adicione o construtor a seguir à classe:

[source,java]
----

public NameHandler() { }
----


. Adicione a linha a seguir no construtor  ``NameHandler()`` :

[source,java]
----

name = null;
----


=== Gerando os Métodos Getter e Setter

1. Clique com o botão direito do mouse no campo  ``name``  do Editor de Código-Fonte e selecione Refatorar > Encapsular Campos.

A caixa de diálogo Encapsular Campos será aberta, listando o campo  ``name`` . Observe que a Visibilidade do Campo é definida por default como privada, e a Visibilidade dos Acessadores como pública, indicando que o modificador de acesso da declaração da variável da classe será especificado como privado, enquanto os métodos getter e setter serão gerados com os modificadores  ``public``  e  ``private`` , respectivamente.

image::images/encapsulatefields-dialog.png[]


. Clique em Refatorar.

Os métodos getter e setter são gerados para o campo  ``name`` . O modificador da variável de classe é definido como  ``private``  enquanto os métodos getter e setter são gerados com modificadores públicos. A classe Java deverá ser semelhante a:


[source,java]
----

package org.mypackage.hello;

/**
 *
 * @author nbuser
 */

public class NameHandler {

    private String name;

    /** Creates a new instance of NameHandler */
    public NameHandler() {
       name = null;
    }

    public String getName() {
       return name;
    }

    public void setName(String name) {
       this.name = name;
    }

}
----


=== Editando o Arquivo JavaServer Pages Default

1. Focalize novamente o arquivo  ``index.jsp`` , clicando em sua guia exibida na parte superior do Editor de Código-Fonte.
2. 
Na Paleta (Ctrl-Shift-8) localizada à direita do Editor de Código-Fonte, expanda Forms HTML e arraste um item Form para um ponto após as tags  ``<h1>``  do Editor de Código-Fonte.

A caixa de diálogo Inserir Form será exibida.


. Especifique os valores a seguir:
* *Ação:* response.jsp
* *Método:* GET
* *Nome:* Form de Entrada de Nome

Clique em OK. Um form HTML será adicionado ao arquivo  ``index.jsp`` .

image::images/input-form.png[]


. Arraste um item Entrada de Texto para um ponto antes da tag  ``</form>`` , em seguida, especifique os seguintes valores:
* *Nome:* nome
* *Tipo:* texto
Clique em OK. Uma tag HTML  ``<input>``  será adicionada entre as tags  ``<form>`` . Delete o atributo  ``value``  dessa tag.


. Arraste um item Botão para antes da tag  ``</form>`` . Especifique os valores a seguir:
* *Label:* OK
* *Tipo:* envio
Clique em OK. Um botão HTML será adicionado entre as tags  ``<form>`` .


. Digite  ``Indique seu nome:``  antes da primeira tag  ``<input>`` , em seguida, altere o texto default  ``Hello World!``  entre as tags  ``<h1>``  para  ``Entry Form`` .


. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. Seu arquivo  ``index.jsp``  agora deverá ser semelhante ao seguinte:

[source,xml]
----

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Entry Form</h1>

        <form name="Name Input Form" action="response.jsp">
            Enter your name:
            <input type="text" name="name" />
            <input type="submit" value="OK" />
        </form>
    </body>
</html>
----


=== Criando um Arquivo JavaServer Pages

1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto HelloWeb e selecione Novo > JSP. O assistente de Novo Arquivo JSF será aberto. Chame o arquivo de  ``response``  e clique em Finalizar. Observe que um nó do arquivo  ``response.jsp``  será exibido na janela Projetos abaixo de  ``index.jsp`` , e o novo arquivo aberto no Editor de Código-Fonte.
2. 
Na Paleta à direita do Editor de Código-Fonte, expanda JSP e arraste um item do Bean de Uso para baixo da tag  ``<body>``  no Editor de Código-Fonte. A caixa de diálogo Inserir Bean de Uso será aberta. Especifique os valores mostrados na figura a seguir.

image::images/usebean-dialog.png[]

* *ID:* mybean
* *Classe: *org.mypackage.hello.NameHandler
* *Escopo:* sessão
Clique em OK. Observe que a tag  ``<jsp:useBean>``  é adicionada abaixo da tag  ``<body>`` .


. Arraste um item Definir Propriedade do Bean da Paleta para um ponto antes da tag  ``<h1>``  e clique em OK. Na tag  ``<jsp:setProperty>``  que aparece, delete o atributo  ``value``  vazio e edite da seguinte forma: Delete o atributo  ``value = ""``  se o IDE o tiver criado! Do contrário, ele substitui o valor de  ``name``  indicado em  ``index.jsp`` .

[source,java]
----

<jsp:setProperty name="mybean" property="name" />
----

Conforme indicado na

documentação de  ``<jsp:setProperty>`` , você pode definir um valor de propriedade de várias formas. Nesse caso, a entrada do usuário que vem de  ``index.jsp``  se torna um par nome/valor que é passado para o objeto  ``request`` . Quando você define uma propriedade usando a tag  ``<jsp:setProperty>`` , pode especificar o valor de acordo com o nome de uma propriedade contida no objeto  ``request`` . Portanto, definindo  ``property``  como  ``name`` , você pode recuperar o valor especificado pela entrada do usuário.


. Altere o texto entre as tags <h1> de forma que ele tenha a seguinte aparência:

[source,xml]
----

<h1>Hello, !</h1>
----


. Arraste um item Propriedade Get Bean da Paleta e solte-o depois da vírgula entre as tags  ``<h1>`` . Especifique os seguintes valores na caixa de diálogo Inserir Propriedade Get Bean:
* *Nome do Bean: *mybean
* *Nome da Propriedade: *nome

Clique em OK. Observe que a tag  ``<jsp:getProperty>``  agora estará adicionada entre as tags  ``<h1>`` .

*Cuidado:* os nomes de propriedade fazem distinção entre maiúsculas e minúsculas. A propriedade "name" deve estar com a mesma colocação de maiúsculas e minúsculas que em  ``response.jsp``  e na forma de entrada em  ``index.jsp`` .


. Clique com o botão direito do mouse no Editor de Código-Fonte e selecione Formatar (Alt-Shift-F) para aprimorar o formato do seu código. As tags  ``<body>``  do seu arquivo  ``response.jsp``  agora devem ser semelhantes ao seguinte:

[source,xml]
----

<body>
    <jsp:useBean id="mybean" scope="session" class="org.mypackage.hello.NameHandler" />
    <jsp:setProperty name="mybean" property="name" />
    <h1>Hello, <jsp:getProperty name="mybean" property="name" />!</h1>
</body>
----


== Executando um Projeto de Aplicação Web

O IDE utiliza um script de construção Ant para construir e executar aplicações Web. O IDE gera o script de construção com base nas opções especificadas no assistente de Novo Projeto, bem como naquelas da caixa de diálogo Propriedades do Projeto (na janela Projetos, selecione Propriedades no menu de contexto do nó do projeto).

1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto HelloWeb e selecione Executar (F6). Quando uma aplicação Web é executado, o IDE executa as seguintes etapas:

* Construção e compilação do código da aplicação (ver observação a seguir). É possível executar essa etapa isoladamente selecionando Construir ou Limpar e Construir no menu de contexto do nó do projeto.
* Inicialização do servidor.
* Implantação da aplicação no servidor. É possível executar essa etapa isoladamente, selecionando Implantar a partir do menu de contexto do nó do projeto.
* View da aplicação em uma janela de browser.

*Observação:* Por default, o projeto foi criado com a funcionalidade Compilar ao Salvar ativado, então, não é necessário compilar o código primeiro para executar a aplicação no IDE.


. O IDE abre uma janela de saída que mostra o andamento da execução da aplicação. Veja a guia HellWeb na janela de Saída. Nessa guia, é possível acompanhar todas as etapas executadas pelo IDE. Se houver um problema, o IDE mostrará as informações do erro nessa janela.

image::images/app-output-tab.png[]


. O IDE abre uma janela de saída mostrando a situação do servidor. Observe a guia na janela de Saída com o nome do servidor.

*Importante:* se a inicialização do GlassFish Server falhar, inicie-o manualmente e execute novamente o projeto. É possível iniciar o servidor manualmente a partir da janela Serviços clicando com o botão direito no nó do servidor e selecionando Iniciar.

A janela de saída do servidor oferece diversas informações sobre os problemas que ocorre ao executar aplicações Web. Os logs do servidor também podem ser úteis. Eles estão localizados no diretório de domínio relevante do servidor. Também é possível exibir o log do IDE, selecionando Exibir > Log do IDE.

image::images/gf-output-tab.png[]


. 
A página  ``index.jsp``  será aberta no browser default. Observe que a janela do browser poderá abrir antes que o IDE exiba a saída do servidor.

image::images/result1.png[]


. 
Indique seu nome na caixa de texto e clique em OK. A página  ``response.jsp``  é exibida com uma simples saudação.

image::images/result2.png[]


== Solução de Problemas

_Construímos e executamos o projeto. Quando clico no botão OK do  ``index.jsp`` , é exibida uma página de erro indicando que  ``response.jsp``  não está disponível._

Você verificou a janela de Saída do IDE (Ctrl-4) na guia do projeto ou na guia do servidor? Quais mensagens de erro existem? Qual JDK seu projeto usa? Qual servidor? O JDK 7 requer o GlassFish 3.x ou o Tomcat 7.x. Clique com o botão direito do mouse no nó do projeto na janela Projetos e selecione Propriedades. O JDK está na categoria Bibliotecas, no campo Plataforma Java. A versão do servidor está na categoria Executar. Finalmente, faça download do link:https://netbeans.org/projects/samples/downloads/download/Samples/Java%20Web/HelloWebEE6.zip[+projeto de amostra+] e compare-o com o seu.

_Construí e executei o projeto, mas nenhum nome é exibido, somente "Hello, !"_

A sua tag <jsp:setProperty> contém um atributo  ``value = ""`` ? Isso substitui o valor indicado no form  ``index.jsp``  por uma string vazia. Delete o atributo  ``value`` .

_Construí e executei o projeto, mas recebo "Hello, null!” como resposta"_

Verifique a aplicação e o servidor e, depois, o log do servidor nas janelas de saída do IDE. O servidor está em execução? A aplicação foi implantada? Se o servidor estiver em execução e a aplicação tiver sido implantada, você está recebendo  ``org.apache.jasper.JasperException: java.lang.NullPointerException?``  Isso geralmente significa que um valor do seu código não foi inicializado corretamente. Neste tutorial, isso significa que provavelmente há um erro de digitação em alguma parte do nome de uma propriedade de seus arquivos JSP. Lembre-se de que os nomes de propriedade fazem distinção entre maiúsculas e minúsculas.

link:/about/contact_form.html?to=3&subject=Feedback:%20Introduction%20to%20Developing%20Web%20Applications[+Enviar Feedback neste Tutorial+]


== Consulte Também

Isso conclui o tutorial Introdução ao Desenvolvimento de Aplicações Web. Este documento demonstrou como criar uma aplicação Web simples utilizando o NetBeans IDE, implantá-la em um servidor e exibir a sua apresentação em um browser. Ele também mostrou como usar JavaServer Pages e JavaBeans na aplicação para coletar, manter e retornar dados do usuário.

Para obter mais informações relacionadas e avançadas sobre o desenvolvimento de aplicações Web no NetBeans IDE, consulte os seguintes recursos:

* link:quickstart-webapps-struts.html[+Introdução ao Struts Web Framework+]. Descreve os conceitos básicos do uso do NetBeans IDE para desenvolver aplicações Web que utilizam o Struts Framework.
* link:../../trails/java-ee.html[+Trilha de Aprendizado do Java EE e Java Web+]