Tutorial Java WEB - aas.pro.br · Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo na construção de um site que contem um layout formatado com CSS e

ANTONIO ANDRADE www.aas.pro.br

Material de apoio a aulas de Desenvolvimento Web

Tutorial Java WEB JSP & HTML & CSS & CLASSE & OBJETOS

AAS - www.aas.pro.net

Março-2012

Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo na construção de um site que contem um layout formatado com CSS e a utilização de classe personalizada através da tecnologia JSP.


Tutorial de apoio a aulas de Desenvolvimento Web

Página 2 de 15

Sumário Cliente HTML e CSS com JSP no lado Servidor ................................................................................................... 3

1. Criando Projeto ...................................................................................................................................................... 3

2. Criando diretório .................................................................................................................................................... 4

3. Execução (com erro) .............................................................................................................................................. 5

4. Criando o MENU (HTML)........................................................................................................................................ 6

5. Criando Layout (CSS) .............................................................................................................................................. 7

6. Criando uma CLASSE no projeto ............................................................................................................................ 9

7. Usando uma classe personalizada no JSP ........................................................................................................... 12

8. O Objeto Request ................................................................................................................................................. 14

9. Resultado Final ..................................................................................................................................................... 15



Página 3 de 15

Cliente HTML e CSS com JSP no lado Servidor

Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo na construção

de um site que contem um layout formatado com CSS e a utilização de classe personalizada

através da tecnologia JSP.

Contudo, temos em um único exemplo que observar o seguinte:

HTML como front-end;

CSS fazendo toda parte de formatação do layout do site.

Auxilio de classes na construção do site.

1. Criando Projeto

1.1. Arquivo / Novo Projeto (Ctrl+Shift+N):

Aqui você poderá apontar o diretório do projeto para outro drive (pen-drive por exemplo).

Preencha os dados do nome e local do projeto e clique em “Próximo”.

Escolha o servidor e a versão do Java e clique em “Finalizar”.



Página 4 de 15

2. Criando diretório

Serão criados diretórios para melhor organizar os arquivos no site.

Criaremos um diretório para armazenar os arquivos de formatação CSS e outro para

armazenar as imagens utilizadas.

2.1. Para criar um diretório, clique com botão direito em “Páginas Web”, que é onde queremos

criar o diretório):

Aparecerá uma tela onde deverá ser informado o nome do diretório a ser criado. Digite

Formularios (sem acentuação), observe o campo “Pasta pai:” e clique “Finalizar”:

2.2. Aproveitando, crie também um diretório chamado “Imagens” na pasta pai web.

2.3. Agora, coloque o código no arquivo index.jsp que foi criado automaticamente, conforme

tela abaixo:



Página 5 de 15

3. Execução (com erro)

3.1. Se executarmos o projeto neste ponto receberemos uma tela de erro, porque o index agora

está fazendo referência à alguns arquivos que ainda não existem no projeto. Para

obtermos uma tela de erro personalizada (como na figura abaixo), teremos que criar uma

página de tratamento de erros, conforme exemplificado no tutorial 04-20.



Página 6 de 15

4. Criando o MENU (HTML)

4.1. Vamos criar o primeiro arquivo que o projeto está solicitando. O menu.html. O processo

para criação de arquivos é sempre o mesmo. Você clica com o botão direito sobre o

diretório que deseja criar o arquivo, clica em Novo e depois escolhe o tipo de arquivo

desejado.

Neste exemplo, vamos criar um html:

Depois é só alterar o código fonte do HTML conforme figura abaixo:

4.2. Da mesma forma que o menu, crie agora o arquivo conteudo.html. Digite algum conteúdo

para termos uma página de entrada (como no exemplo abaixo). Futuramente nesta tela,

você poderá dar as boas vindas ao seu site.



Página 7 de 15

4.3. Resultado de execução. Note que o site já pode ser executado. No entanto, não existe

layout. Nenhuma formatação. Vejamos:

5. Criando Layout (CSS)

Pelo visto anteriormente, o site está com uma aparência muito amadora. Necessita de um

toque proficional de design para melhorar a aparência e interface com o usuário.

5.1. Observem alguns detalhes da página index (criada mais acima):

5.1.1. No cabeçalho está sendo vinculado um arquivo de formatação CSS (externo).

5.1.2. Todo layout é formatado com DIVs. Vejamos na figura abaixo:



Página 8 de 15

5.2. Vamos então criar o arquivo CSS para definição do layout e formatação da página index.

Clique com botão direito na pasta criada especificamente para este fim, Novo / Folha de

