2 Scriptlets e Formulários Prof. Autor: Daniel Morais dos Reis e-tec Brasil Programação Avançada Para Web Página1
Meta Permitir ao aluno aprender a criar um novo projeto Java para web no Netbeans IDE, introduzir o trabalho com a linguagem JSP e interagir JSP e HTML Objetivos Ao final desta aula, você deverá ser capaz de: Entender os principais aspectos da linguagem JSP. Criar interações entre as linguagens JSP e HTML. Criar um primeiro aplicativo simples em JSP. Página2
1 Trabalhando no Netbeans IDE Iniciaremos agora a elaboração de um projeto JSP e iniciarmos o estudo da linguagem em si. Inicie o Netbeans IDE dando um clique duplo no seu respectivo ícone na área de trabalho. Clique no menu arquivo e selecione Novo Projeto. Página3 Na janela Novo projeto, selecione do lado esquerdo a opção Java Web e em seguida no lado direito selecione Aplicação Web e clique no botão Próximo.
Na próxima tela digite o nome de seu projeto na caixa Nome do Projeto e selecione uma pasta para salvá-lo clicando no botão Procurar caso ache necessário. Neste exemplo foi aceita a pasta padrão para armazenamento de projetos do Netbeans IDE. Clique no botão Próximo. Página4
Na próxima tela serão selecionadas opções para a hospedagem do projeto no servidor web GlassFish Server. O Netbeans por padrão cria uma pasta para cada projeto no diretório root do servidor web selecionado. Sendo assim nenhuma opção foi alterada. Clique no botão Próximo. Na tela seguinte, podem ser selecionados frameworks para serem utilizados em seu projeto. Nesta disciplina nenhum framework será utilizado, sendo assim, clique no botão Finalizar e seu novo projeto será criado. Uma janela semelhante a figura à seguir deverá ser exibida. Página5
Como podemos observar no lado esquerdo da janela, a guia projetos poderá ser utilizada para gerenciarmos os diversos arquivos de um projeto. Página6
Já no lado direito da janela destaca-se a janela para digitação de codificação necessária ao projeto. Note que neste caso está sendo exibido o código fonte do arquivo index.jsp, o qual no momento é apenas um arquivo HTML bastante simples. 2 Criando Scriplets Página7 Assim como foi visto na disciplina de Aplicações para Web I, um arquivo HTML é composto por TAGS. Note a similaridade no arquivo JSP. Uma TAG determina o início e o fim de um comando em HTML. Com um <TAG> inicia-se um trecho no qual será aplicado um comando, com um </TAG> determina-se o local onde o comando não terá mais efeito.
Comentários em um arquivo JSP devem estar dentro do TAG <%-- comentário --%> O conteúdo a ser exibido no navegador por um arquivo JSP assim como no HTML deve estar entre os TAGS <body> e </body>. Este TAG encontra-se destacado na figura a seguir. Os números das linhas de código são exibidos no canto esquerdo desta guia conforme destacado na figura a seguir. Página8
Página9 Scriplets são blocos de programação JSP abertos dentro de arquivos HTML. Este recurso permite a interação entre o JSP e o HTML produzindo páginas dinâmicas. Os Scriptlets podem conter comandos, variáveis, objetos, propriedades, execução de métodos de classes / objetos Java entre outros. Os comando utilizados por Scriptlets são similares aos comandos utilizados na Linguagem Java na disciplina de Linguagens de Programação II.
Scriptlets devem ser inseridos no bloco criado pelo TAG <% e %>. Vamos criar um Scriptlet que faça a soma de duas variáveis inteiras e a mostre na tela. Remova o TAG <h1> Hello World!</h1> e adicione o código da figura a seguir (note que a alteração que ocorreu no código do arquivo index.jsp foi apenas o código destacado na figura). Neste Scriptlet, na linha 15 é aberto um bloco para codificação do Scriptlet. Na linha 16 é criada uma variável do tipo int (valores inteiros) com o nome de valor1, a esta variável é atribuído o valor 100. Na linha 17 é criada a variável valor2, a qual é atribuída o valor 200. Na linha 18 é criada a variável result, a qual é atribuída o valor da soma das variáveis valor1 e valor2. Na linha 20, o comando out.print exibe no navegador o valor da variável result. Na linha 21 o Scriptlet é fechado. Para executar o seu Scriptlet, clique no botão Executar Projeto na barra de ferramentas do Netbeans IDE conforme mostra a figura à seguir. Página10
Será obtido o resultado à seguir. Para alterar a formatação do valor exibido no browser você pode usar tags HTML em seus blocos Scriptlet. Para testar isso, feche seu navegador e volte ao Netbeans IDE, vamos alterar o código abaixo utilizando o TAG <FONT> do HTML juntamente com os parâmetros color e size para alterarmos respectivamente as cores o tamanho do valor da soma das variáveis. para: Altere o código da linha 20 de seu Scriptlet (linha que contém o comando out.print) out.print("o resultado é: <font color=red size=5>" + result + "</font>"); Note que os comandos HTML que estão dentro do Scriptlet devem ser utilizados em conjunto com o comando out.print e por isso devem estar dentro de (aspas duplas), para produzirem uma String a ser exibida. Não se esqueça de após a variável result adicionar o comando + </font> para terminar o efeito do tag <FONT> em seu código. A imagem a seguir exibe o código que deve estar no arquivo index.jsp neste momento. Página11
Clique novamente no botão Executar Projeto e note que obterá o resultado à seguir em seu navegador. Podemos ainda fazer com que os valores das variáveis valor1 e valor2 sejam obtidos à partir de caixas de texto de formulários HTML, permitindo assim que o valor da soma seja dinâmico. Para isso criarmos um formulário com duas caixas de texto como foi aprendido na disciplina de Aplicações para Web I. Para tanto adicione após o TAG <body> e antes do início do bloco Scriptlet (tag <%) o código HTML para gerar o formulário. <form name="frmsoma" method="post"> Valor 1: <input type="text" name="txtv1"><br> Página12 Valor 2: <input type="text" name="txtv2"><br> <input type="submit" value="somar"> </form>
O código de seu arquivo index.jsp deve estar agora semelhante a figura à seguir. Página13 Para a criação do formulário em HTML na linha 15 utilizamos o TAG <form> que contém as definições para um formulário. Para facilitar façamos uma analogia ao JFrame criado no disciplina Linguagens de Programação II. Podemos imaginar que o TAG <form> e o TAG </form> determinam respectivamente o início e o fim de um JFrame (janela de componentes). O parâmetro name no TAG <form> dá um nome ao formulário, o qual pode ser utilizado posteriormente na programação o parâmetro method pode receber os valores post (no qual as informações digitadas no formulário não serão apresentadas na barra de endereços no browser, serão enviadas via cabeçalho do protocolo http) ou get (no qual os valores digitados no formulário serão enviados através da url do browser, formando uma string na barra de endereços do navegador, útil para conectar aplicações diferentes por exemplo transferindo dados uma para a outra). Nas linhas 16 e 17 são criadas duas caixas de texto através do tag <input>. O parâmetro type do tag <input> recebeu o valor text que indica que deve ser gerada uma caixa de texto. O parâmetro name indica o nome da caixa de texto, este parâmetro é muito importante pois é através dele que é possível pegar o valor digitado na caixa de texto. Sendo assim temos as caixas de texto txtv1 e txtv2. O tag <BR> faz uma quebra de linha entre as caixas de texto (este tag corresponde a pressionar a tecla Enter em um editor de textos). Na linha 18 é criado um botão do tag <input> o qual tem em seu parâmetro type o valor submit que cria um botão para enviar os dados do formulário para o servidor web / browser. Ao executar seu projeto, deve aparecer a janela a mostrada na figura a seguir.
Agora iremos alterar o resultado da soma, fazendo com que sejam somados os valores digitados pelo usuário nas caixas de texto Valor 1 e Valor 2 respectivamente. Feche o browser e volte ao Netbeans IDE. Para capturar o valor de um campo de um formulário HTML é necessário que você observe o valor do parâmetro name do campo desejado. No caso das caixas de texto Valor 1 e Valor 2, a propriedade name possui respectivamente os valores txtv1 e txtv2. Conforme vemos na figura a seguir. Página14 Para capturar os valores digitados nas caixas de texto do formulário iremos utilizar o objeto request do JSP. Neste objeto existem vários métodos para trabalharmos com requisições feitas de/para o servidor web. O Método que do objeto request que nos interessa no momento para capturarmos os valores das caixas de texto do formulário HTML gerado é o getparameter. Este método nos retorna um Object do Java, que é um tipo de
dado objeto que pode ser convertido em qualquer outro tipo. A utilização do método getparameter ser dá pela sintaxe à seguir: request.getparameter( Nome do campo no formulário HTML ); Onde Nome do campo no formulário HTML deverá ser substituído pelo nome dos nossos componentes de formulário (txtv1 e txtv2). O valor retornado pelo método getparameter do objeto request deve ser convertido para o tipo desejado, no caso será inteiro. Ao abrir a página, o valor das caixas de texto será null pois no botão somar não foi pressionado portanto o servidor web não recebeu os parâmetros necessários vindos das caixas de texto. Por isso, para evitar erros, devemos testar antes de executar a soma se os campos txtv1 e txtv2 foram preenchidos, fazemos isso verificando se método getparameter retorna algum valor diferente de null. Após fazer este teste e verificado a existência de algum valor digitado pelo usuário, podemos utilizar o método parseint do objeto Integer para converter os valores digitados nas caixas de texto em valores numéricos e posteriormente somar os valores. Para estas alterações, altere o código de seu Scriptlet para: <%!= null)){ if((request.getparameter("txtv1")!= null) && (request.getparameter("txtv2") int valor1 = Integer.parseInt(request.getParameter("txtv1")); int valor2 = Integer.parseInt(request.getParameter("txtv2")); int result = valor1 + valor2; out.print("o resultado é: <font color=red size=5>" + result + "</font>"); Página15 } %>
O código do arquivo index.jsp deve estar agora como o código da figura a seguir. Repare na linha 21 onde fazemos a verificação da existência de valores nas caixas de texto do formulário HTML (comparando se request.getparameter( caixa de texto ) é diferente de null), caso eles existam, as variáveis valor1 e valor2 recebem estes valores já convertidos para o tipo int (lembre-se da disciplina de Linguagens de Programação II onde para converter um valor para inteiro utilizávamos Integer.parseInt( valor )) que foram capturados das caixas de texto do formulário HTML através de request.getparameter( caixa de texto ). Executando seu projeto sua janela ficará semelhante figura à seguir. Página16 Ao digitar valores nas caixas de texto e em seguida clicar no botão Somar, o resultado da soma das caixas de texto deverá aparecer abaixo do botão. Na figura a seguir foram digitados os valores 1500 e 1800 respectivamente nas caixas de texto.
Com uma alteração simples neste projeto podemos fazer com que o usuário digite os valores nas caixas de texto de uma tela e veja o resultado da soma em outra tela do website. O parâmetro action adicionado ao TAG <form> permite definir um destino para os dados digitados no formulário após o usuário clicar no botão submit (no caso botão de Somar). Para fazer este teste, altere o código no TAG <form> para: <form name="frmsoma" method="post" action="resultado.jsp"> Repare no valor do parâmetro action, o qual recebeu o valor resultado.jsp indicando que quando o usuário clicar no botão Somar os dados do formulário serão enviados à página resultado.jsp e o browser será redirecionado para a mesma. O código do arquivo index.jsp até o momento deve estar como na figura à seguir. Página17
Vamos agora criar o arquivo resultado.jsp, onde será exibido o resultado da soma das duas variáveis, para isso, clique com o botão direito do mouse em Páginas Web no painel Projetos (lado superior esquerdo da janela do Netbeans IDE), selecione Novo e JSP como na figura a seguir. Na janela que surge, dê o nome de resultado para a nova página a ser criada digitando o nome na caixa Nome do Arquivo conforme a figura a seguir. Clique em Finalizar para concluir. Página18
Você agora terá um projeto com dois arquivos.jsp (index e resultado) como na figura a seguir. Página19 Vamos retirar o bloco de Scriptlet do arquivo index.jsp e coloca-lo na página resultado.jsp. Esta alteração pode ser feita pois a soma das variáveis vindas do arquivo
index.jsp é feita exatamente da mesma forma (verificando-se a digitação do dados nas caixas de texto, convertendo-os para inteiros e somando-os). Recorte o bloco de código Java do scriptlet no arquivo index.jsp (selecionando o texto entre <% e %> com o mouse e pressionando CTRL + X no teclado) e cole-o entre os TAGS <body> e </body> do arquivo resultado.jsp conforme mostrado nas figuras à seguir. Após selecionar o texto indicado na figura acima pressione CTRL + X para recortá-lo, o código do arquivo index.jsp deve ficar como na figura a seguir. Página20 Vá para o arquivo resultado.jsp e no lugar de <h1>hello World!</h1> cole o código do Scriptlet recortado, deixando como na figura a seguir.
Execute novamente e teste seu projeto. Na primeira tela você terá apenas o formulário HTML presente, ao digitar os dados e clicar no botão Somar da primeira janela verá que seu browser será redirecionado para o arquivo resultado.jsp e o valor da soma dos valores exibido. Nas imagens abaixo foram testados os valores 500 e 890 respectivamente nas caixas de texto. Página21