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.
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 2 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 3 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 4 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 5 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 6 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 7 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 8 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 9 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 10 de 15
6.3. Defina o nome da classe e clique Finalizar : 6.4. Codigo fonte da classe: Página 11 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 12 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 13 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 14 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 *** Página 15 de 15