estilo em cascata...(estilo.css):

Verifique se está tudo correto e clique em “Finalizar”.

5.3. O arquivo CSS:



Página 9 de 15

5.4. Executando, veremos agora uma tela bem mais agradável, através do CSS acima e das

definições do modelo no index através da tag DIV. Vejamos:

6. Criando uma CLASSE no projeto

Em um projeto desenvolvido para web, podemos criar classes que podem inclusivem interagir

ou serem utilizadas também em suas aplicações desktop. Desde que o ambiente configurado

lhe proporcione isso.

Abaixo, vamos criar uma classe chamada de Estados. Esta classe deve retornar um trecho de

código em HTML para ser utilizado em formulários, sempre que for necessário selecionar um

estado.

Para este fim, vamos criar um pacote. Local onde poderemos guardar outras classes de

suporte à construção do site.



Página 10 de 15

6.1. Criando pacote de nome suporte:

6.2. Criando a classe Estados. Para facilitar, clique com botão direito no pacote que acaba de

ser criado, Novo e Classe Java...(Estados.java):



Página 11 de 15

6.3. Defina o nome da classe e clique “Finalizar”:

6.4. Codigo fonte da classe:



Página 12 de 15

Algumas observações:

o Classe Estados, criada no pacote suporte. o Atributos (ou variáveis de classe): selecionado e estados. o Método construtor: Estados – que podem ser chamados de duas maneiras. o Método para o tetorno desejado: getEstados() – o retorno do método é uma String

com um trecho de código em HTML para utilização em formulários.

Aqui, foi utilizado um Array de estados para formar o retorno de getEstaedos(). No entanto, os estados poderiam ser pesquisados em uma tabela de banco de dados. Assim como outras tabelas que precisem ser relacionadas em um formulário.

7. Usando uma classe personalizada no JSP

7.1. Como você já aprendeu anteriormente, vamos criar um novo JSP, com o nome

TesteClasse.

7.2. Coloque no JSP TesteClasse, o seguinte código:

Algumas observações:

o Veja que uma nova diretiva foi adicionada neste JSP. É a diretiva “@page import”, que indicará ao JSP o pacote e a classe que desejamos instanciar.

o No espaço delimitado para o formulário, está sendo instanciado a classe Estados e acionado o método toString() para obter o trecho HTML que a classe retorna.

7.3. Executando, vejamos o oresultado:



Página 13 de 15

o No quadro A, o resultado apresentado ao usuário. o No quadro B, o código HTML gerado pela classe. Oberve.



Página 14 de 15

8. O Objeto Request

8.1. Crie o arquivo tst.jsp:

<%@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>JSP Page</title>

</head>

<body>

<p> <%="Data Atual: " + new java.util.Date()%> </p>

<p> <%="ID Sessão.: " + session.getId()%> <code>autor</code>

<%= request.getParameter("autor")%> </p>

<h2>Recuperando Dados de uma Solicitação HTTP</h2>

<h3>O Objeto Request</h3>

<pre>

Método utilizado na requisição: <%= request.getMethod()%>

URL da requisição_____________: <%= request.getRequestURI()%>

Protocolo da requisição_______: <%= request.getProtocol()%>

Caminho (<i>Path</i>) da requisição__: <%= request.getServletPath()%>

Porta usada na requisição_____: <%= request.getServerPort()%>

Endereço remoto da requisição_: <%= request.getRemoteAddr()%>

Host remoto da requisição_____: <%= request.getRemoteHost()%>

<i>Locale</i> da requisição__________: <%= request.getLocale()%>

Navegador usado na requisição_: <%= request.getHeader("User-Agent")%>

</pre>

<b>Definição exata do navegador Usado</b>:

<%

if (request.getHeader("User-Agent").indexOf("MSIE") >= 0) {

out.println("Internet Explorer.");

}

if (request.getHeader("User-Agent").indexOf("Netscape") >= 0) {

out.println("Netscape.");

}

if (request.getHeader("User-Agent").indexOf("Mozilla") >= 0) {

out.println("Mozilla.");

}

%>

</body>

</html>



Página 15 de 15

9. Resultado Final

Com o passo-a-passo aqui apresentado devemos obter uma tela com a abaixo apresentada ao

clicarmos no segundo link colocado no menu.

*** the end ***

Documents

Tutorial Java WEB - aas.pro.br · Este pequeno tutorial tem como objetivo conduzir o programador passo-a-passo na construção de um site que contem um layout formatado com CSS e