Carregando HTML usando o DWR

admin Posted on novembro 5, 2007 Publicado em AJAX, DWR 18 Comments

Um método bem simples e muito interessante do DWR é o forwardToString(“JSP/HTML”). Você tem mais ou menos o seguinte cenário:

Você deseja carregar uma determinada página ou trecho de código que está salvo em um html ou jsp dentro da sua aplicação e quer que essa página seja carregada em um deterninado local, normalmente uma DIV, TBODY. Veja como é simples:

Vamos inicialmente criar no seu FacadeAjax um método que irá receber uma determinada URL e vai devolver essa requisição como HTML puro. Veja o código abaixo:

public String carregaPagina(String url) throws ServletException, IOException{
return WebContextFactory.get().forwardToString(url);
}

public String carregaPagina(String url) throws ServletException, IOException{

return WebContextFactory.get().forwardToString(url);

}

Agora vamos fazer o JavaScript que irá executar esse método:

function carregar(){
var url = DWRUtil.getValue("url");
FacadeAjaxSession.carregaPagina(url,{
callback:function(data){
     DWRUtil.setValue("pagina", "");
     DWRUtil.setValue("pagina", data, {escapeHtml:false});
}
});

}

function carregar(){

var url = DWRUtil.getValue("url");

FacadeAjaxSession.carregaPagina(url,{

callback:function(data){

DWRUtil.setValue("pagina", "");

DWRUtil.setValue("pagina", data, {escapeHtml:false});

}

});

}

O que ele basicamente faz é fazer a chamada ao método carregaPagina passando como parâmetro a página que você deseja carregar e no retorno dessa chamada(callback) ele carrega a página na tela utilizando o DWRUtil.setValue(). Observe que no DWRUtil.setValue() eu passo mais um parâmetro que é o: escapeHtml:false, que vai evitar que o browser carregue o código html no lugar do resultado. Sem esse parâmetro ele iria mostrar as tag do html.

HTML

Carrega página
<input id="url" name="url" type="text" />
<table id="formulario" border="0" align="center">
<thead>
<tr>
<td colspan="2">

<a href="javascript:carregar()">Carregar Página</a></td>
</tr>
</thead>
<tbody id="pagina"></tbody></table>

Carrega página

<thead>

<tr>

<a href="javascript:carregar()">Carregar Página</a></td>

</tr>

</thead>

No HTML passado acima temos apenas um input onde deverá conter a página que você deseja carregar e uma tabela com um link que executará a função do JavaScript. Temos abaixo desse link a tag TBODY que é onde vamos carregar o nosso html.

Queremos carregar o restante dessa tabela(no nosso exemplo estamos carregando um trecho de uma tabela, mas poderá ser uma completa ou outra coisa que você deseje), que poderá ter vários conteúdos, ou seja, poderá ter um ou mais arquivos html como o que está abaixo:

TESTE.HTML

Formulario
<input id="id" type="hidden" />

Nome:
<input id="nome" type="text" />

Login:
<input id="login" type="text" />

Senha:
<input id="senha" type="password" />
<input type="button" value="Salvar" />
<input type="button" value="Fechar" />

Formulario

Nome:

Senha:

Observe abaixo passo a passo a sua execução:

Agora passamos como parâmetro a página teste.html descrita anteriormente:

Clicamos no link Carregar Página:

Você observou como é simples carregar html na sua aplicação usando o DWR. Lembrando que aqui foi apenas um exemplo, imagine ter uma determinada funcionalidade que o usuário através de uma Combo seleciona um de vários formulários já prontos. Seria algo como um formulário “dinâmico”.

Fica a cargo da sua criatividade utilizar essa funcionalidade do DWR. No exemplo da Palestra do Sun Tech Days utilizo esse método para carregar alguns formulários na tela, mas não é obrigado serem somente formulários, podem ser tabelas, imagens etc.

Mas informações no link abaixo:

http://getahead.org/dwr/server/generic

Espero que este artigo tenha sido de utilidade.

Abraços

Marcado com: AJAX, DWR, HTML

18 Comments on “Carregando HTML usando o DWR”

Christiano Milfont disse:

novembro 5, 2007 às 5:10 am

usando os outrs frameworks tem como fazer isso de forma simples tambem, se alguem estiver usando o Ext, pode fazer assim:
Ext.get(‘id_objeto’).load(
{
url:’pagina.html’,
…
});
E assim por diante…
handersonbf disse:

novembro 5, 2007 às 5:23 am

Boa milfont, mas o foco dessa funcionadade não é somente carregar um html, ou uma página, ele pode ser utilizado para outras coisas bem mais avançadas. A integração com o Ext como vc sabe é show de bola. Mas se o cara não tem o Ext no projeto e só o DWR, o DWR lhe permite fazer isso, mesmo ele tendo os dois, dependendo do objetivo da funcionalidade as vezes sai mais simples fazer com o DWR. Mas foi uma ótima dica tbm, já tinha visto isso dele.
Ai no caso vc colocou somente um trechinho neh ;P tbm não é só isso nao rsrsr mas vlw. Mas ele é simples tbm como o DWR.

