Temos dois tipos de projeto Web disponíveis no Eclipse, o dynamic web project e o static web project. A diferença entre ambos é que o dynamic, como o próprio nome diz, possibilita o uso de recursos do J2EE que tornam o site dinâmico, como servlets, arquivos JSP, filtros e metadados associados, além de recursos disponíveis para sites do tipo static. Este tipo de projeto web suporta apenas tecnologias padrão, como imagens, páginas HTML, CSS e afins.

Projetos dynamic estão sempre encapsulados em um projeto do tipo Enterprise Application Project (EAR), e o assistente de criação de um projeto dynamic sempre cria um projeto EAR caso este não exista. O assistente também atualiza o descritor de distribuição do projeto EAR para definir o novo Web Project como um elemento do módulo.

Criando um novo projeto com o assistente

Com o Eclipse aberto vá em File > New > Project. A janela abaixo será mostrada:

Criando um site dinâmico

Na lista selecione a opção Web > Dynamic Web Project e clique no botão Next.

Criando um site dinâmico

A janela abaixo será mostrada.

Criando um site dinâmico

Você deverá informar as definições do projeto, a saber:

  • Project name: é o nome do projeto, no nosso caso será Projeto01;
  • Project Contents: é o diretório de destino dos arquivos do projeto. Mantendo a opção Use Default marcada faz com que o Eclipse salve as informações no workspace atual, desmarcando permite escolher outro destino. No nosso caso manteremos a opção Use Default marcada;
  • Target Runtime: é o servidor de aplicação a ser usado para rodar o projeto. Em nosso caso vamos adicionar um novo servidor, clicando no botão New. A janela abaixo será mostrada:
  • Criando um site dinâmico

    Selecione o Apache Tomcat v5.5 e clique em Next. Você deverá informar o diretório raiz de instalação do Tomcat, um nome para o servidor e qual a JRE a usar, como na figura abaixo. Feito isso clique em Finish;

    Criando um site dinâmico
  • EAR Membership: caso o projeto vá fazer parte de um projeto do tipo EAR já existente marque a opção add project to an EAR e selecione o projeto na caixa de combinação abaixo. No nosso caso, como falamos ao Eclipse que nosso projeto vai rodar direto no servidor de aplicações, a opção é desabilitada e um novo projeto EAR será criado automaticamente, com o nome de nosso projeto principal, como pode ser visto na imagem abaixo:
  • Criando um site dinâmico

    Com tudo definido clique em Finish para iniciar a criação de nosso projeto. Caso seja aberta uma janela com um contrato de licença da Sun apenas clique em Accept. É interessante prestar atenção no topo da página pois nela serão mostradas dicas em caso de problemas. Abaixo você pode ver uma dica, que diz que o nome do projeto não pode estar em branco.

    Criando um site dinâmico

Entendendo a estrutura de diretórios criada

O Eclipse irá criar automaticamente a estrutura de diretórios e arquivos de nosso projeto, como abaixo:

Criando um site dinâmico

Esta estrutura é definida pela J2EE, no documento Sun Microsystems Java™ Servlet 2.5 Specification, aonde toda a estrutura de uma aplicação web é detalhada, definindo a localização de páginas web, arquivos class, caminhos, descritores de distribuição e outros mais.

A pasta principal (no nosso caso Projeto01) contém todos os artefatos relacionados a nossa aplicação web e dentro dela encontramos diversos elementos, descritos a seguir. É importante ressaltar que esta estrutura de pastas mapeia a estrutura de um arquivo de aplicação web (Web application archive – WAR), definido também pela Sun Microsystems.

A edição deste arquivo, no Eclipse, é feito através de uma interface gráfica, bastando clicar sobre Deployment Descriptor: Projeto01, no project explorer.

Criando um site dinâmico
  • Java Resource (src): Contém o código fonte Java de servlets, classes e beans. O conteúdo deste diretório não é adicionado automaticamente ao WAR que for gerado, apenas se for implicitamente adicionado quando o WAR for criado. Os arquivos deste diretório são compilados diretamente no diretório WEB-INF/classes, em WebContent;
  • WebContent: Diretório principal, aonde encontramos todos os recursos de web, como páginas, arquivos gráficos e afins. Também ficam aqui os arquivos JSP. Dentro dela encontramos as pastas META-INF e WEB-INF.

Em META-INF encontramos o arquivo MANIFEST.MF, que é usado para mapear caminhos de classes que sejam dependências de nosso projeto. Em WEB-INF temos o diretório lib, aonde devem ser colocadas bibliotecas que sejam necessárias a aplicação.

Na guia Servers (caso não esteja disponível clique em Window à Show View à Servers ou Window à Show View à Other à Server à Servers) clique com o botão de atalho do mouse e selecione a opção New à Server.

Criando um site dinâmico

O assistente de novo servidor será mostrado, como na figura abaixo. Ele já virá com o servidor selecionado na criação do projeto selecionado.

Criando um site dinâmico

Clique em Next. Será mostrada uma janela para que adicione o seu projeto ao servidor. Basta, para isso, selecionar o projeto na lista e clicar no botão Add, como mostra a figura abaixo:

Criando um site dinâmico

Clique em Finish, o projeto será adicionado ao servidor e ficará aguardando ser publicado, como pode ser visto abaixo:

Criando um site dinâmico

Adicionando código

Com o projeto criado e adicionado ao servidor de aplicação podemos começar a codificar. Para isso clique com o botão de atalho sobre o diretório WebContent e selecione a opção New > JSP. Será aberta uma janela para digitar o nome do arquivo, que deverá ser index.jsp, e depois clique em Finish. O Eclipse irá criar um arquivo com o conteúdo abaixo:

<?xml version="1.0" encoding="UTF-8" ?>
<Context>
<Resource name="jdbc/banco01" auth="Container" type="javax.sql.DataSource" username="mfcastellani"
password="senha" driverClassName="org.apache.derby.jdbc.ClientDriver" 
url="jdbc:derby://localhost:1527/banco01" maxActive="8">
</Resource>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>

Vamos adicionar um código simples, que mostrará a data e hora. A página, editada, ficará como abaixo (o código em negrito é o novo código):

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!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=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<% java.util.Date d = new java.util.Date(); %>
Hoje é <%= d.toString() %> e a página funcionou corretamente.
</body>
</html>

Salve a página clicando em File > Save e vá até a view servers. Clique com o botão de atalho do mouse sobre o nosso servidor, adicionado acima, e, no menu de contexto, selecione a opção Publish. Esta opção “publica” os arquivos no servidor, atualizando o diretório virtual com as modificações feitas. O estado deverá mudar para Synchronized.

Novamente, clique com o botão de atalho do mouse sobre nosso servidor e selecione a opção Start para iniciar o serviço Tomcat. É importante que o mesmo não esteja iniciado, do contrário ocorrerá um erro dizendo que a porta já está em uso. Você poder verificar se o serviço está iniciado através do painel de controle do Windows. O estado deverá mudar para Started.

Criando um site dinâmico

A página está no ar. Abra o seu navegador e vá em http://localhost:8080/Projeto01/. A página abaixo será mostrada:

Criando um site dinâmico

Caso as coisas não funcionem como esperado vá até a view Console para ver o log do Tomcat. Você também encontra alguns logs úteis em C:\Arquivos de programas\Apache Software Foundation\Tomcat 5.5\logs.