Tutorial Desenvolvimento de Aplicaes WEB no Eclipse

Professor Hildeberto Melo ndice

Configuraes................................................................................................................... 2 Iniciando o Eclipse ........................................................................................................... 2 Tela principal do Eclipse .................................................................................................. 3 Criando um novo projeto.................................................................................................. 3 Adicionando arquivos ao projeto...................................................................................... 7 Executando a aplicao .................................................................................................. 11 Editando os arquivos do projeto ..................................................................................... 13 Demonstrando como funciona a passagem de valores entre formulrios ...................... 15 Exerccio......................................................................................................................... 17 Abrindo o projeto no Eclipse.......................................................................................... 17 Gerando o arquivo para publicao no Servidor de Web............................................... 19 Criando arquivo para ser publicado no Tomcat.............................................................. 21 Publicando o projeto no Tomcat..................................................................................... 23

ndice de Figuras
Fgura 1 Tela de escolha do workspace do Eclipse .......................................................... 2 Fgura 2 Tela principal do Eclipse.................................................................................... 3 Fgura 3 Criando um projeto Dynamic Web Project........................................................ 4 Fgura 4 Tela com as informaes do projeto .................................................................. 5 Fgura 5 Mostrando o projeto recm criado ..................................................................... 6 Fgura 6 Mostrando os arquivos e pastas do projeto ........................................................ 7 Fgura 7 Adicionando arquivos ao projeto ....................................................................... 8 Fgura 8 Informando o nome do arquivo jsp .................................................................... 9 Fgura 9 Escolhendo o template do arquivo jsp ............................................................. 10 Fgura 10 apresentao do cdigo fonte do arquivo jsp ................................................. 10 Fgura 11 Executando a aplicao .................................................................................. 11 Fgura 12 Escolhendo o servidor para executar a aplicao........................................... 12 Fgura 13 Aplicao sendo executa dentro do Eclipse ................................................... 13 Fgura 14 Passando informaes de um formulrio para o outro................................... 14 Fgura 15 Recebendo informaes de outro formulrio................................................. 15 Fgura 16 Executando a aplicao com passagem de valores de um formulrio para o outro................................................................................................................................ 16 Fgura 17 Recebendo as informaes passadas por outro formulrio ............................ 17 Fgura 18 Importanto projeto no Eclipse........................................................................ 17 Fgura 19 Importando projeto no Eclipse - Escolhendo projetos no workspace ............ 18 Fgura 20 Importando projeto no Eclipse finalizando a importao ........................... 19 Fgura 21 Iniciando o monitor Tomcat........................................................................... 20 Fgura 22 Iniciando o Tomcat na barra de tarefas do sistema operacional .................... 20 Fgura 23 Browser com o Tomcat ativo ......................................................................... 21 Fgura 24 Exportando projeto no eclipse........................................................................ 21 Fgura 25 Exportando projeto war file ........................................................................... 22

Fgura 26 Exportando war file local de exportao........................................................ 22 Fgura 27 Publicando o projeto - Administrador Tomcat............................................... 23 Fgura 28 Publicando o projeto - escolhendo o arquivo a ser publicado........................ 23 Fgura 29 Projeto publicado no Tomcat ......................................................................... 24 Fgura 30 Projeto executando no Tomcat....................................................................... 24

Configuraes
Vamos comear com a instalao do JDK(Java Development Kit), necessrio ter instalado o JDK no computador para podermos comearmos a trabalhar com desenvolvimento em Java. Baixar o JDK Instalar o JDK no computador Baixar o Eclipse com suporte a desenvolvimento de aplicaes Web, eclipse com suporte JEE(Java Enterprise Edition). Aps baixar o Eclipse, descompact-lo no diretrio c:\eclipse, o eclipse no possui instalador, ele roda direto no exe.

Iniciando o Eclipse
Aps clicar no cone do Eclipse, ir aparecer a figura 1, no qual apresentada a opo de escolher o workspace do Eclipse, no local escolhido para o workspace ser criada uma pasta .metadata, nela conter as informaes e configuraes do Eclipse.

Fgura 1 Tela de escolha do workspace do Eclipse

Tela principal do Eclipse

