Carregando HTML usando o DWR
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);
}
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});
}
});
}
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
| Carregar Página |
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 Nome: Login: 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
Christiano Milfont said
am novembro 5 2007 @ 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 said
am novembro 5 2007 @ 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 said
am novembro 5 2007 @ 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 said
am novembro 5 2007 @ 6:33 am
Concordo com o Rafael… Handersom e vc é o maior dentre os Mestre de Obras.
handersonbf said
am novembro 5 2007 @ 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 said
am novembro 5 2007 @ 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 said
am novembro 5 2007 @ 7:38 am
obrigado por dar de bandeja um negocio q eu estava matutando como fazer
handersonbf said
am novembro 5 2007 @ 9:18 am
hauhauahauh que bom Anderson ter sido útil ;D legal saber que pude ajudar.
abraços
Carlos Atila said
am novembro 7 2007 @ 4:42 am
Cara muito massa isso, continue postando artigo de otima qualidade. Parabéns!!
Rafael Carneiro said
am novembro 7 2007 @ 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 said
am novembro 7 2007 @ 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 said
am dezembro 12 2007 @ 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 said
am maio 5 2008 @ 3:47 pm
muito bom o tutorial
hulk said
am maio 5 2008 @ 3:58 pm
adorei, vc podia por mais coisas sobre como construir
handersonbf said
am maio 5 2008 @ 4:34 pm
@ok entendi
Obrigado….ok entendi rsrsrs O_o
@Eduardo
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.
Obrigado, mas o que seria essas mais coisas ?
Bem estou meio sem tempo de postar, já estou a um tempinho sem postar nada
Abraços