Java para Web no Netbeans 6 – Servlet, JSP & CSS

Java é uma linguagem de programação. Entretanto, quando nos referimos a Java como uma tecnologia estamos tratando de um grande conjunto composto por elementos distintos. Esses elementos de forma generalizada são: Padrões, frameworks e tecnologias. Esses três elementos combinados definem um outro elemento que são as arquiteturas.

Objetivo

Vamos construir um exemplo de aplicação Web onde experimentaremos de perto a complexidade de construir conteúdo dinâmico para Web. Conseqüentemente esbarraremos em algumas questões arquiteturais envolvendo tecnologia do lado cliente, e servidor. Veremos uma das soluções Java para este cenário.

Temos o arquivo Index.jsp, ele define a participação da tecnologia JSP na nossa arquitetura. Neste arquivo definiremos um formulário (objeto http form) que enviará dados para uma classe servlet a qual processará esses dados.

A tecnologia Java tem uma abordagem própria para desenvolvimento Web. Basicamente, quando você ouve falar em Java para Web invariavelmente escutará associado a esta idéia duas tecnologias: Servlet e JSP. Digo basicamente, porque as duas não são absolutas neste contexto. Existem outras, as quais vermos mais adiante, que cujo a utilização, quando feita adequadamente, pode oferecer para o desenvolver um ganho satisfatório.

A tecnologia Servlet desempenha um papel muito importante neste cenário, vamos neste artigo desenvolver um pequeno exemplo de uma aplicação Web em Java usando explicitamente a tecnologia Servlet. Meu principal objetivo e experimentar o Netbeans 6 para esse fim, durante esse processo pretendo tocar em pontos de importância básica pertinentes ou tema que escolhi inicialmente. Portanto, prossigamos:

Inicie um novo projeto Web no Netbeans 6 (Veja em “Um novo Projeto no Netbeans 6.”).

Entendendo um projeto Web Java

Veja na janela “Projects” (Project explorer vou chamar assim ...) , os diversos elementos que compõem o nosso projeto. Eles ficam organizados e dispostos numa estrutura hierarquizada de diretórios que são representados por uma Tree View a qual fornece acesso aos arquivos contidos por cada diretório.

O Diretório “Web Pages” é o principal, a raiz, de uma aplicação Java Web convencional. Contidos nele temos um arquivo index.jsp (que define a home page do site, por exemplo), além do diretório “WEB-INF” o qual contém o arquivo descritor de deploy (deployment descriptor), web.xml.

“Configuration Files”, é o diretório onde ficam todos os arquivos referentes a configurações da aplicação web.

“Source Packages”, velho conhecido, onde devem ficar todos os pacotes, classes Java e Servlets (obviamente, que serão criados durante o desenvolvimento da aplicação web).

“Test Package”, para testes unitários.

As bibliotecas ficam em “Libraries”, exceto as que forem necessárias aos testes que devem ficar em “Tests Libraries” (por default as bibliotecas do Junit 3.8.2 e 4.1 já serão adicionadas nesta pasta).

Usando CSS

Vou criar um arquivo CSS o qual usarei neste exemplo. Para armazená-lo, vou criar um novo diretório dentro de “Web Pages”, a este chamarei de “ZnCss”. Com o botão direito do mouse, na treeview do project explorer, sobre a pasta “Web Pages” selecione New ► Folder, conforme ilustração abaixo:

O Netbeans, através do assistente vai auxiliar este trabalho. Em “Folder Name” digite o nome desejado para o novo diretório. Note que, você pode também definir a hierarquia desse novo diretório em “Parent Folder”. Para completar a criação do diretório click em “Finish”.

Para criar o arquivo CSS, selecione, com o botão direito do mouse no novo diretório, a opção New ►Other, para acessar o assistente. Em seguida, dentre as opções listadas, na categoria “Web”, selecione “Cascading Style Sheet”. Click em “Next” para continuar a criação do arquivo CSS.

Em “CSS File Name” digite o nome do arquivo: “ZnCSSlandjah”. Veja que “Location” e “Folder” já estão definidos em decorrência de termos selecionado o diretório “ZnCss”.