abraços e vlw
Rafael Ponte disse:

novembro 5, 2007 às 5:36 am

Ficou muito bom, e o melhor, é muito útil :)) Esse lance de criar um formulário ou página via JavaScript é coisa de “maxu” e de quem gosta de “mexer no cimento” 😛

Parabéns.
Ivan Carlos disse:

novembro 5, 2007 às 6:33 am

Concordo com o Rafael… Handersom e vc é o maior dentre os Mestre de Obras.
handersonbf disse:

novembro 5, 2007 às 6:45 am

Rafael Ponte.
Pois rafael tem coisas que fazer 100% no Javascript não compensa mesmo, o DWR facilita nisso, mas depende do projeto. Vlw

Ivan
Meu amigo atrofiadoman, rsrs você não entendeu o que o Rafael falou. Outra coisa, tenta fazer isso ai com JSF ;D ou tenta fazer o que a signatures faz com o DWR no JSF ;D tem coisas que da para usar o JSF, mas tem muito mais que não da para usar ele. Não sou mestre de obras, sou PROGRAMADOR ;D.

É engraçado que a galera do JSF tem esse pensamento rsrsr quero ver um sistema completo com ele, usando técnicas de WEB2.0 lembrando que fazer uma tela sem reloader não é WEB2.0. E antes que você esqueça o JSF usa o javascript na maioria dos componentes dele ;D. você que não usa, pois usa os componentes dele, é como o struts 2 fez com o DWR, embutiu ele e usa componentes para acessar eles.

Não desmereço o JSF, mas também não vamos ser atrofiados não é, achando que fazer js é mexer no cimento, putz, então você também mexe no cimento já que digita código JAVA e ?

Quero alguém fazer só 10% do que já fiz ou que o Christiano Milfont por exemplo já fez com o “cimento” rsrsrs da nem pro caldo o JSF ;D mas cada caso é um caso, cada um tem suas facilidades e serventias e os dois podem trabalhar juntos, por isso o DWR também tem integração com JSF ;D

Abraços e vlw
handersonbf disse:

novembro 5, 2007 às 7:06 am

Ah antes que gere confusão por causa do “atrofiadoman” quero deixar aqui bem claro que o Ivan é um grande amigo meu, por isso tenho intimidade de bricar com ele, não pensem que tentei ofender ele ok? ;D Ele sabe que é brincadeira.

abraços e vlw Ivan.
Anderson disse:

novembro 5, 2007 às 7:38 am

obrigado por dar de bandeja um negocio q eu estava matutando como fazer 😀
handersonbf disse:

novembro 5, 2007 às 9:18 am

hauhauahauh que bom Anderson ter sido útil ;D legal saber que pude ajudar.

abraços
Carlos Atila disse:

novembro 7, 2007 às 4:42 am

Cara muito massa isso, continue postando artigo de otima qualidade. Parabéns!!
Rafael Carneiro disse:

novembro 7, 2007 às 2:56 pm

É muito bom saber que para desenvolvimento web existe um excelente framework AJAX que atende todas as espectativas do programador em relação ao uso dessa tecnologia. Parabéns por disseminar essa tecnologia na internet de uma forma clara e sucinta.
handersonbf disse:

novembro 7, 2007 às 6:33 pm

Atila
Obrigado cara e continue acompanhando tbm ;D

Carneiro
Vlw cara bom saber que estou agradando meu “público”.
Abraços
Anizair disse:

dezembro 12, 2007 às 3:31 am

Handerson estou utilizando o DWR para fazer uma tela de login, mas estou com algumas dúvidas tem como você desenvolver um tutorial de crianção de uma tela de login para clarear minha cabeça.
Este tutorial que você colocou está show de bola …
Sem mais para o momento obrigado..
ok entendi disse:

maio 5, 2008 às 3:47 pm

muito bom o tutorial
hulk disse:

maio 5, 2008 às 3:58 pm

adorei, vc podia por mais coisas sobre como construir
handersonbf disse:

maio 5, 2008 às 4:34 pm

@ok entendi
Obrigado….ok entendi rsrsrs O_o

@Eduardo
Obrigado, mas o que seria essas mais coisas ?
Bem estou meio sem tempo de postar, já estou a um tempinho sem postar nada 🙁 mas estou fazendo o possível para quando conseguir tempo colocar aqui mais assuntos interessantes, o site não morreu ;D em breve mais artigos aqui.

Abraços
cheap wow gold disse:

abril 21, 2013 às 11:57 am

I every time spent my half an hour to read this website抯 articles or reviews every day along with a mug of coffee.
Jefferson disse:

maio 11, 2017 às 3:39 am

Handerson, você é muito bom, isso foi ótimo eu estava precisando desta solução.
Handerson Frota disse:

maio 11, 2017 às 7:20 am

Olá Jefferson, muito obrigado amigo. Que bom que pude te ajudar 🙂 abraços!

Carregando HTML usando o DWR

18 Comments on “Carregando HTML usando o DWR”

Deixe uma resposta Cancelar resposta