Home › AJAX › Carregando HTML usando o DWR

Carregando HTML usando o DWR

Posted on Publicado em AJAX, DWR 31 Comments Tagged with , ,

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

31 Comments on “Carregando HTML usando o DWR”

  1. 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…

  2. 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

  3. 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.

  5. 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

  6. 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.

  10. É 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.

  12. 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..

  15. @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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

*

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.