Click em “Finish” e seu arquivo será criado. Esse foi meu primeiro contato com o editor de CSS do Netbeans 6, gostei! Basta você digitar a classe, ou tag que deseja redefinir, e intuitivamente é possível usar os recursos da IDE para edição de CSS.

O Preview lhe permite em tempo de design ver o efeito do css que você está editando.

A seguir o código do meu css

/*
Document   : ZnCSSlandjah
Created on : 22/09/2008, 10:59:57
Author     : Gmotta Zn
Description:
 Purpose of the stylesheet follows.
*/

div{
font-family: Cosmic Sans, Veranda,Tahoma;
font-size: 14px;
background-color: #330099;
color: #ccff99;
font-weight: bolder;
text-align: center;

}

Editando o arquivo Index.jsp

Quando iniciamos um projeto Web no Netbeans ele define no deployment descriptor qual o arquivo será executado quando o Glass Fish atender uma requisição cliente chamando a URL do seu serviço. Esse arquivo, por default é o Index.jsp. Você pode alterar isso no o arquivo “web.xml” (basta um duplo click sobre o arquivo, ou com o botão direito selecione “Open”), pela IDE na aba “Pages”.

Na tag “head” do arquivo “Index.jsp” vou linkar o CSS “ZnCSSlandjah.css”.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-    8">
<title>Estação ZN - Nova JSP Page</title>
<link href="ZnCss/ZnCSSlandjah.css" rel="stylesheet"   type="text/css">

O próximo passo será adicionar um “form” para postar dados para efetuarmos um processamento qualquer no servidor. Na janela “Palhette” (provavelmente ela deve estar no lado direito da IDE), selecione em “HML Forms” um objeto “Form”, click sobre ele e arraste para um local, entre a abertura e o fechamento da tag “body”. Em seguida prossiga com o assistente.

Em “Action” vou digitar “ZnLandjha” (esse vai ser o nome do Servlet que criarei posteriormente), o “method” selecione "POST".

O Editor no Netbeans é sensacional, veja um code insigth para HTML muito bom.

Agora, o “body” da minha página jsp está assim: (indexJSP.txt)

<body>
 <h2> Estação ZN - Servlets </h2>
 <h3> GlassFish <h3>
 <div>
   www.estacaozn.blogspot.com
 </div>
 <br>

 <form name="form1" action="ZnLandjha" method="POST">

 </form>
</body>

OBS: Na tag "div" pretendo aplicar o efeito do CSS ...

Vou adicionar um objeto HTML “Table” na minha página aonde pretendo colocar os “inputs”. Depois de editar o código, digite conforme ilustrado abaixo:

<%--
Document : index
Created on : 18/09/2008, 03:25:39
Author : GMotta Zn
--%>
<%@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">
   <title>Estação ZN - Nova JSP Page</title>
   <link href="ZnCss/ZnCSSlandjah.css" rel="stylesheet"
type="text/css">

  </head>
<body>
<h2> Estação ZN - Servlets </h2>
<h3> GlassFish <h3>
<div>
   www.estacaozn.blogspot.com
</div>
<br>

<form name="form1" action="ZnLandjha" method="POST">
<div>
 <table border="0" cellpadding="1">
   <tbody>
     <tr>
       <td>
         Digite o Nome:
       </td>
       <td>
         <input type="text" name="znBla" value="Bla!"
          size="32" />
       </td>
     </tr>
     <tr>
       <td>
         <input type="submit" value="Ok Zn" name="btnEnviar"
         />
       </td>
       <td>
         Netbeans 6 - Servlet, JSP & CSS
       </td>
     </tr>
   </tbody>
 </table>
</div>
</form>
</body>
</html>

Criando o Servlet

Com o botão direito do mouse no que eu chamo de “Project Explore”, selecione a opção: New ►Servlet

O Nome da Classe servlet vai ser “ZnLandjha”. Note que o assistente já define pra você o projeto (Project: AppWebServletsZN, não editável) e o diretório (Location: Source Pakcages) onde será criado o arquivo onde está defina a classe que vamos codificar. Ainda não definimos uma package para nosso projeto, isso deverá ser feito neste momento. Digite “ZnWebLandjahPkg” em Pakcage. Veja ilustração abaixo:

