Handerson Frota - WEB2.0

Olá, como já disse aqui estou juntamente com a Devmedia publicando uma série de vídeo aulas sobre ExtJS. Uns dias atrás já foi publicado mais duas vídeo aulas sobre EXTJS, mas como estava sem tempo de postar acabei deixando passar, para aqueles que estavam me perguntando então agora eu respondo.

1. Evolua a interface gráfica de sua aplicação utilizando o framework EXT JS com Grids - Parte 1
2. Evolua a interface gráfica de sua aplicação utilizando o framework EXT JS com Grids - Parte 2

Evolua a interface gráfica de sua aplicação utilizando o framework EXT JS com Grids - Parte 1
Mini Resumo: Utilizando o projeto das aulas anteriores do EXTJS iremos fazer agora um exemplo utilizando o componente Grid. Foram criados alguns exemplo de como criar e personalizar uma grid do Ext.

Evolua a interface gráfica de sua aplicação utilizando o framework EXT JS com Grids - Parte 2
Mini Resumo: Utilizando o projeto das aulas anteriores do EXTJS iremos fazer agora um exemplo utilizando o componente Grid, só que agora acessando dados de um XML. Foi criado um exemplo de um grid sendo carregado com os dados de um XML.

Eu publiquei o projeto para download no Adrive, mas ele está fora do ar já faz algumas semanas(para o meu desespero) pois todos os projetos das vídeo aulas e artigos estão lá, bem para não prejudicar quem quer o projeto vou está disponibilizando aqui no site mesmo.

Acessem aqui para baixar os projetos de exemplo.

Bem espero que gostem das vídeo aulas e até a próxima.

PS: Para quem gosta do assunto 1ª e 2ª Guerras Mundiais acessem o meu outro blog Trincheiras ;).

Estou lançando juntamente com a DevMedia uma nova série de vídeo aulas, só que agora sobre o EXT JS.

Serão vídeo aulas no estilo que sempre faço, passo a passo, começando do zero e aumentando o nível em cada nova vídeo aula.
Ainda não tenho o número de quantidade de vídeo aulas que serão lançadas, mas garanto que serão muitas, pois vou tentar abordar os principais componentes do EXT JS, com exemplos didáticos e detalhados.

Já foram lançadas duas:

1. EXT JS - Introdução ao Framework – Parte 1
2. EXT JS - Introdução ao Framework – Parte 2

Onde:

EXT JS - Introdução ao Framework
Mini Resumo: Nesta video aula iremos ver como adicionar, configurar e rodar o EXT JS em uma aplicação WEB JAVA. Foi criado uma aplicação simples no eclipse, WEB PROJECT. O EXT JS foi adicionado no projeto e gerado uma tela de exemplo com o MessageBox para demonstrar o framework e outros exemplos.

EXT JS - Introdução ao Framework – Parte 2
Mini Resumo: Nesta Video aula iremos ver como utilizar o EXTJS juntamente com o DWR. Utilizando o projeto da aula 1 de EXTJS iremos adicionar o Framework DWR na aplicação. Foi construido também alguns exemplos tais como: Utilizamos o componente Ext.MessageBox.prompt para enviar dados via DWR para o servidor. Utilizamos o componente Ext.FormPanel para enviar um certo dado do usuário para o JAVA com o DWR. Adicionando o componente Form no componente Window do EXT.

Para acessar todas as minhas vídeo aulas clique aqui(DevMedia) ou aqui(handersonfrota.com.br).

Bem espero cumprir a meta, que é tentar passar o máximo de conhecimento possível do EXTJS a vocês.

Bons estudos.

Para finalizar a nossa série de artigos vamos ver nesta última parte como implementar no html a nossa funcionalidade.
No artigo anterior vimos os métodos que iremos utilizar no JavaScript agora vamos ver no html como vai ficar as chamadas, não tem muito o que explicar por isso vou direto ao ponto mostrando o código.

Formulário

	ID:

	Name:

Listagem 10: Formulário que irá conter os dados que serão inseridos no mapa que será enviado para sessão.

Tabela

KeyMap
ID
NAME

Listagem 11: Tabela onde serão carregados os dados da sessão.

Conclusão:
Para se trabalhar com listas ou qualquer objeto na sessão com o DWR é muito simples, o que quis mostrar aqui, não é, se é certo ou não o uso da sessão, não vou, e nem quero entrar nessa polêmica, pois alguns defendem que sim outros que não, eu defendo a solução para uma funcionalidade específica, para mim em alguns casos não vejo problema.

Espero que tenham gostado do artigo e qualquer dúvida mandem email.

Projeto de Exemplo:DWRSessionRequest.rar

Abraços

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