Ao ser iniciado o Eclipse apresenta sua interface de desenvolvimento, mostrado na Figura 2. Na parte superior apresentada a barra de menus. No canto esquerdo temos a guia dos projetos e seus respectivos arquivos (Porject Explore). Na parte central sero mostrados os arquivo em utilizao pelo programador. Na parte inferior, informaes sobre servidores, propriedades, console, etc.

Fgura 2 Tela principal do Eclipse

Criando um novo projeto

Para criarmos uma aplicao no qual ir rodar na Web, simples, basta acessar o menu:New - Dynamic Web Project.

Fgura 3 Criando um projeto Dynamic Web Project

Aparecer uma tela que o programador colocar as informaes do projeto, o nome do projeto, o diretrio onde o projeto ser criado, e demais informaes. Conforme mostrado na Figura 4.

Fgura 4 Tela com as informaes do projeto

Aps a configurao da criao do projeto, a interface de desenvolvimento ir apresentar o projeto recm criado na paleta do Project Explore. Conforme mostra a Figura 5 abaixo:

Fgura 5 Mostrando o projeto recm criado

Ao clicar no projeto ser listado arquivos que fazem parte do seu projeto, arquivos .java, .jsp, .html, etc. Cada arquivo pertencer a um local devidamente especificado.

Fgura 6 Mostrando os arquivos e pastas do projeto

Adicionando arquivos ao projeto

Vamos adicionar o primeiro arquivo ao projeto, o referido arquivo ser do tipo jsp. Para tal necessrio clicar com o boto direito do mouse, opo new jsp, conforme mostrado na figura 7 abaixo.

Fgura 7 Adicionando arquivos ao projeto

Aps selecionar o tipo de arquivo a ser criado no projeto, que neste caso foi um arquivo jsp, aparecer uma tela onde o programador ir informar o nome do arquivo. Os arquivos do tipo jsp so criados dentro da pasta WebContent. Este passo demonstrado na Figura 8.

Fgura 8 Informando o nome do arquivo jsp

Aps informar o nome no arquivo a ser criado, no caso o arquivo foi ndex.jsp, o programador escolher o template do arquivo. Vamos escolher o template New JSP File (HTML) Conforme mostra a Figura 9.

Fgura 9 Escolhendo o template do arquivo jsp

Conforme mostrado na Figura 10, aparecer o cdigo fonte do arquivo ndex.jsp, O Eclipse cria para o programador apenas uma estrutura bsica de arquivo JSP para que o programador poder alterar, colocando cdigos em HTML ou at mesmo em Java.

Fgura 10 apresentao do cdigo fonte do arquivo jsp

Executando a aplicao
Para executarmos a aplicao muito simples, basta ir no menu run run, mostrado abaixo na Figura 11.

Fgura 11 Executando a aplicao

Na Figura 12 mostra as opes de servidores no qual sua aplicao poder executada, neste caso vamos escolher a opo Basic J2EE Preview e rodar no servidor do prprio Eclipse.

Fgura 12 Escolhendo o servidor para executar a aplicao

Na Figura 13 mostra sua aplicao rodando dentro do prprio Eclipse, neste caso o Eclipse abre uma nova guia junto a guia do arquivo ndex.jsp. neste caso no apareceu informaes na janela, pois ainda no editamos o arquivo ndex.jsp.

Fgura 13 Aplicao sendo executa dentro do Eclipse

Editando os arquivos do projeto

Editaremos o arquivo ndex.jsp e colocaremos no mesmo um formulrio, uma caixa de texto e um boto. Configuraremos o formulrio com as seguintes caractersticas: action = receberInformacao.jsp, neste caso quando o formulrio for enviado ele procurar o arquivo receberInformao.jsp. No method = get o formulrio ser enviado via GET. O boto colocado no formulrio, ao ser clicado enviar o formulrio. Tudo isto mostrado na Figura 14.

Fgura 14 Passando informaes de um formulrio para o outro

Coloque mais um arquivo do tipo jsp no projeto, este arquivo dever ter o nome de receberInformacao.jsp. O mesmo nome no qual o formulrio, que est no arquivo ndex.jsp. No arquivo receberInformacao.jsp vamos colocar um trecho de cdigo em Java, que tem por finalidade de receber as informaes passadas pelo formulrio ndex.jsp. No formulrio do arquivo ndex.jsp tem um caixa de texto que possui o nome de edNome. O cdigo em java request.getParameter(edNome) pega as informaes que o usurio digitou na caixa de texto.