Clicando em “Next” você pode configurar a URL de chamada ao seu servlet mediante ao valor digitado em “URL Pattern(s):”. Todas as informações definidas precisam ser persistidas no “Deployment Descriptor”, o arquivo “web.xml”. Portanto, a opção “Add information to deployment descriptor” deve ficar selecionada. Logo, vou deixar tudo como está neste diálogo e finalizar aqui. Click em “Finish”.

Codificando o Servlet “ZnLandjha”

package ZnWebLandjahPkg;

import java.io.*;
import java.net.*;
import java.util.Iterator;
import javax.servlet.*;
import javax.servlet.http.*;

/**
 * @author GMottaZn
 */
public class ZnLandjha extends HttpServlet {
   
    protected void processRequest(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        String znBla = request.getParameter("znBla");
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        try {            
            out.println("<html>");
            out.println("<head>");
            out.println("<title>Servlet ZnLandjha</title>"); 
            out.println("<link href=ZnCss/ZnCSSlandjah.css rel=stylesheet type=text/css>");
            out.println("</head>");
            out.println("<body>");
            out.println("<h1>Servlet ZnLandjha at " + request.getContextPath 
() + "</h1> <br>");
            out.println("<h4> Você Digitou: " + znBla + "</h4> <br>");
            out.println("<div> Ivertendo temos: " + inverterZn(znBla)+ "</div>");
            out.println("</body>");
            out.println("</html>");
            
        } finally { 
            out.close();
        }
    }
    
    protected String inverterZn(String znValue){    
      StringBuffer znAux = new StringBuffer(znValue);
      znAux.reverse();
      return znAux.toString(); 
    };

    // <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
    /** 
    * Handles the HTTP <code>GET</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    } 

    /** 
    * Handles the HTTP <code>POST</code> method.
    * @param request servlet request
    * @param response servlet response
    */
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
        processRequest(request, response);
    }

    /** 
    * Returns a short description of the servlet.
    */
    public String getServletInfo() {
        return "Short description";
    }
    // </editor-fold>
}

Até que em fim um pouco de código Java. Analisado o código acima:

Linha 1: referência ao pacote (package).

Linha 3 – 7: importação de bibliotecas.

Linha 9-11: Comentário para documentação.

Linha 12- 71: Codificação da classe “ZnLandjha”, que estende de “HttpServlet” (Superclasse para Servlet). A classe “HttpServlet” estende a classe javax.servlet.GenericServlet. Ela acrescenta os métodos “doXXXX” que são executados mediante as requisições “http”. “doGet”, “doPost”, “doPut”, “doDelete”, “doOption” e “doTrave”. Cada um desses métodos são chamados em resposta a um método http evocado. Exemplo: O método “doGet” é executado quando o Servlet recebe uma requisição (de uma página que submeteu um “form”) que foi enviada ao servidor web (por exemplo, o Glass Fish) usando o método http “GET”.

Linha 16: Recebendo do “Form” postado (do lado cliente) o valor do objeto “input” cujo nome é "znBla" (O qual foi definido no arquivo “Index.jsp”).

Linha 19-34: Dentro de um bloco protegido (try...), monta a página para saída dos valores processados pelo Servlet “ZnLandjha”.

Linha 28: Saída do valor processado pelo método protegido que codificamos “inverterZn”.

Linha 37-41: Método protected “inverterZn”, responsável pela inversão da string digitada pelo cliente. A inversão está sendo efetuada na linha 39, pela execução do método “reverse”. Na linha 40 uso o método “toString” para poder atribuir o valor de “znAux”, que é do tipo “StringBuffer”, para String e dessa forma posso retornar o valor invertido no método em questão.

Agora vamos fazer o deploy da nossa aplicação, com o botão direito sobre a raiz do projeto no “project explorer”, selecione “Undeploy and Deploy”.

Testando aplicação criada

Para testar basta pressionar F6, ou na barra de ferramentas click sobre o triângulo verde.



O browser vai ser executado ...



Digite alguma coisa na caixa de texto e submeta ...



O Servlet processou a requisição ...




Fontes deste artigo