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

Conteúdo

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
NetBeans IDE Versão Java EE 7.2, 7.3, 7.4, 8.0
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
 
7.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, 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 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):

    Estrutura lógica do projeto HelloWeb exibida na janela Projetos

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.
    String name;
  4. Adicione o construtor a seguir à classe:
    public NameHandler() { }
  5. Adicione a linha a seguir no construtor NameHandler():
    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.

    Caixa de diálogo Encapsular Campos
  2. 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:

    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.

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

    Caixa de diálogo Form de Entrada
  4. 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.
  5. 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>.
  6. Digite Indique seu nome: antes da primeira tag <input>, em seguida, altere o texto default Hello World! entre as tags <h1> para Entry Form.
  7. 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:
    <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.

    Caixa de diálogo Bean de Uso contendo os campos especificados
    • ID: mybean
    • Classe: org.mypackage.hello.NameHandler
    • Escopo: sessão
    Clique em OK. Observe que a tag <jsp:useBean> é adicionada abaixo da tag <body>.
  3. 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.
    <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.

  4. Altere o texto entre as tags <h1> de forma que ele tenha a seguinte aparência:
    <h1>Hello, !</h1>
  5. 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.

  6. 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:
    <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.

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

    Janela de saída do NetBeans IDE para executar a aplicação Hello da Web
  3. 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.

    Janela de saída do NetBeans IDE para o GlassFish 3 Server, ao executar a aplicação Hello Web
  4. 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.

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

    response.jsp exibido no browser

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


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:

get support for the NetBeans

Support


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