Fgura 15 Recebendo informaes de outro formulrio

Demonstrando como funciona a passagem de valores entre formulrios

A Fgura 16 mostra a aplicao rodando com o arquivo ndex.jsp na janela de execuo no Eclipse. Neste caso o usurio informar um nome qualquer na caixa de texto e depois clicar no boto.

Fgura 16 Executando a aplicao com passagem de valores de um formulrio para o outro

A Figura 17 mostra o arquivo receberInformacao.jsp na janela de execuo no Eclipse e apresentando o que foi informado pelo usurio, na caixa de texto do arquivo ndex.jsp

Fgura 17 Recebendo as informaes passadas por outro formulrio

Exerccio
Modificar os arquivos do projeto, no arquivo ndex.jsp criar uma tela de cadastro de aluno, que possua as seguintes informaes: nome, matrcula, data de nascimento, filiao, endereo completo. No arquivo receberInformacao.jsp apresentar as informaes que foram digitas pelo usurio.

Abrindo o projeto no Eclipse

Para abrirmos um projeto no Eclipse temos que seguir os seguintes passos: 1. Colocar a pasta do seu projeto no workspace do eclipse 2. Ir no menu file import

Fgura 18 Importanto projeto no Eclipse

3. Escolher a opo General Existing Projects into Workspace

Fgura 19 Importando projeto no Eclipse - Escolhendo projetos no workspace

4. Escolher a pasta do projeto e clicar no boto Finish

Fgura 20 Importando projeto no Eclipse finalizando a importao

Gerando o arquivo para publicao no Servidor de Web

Primeiramente temos que instalar um servidor de web, escolheremos o servidor de web Tomcat. Este servidor apropriado para rodar aplicaes em Java. Para instal-lo basta fazer o download do mesmo na web, ele gratuito. Sua instalao simples, basta seguir o wizard do mesmo. Depois de instalado v no Menu iniciar e Escolha a opo do monitor do Tomcat, conforme mostra na Figura 21 abaixo.

Fgura 21 Iniciando o monitor Tomcat

Depois de iniciar o monitor Tomcat, ir aparecer o cone do mesmo na barra de tarefas, conforme Figura 22, s escolher a opo Start service, para podermos comear a trabalhar com o mesmo, isto ir habilitar e dar acesso as principais funcionalidades do servidor.

Fgura 22 Iniciando o Tomcat na barra de tarefas do sistema operacional

Agora vamos abrir o browser e colocar o seguinte endereo HTTP:\\localhost:8080, se estiver tudo certo dever aparecer as informaes da Figura 23 no browser.

Fgura 23 Browser com o Tomcat ativo

Criando arquivo para ser publicado no Tomcat

Para podermos publicarmos nossa aplicao, que foi desenvolvida no Eclipse, no Tomcat, temos que seguir os seguintes passos: acessar o menu file export, conforme mostra a Figura 24.

Fgura 24 Exportando projeto no eclipse

Conforme mostra a Figura 25, escolher a opo de exportar como Web war file.

Fgura 25 Exportando projeto war file

Neste passo, escolher o projeto e o local onde ser criado o arquivo do tipo .war.

Fgura 26 Exportando war file local de exportao

Publicando o projeto no Tomcat

Para publicarmos o projeto no Tomcat, temo que escolher a opo Administration Tomcat Manager

Fgura 27 Publicando o projeto - Administrador Tomcat

Ir aparecer a tela de gerenciamento dos projetos que esto publicados no Tomcat. Para publicar um projeto, temos que ir na opo WAR file to deploy, escolher o arquivo do tipo .war e depois clicar no boto Deploy.

Fgura 28 Publicando o projeto - escolhendo o arquivo a ser publicado

Aps feito isso o projeto ir aparecer no Tomcat, basta clicar no nome do projeto para dar incio ao seu uso.

Fgura 29 Projeto publicado no Tomcat

Para acessar seu projeto basta colocar o seguinte endereo http://localhost:8080/ProjetoTeste_/, lembrando que o servidor de Web Tomcat tem que estar ativo para que ele funcione.

Fgura 30 Projeto executando no Tomcat