Criar um form mais dinâmico

5 respostas
alexandremanowar

E ae galera blz

Eu estou estudando JSP e Servlets, e estou iniciando com forms, e gostaria que alguém me explique o seguinte.

Eu criei um forma da seguinte forma:

1)Um form html onde o cliente envia os dados
2)Um XML que define qual servlet será aberto
3)o servlet processa a informação e joga para um JSP trazer o resultado

Esse tipo de form eu já consegui fazer e ficou legal.
Agora eu gotaria de fazer um trabalho diferente. Tipo assim:
O form seria de uma empresa de contabilidade que funcionaria de seguinte forma:
1)o usuário digita o nome e o valor do salário do funcionário em um form
2)Quando ele clicar em “calcular” o servlet avalia o valor da porcentagem que será tirada de inss e retorna na tela o valor do inss.
Só que eu queria fazer isso mais dinâmico tipo não trocar de página, quando eu clicar no “calcular”, o sistema já imprime (na mesma págima) o nome eo valor do salário e embaixo já mostre o valor do inss sem ter que trocar de página ou algo assim.
Eu andei lendo sobre listener e acho que é possível, tipo crio um listener no XML e ele carrega um servlet que já cria as bases de calculos, aí só deixa o valor na página de resposta que é a mesma que o usuário preencheu o form, dessa forma o resulta é mais dinâmico.
Acredito que dessa forma o resultado fica tipo em tempo real.
O XML ficaria + ou - isso:

....
<servlet>
 <servlet-name>ListenerCalculo</servlet>
 <servlet-class>com.example</servlet>
</servlet>

<servlet-mapping>
 <servlet-name>ListenerCalculo</servlet>
 <servlet-pattern>Calculo.do</servlet>
</servlet-mapping>

<listener>
 <listener-class>
   com.example.CalculoInss
 </listener-class>
</listener>
...

Alguém poderia me explicar como fazer isso, eu gostaria de aprender? É possível fazer isso com o java? Exibir resultados em tempo real? Ou eu tenho que enviar para o servlet e gerar o JSP de resultados.
Porque penso assim, se meu form já esta dentro de um jsp e o listener carrega o servlet então o resultado pode ser exibido no jsp que já esta aberto com o form. Certo? Ou estou enganado?

5 Respostas

lenando

Pela sua descricao, acredito que vc esteja atras de Ajax !!!

Pesquise sobre na internet, ha uma grande variedade de livros, artigos, tutoriais falando sobre este assunto.

Att.
Fernando.

Grinvon

Pelo que eu entendi, teria um campo texto, do qual você enviaria o valor monetário o servlet calculava o valor e enviava novamente para você SEM precisar do refresh.

Isso é fácil com ajax, da para fazer essa forma:

- Criar uma função JS que receberá o valor do campo texto e enviará através de uma requisição HTTP GET para o Servlet.

var req; //obtêm a requisicao
var ie; //verifica se é browser IE

//inicializa o Ajax
function init() {
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		ie = true;
		req = new ActiveXObject("Microsoft.XMLHTTP");
	}
}
 
function validaValorMonetario() {
	init();
	req.onreadystatechange = processaRequisicao;
	if (!target) target = document.getElementById("meuTextoId");
	var url = "validar?id=" + escape(target.value)
	req.open("GET", url, true);
	req.send(null);
}
Algumas coisas em consideração, você deve registrar o seu servlet com a url que será passada pelo ajax, nesse caso determinei como "validar" onde ele passa um parametro "id", esse parâmetro recebe o valor do campo texto que é obtido pelo id "meuTextoId" em seu Servlet, no método doGet coloque:
String valor = request.getParameter("id");

//FAÇA AQUI AS VALIDAÇÕES QUE VOCÊ QUEIRA.

response.setContetType("text/xml");
response.setHeader("Cache-Control", "no-cache");
response.getWriter().write("<valor>"+valorFormatado+"</valor>");

Nesse caso acima, considere a variável valorFormatado já com o valor que você queira que ele formate e processe, dessa forma na resposta (response) enviamos uma resposta para o cliente, formatada com o padrão XML, já que tamos usando ajax (podemos usar o "text/plain" também, mas deveremos tratar de forma diferente).

Dentro do seu JSP, coloque um div que irá receber o resultado. Esse valor deverá ser atribuído por uma função de callback. Essa função pode ser algo do tipo processa requisição, como fizemos a chamada para ela na função acima de validação.

function processaRequisicao() {
	if (req.readstate == 4) {
		if (req.status == 200) { //status 200 = OK
			var messagem = req.responseXML.getElementByTagName("validar")[0].childNotes[0].nodeValue;
			setDOM(messagem);
	}
Chamamos agora o método que irá usar o DOM para atribuir o valor a tag div.
function setMenssagemDOM(msg) {
                var resultado = document.getElementById("resultado");
                var msgText = "";
                resultado.style.color = "blue";
                    msgText = "Valor: " + msg;
                } 
                
                var msgBody = document.createTextNode(msgText);
                
                if (resultado.childNodes[0]) {
                    //caso exista msg, então substitua
                    resultado.replaceChild(msgBody, resultado.childNodes[0]);
                } else {
                    //nao existe, entao cria uma nova msg no elemento HTML usando o DOM
                    resultado.appendChild(msgBody);
                }
                
              }

Sendo "resultado" o div com esse id para exibição da resposta.

Grinvon

Agora para não ter esse trabalho todo, eu usaria sem dúvida o prototype.

Veja como seria menos trabalhoso:

Escreva o valor:<input type="text" id="valor"/>
<p>
    <div id="resultado" style="background-color: darkgreen; color: white;"></div>
</p>
<input type="submit" onclick="javascript:checkNames()" value="Calcular"/>

<script type="text/javascript">
function checkNames() {
    new Ajax.Updater('resultado', '/validar', {
        parameters: { id: $F('valor')}
    });
}
</script>

No seu Servlet, você precisa a "response" enviando o valor necessário em formato XML, a função Ajax.Updater já saberá qual o elemento HTML deverá ser atualizado, dessa forma o nosso retorno está para o elemento cujo o ID é "resultado", no caso, um div.

Nota-se ainda que no hash contendo parameters, o "id:" simboliza o parâmetro passado pela request, você deve obter com esse mesmo nome no Servlet usando o getParameter, porém sem os dois pontos.

Espero ter ajudado a clariar.

alexandremanowar

Valeu pela ajuda pessaol. Então no caso o servlet e jsp só consigo fazer paginas estática se eu quiser algo mais dinâmico preciso de um ajax. Entendi valeu

Grinvon

Só uma nota a respeito.

Cuidado com o uso do “estático” e “dinâmico”. No caso das páginas JSP, elas são dinâmicas, não estáticas. O HTML puro que é uma página dinâmica. Na verdade quando você processa uma página JSP, ela se transforma em um Servlet internamente, que por final gera a saída para o cliente web, que pode ser uma saída HTML (página estática), uma saída XML, uma saída stream de arquivos do tipo pdf, exe, zip, etc.

Então páginas JSP não são estáticas, já que nelas você processa requisições e podem tratá-las. O que as torna diferente do uso com o ajax, é que a há uma sincronia do envio de msgs do servidor-cliente e vice versa, enquanto o ajax, não há essa sincronia, portanto mais livre, e idependente, dando um aspecto real de páginas serem mais dinâmicas.

Criado 13 de fevereiro de 2007
Ultima resposta 13 de fev. de 2007
Respostas 5
Participantes 3