Artigo Java Magazine 60 - Introdução ao Framework ExtJS

Usando ExtJS como Framework Ajax em aplicações web

Entenda como e porque utilizar um completo Framework Ajax orientado a objetos para desenvolvimento web na construção de componentes visuais

De que se trata o artigo:

Introdução ao Framework ExtJS, explicitando desde os fundamentos básicos e avaliando aspectos necessários que devem conter em um Framework Ajax de propósito geral.

Para que serve:

Entender porque usar um Framework Ajax, que tipos existem e analisar os requisitos básicos que esses Frameworks devem implementar, utilizando como fonte de estudo o ExtJS.

Em que situação o tema é útil:

Quando precisamos criar usabilidade no desenvolvimento web é necessário trabalhar com algum Framework Ajax para unificar toda a manipulação do conjunto de tecnologias envolvidas em uma única API. O entendimento de como o framework está fundamentado é necessário para a escolha adequada ao projeto, além de permitir a extensão segura de funcionalidades específicas.

Introdução ao Framework ExtJS:

Abordamos o ExtJS, um dos Frameworks de maior crescimento na adoção ao desenvolvimento Ajax. O ExtJS é orientado a objetos, com grande variedade de componentes visuais e rico em documentação.

Também analisamos os Frameworks de propósito geral e como o ExtJS implementa cada requisito necessário para essa classificação com código simples e direto.

Nesse artigo introdutório, iremos abordar o uso do ExtJS na construção de aplicações WEB, seus benefícios e deficiências, assim como entender o porquê de usar um framework Ajax. Demonstraremos os conceitos envolvidos na formação de um framework Ajax e como são implementados. Mostraremos os Widgets (componentes visuais) mais comuns e importantes do ExtJS, que se popularizou pelo apelo visual e a boa usabilidade.

Frameworks Javascript são erroneamente reconhecidos como Frameworks Ajax devido à popularização desta técnica, mas ela é apenas uma entre tantas outras. De qualquer forma, chamaremos de Framework Ajax pela consagração deste nome no mercado. Apesar da linguagem Javascript ter sido resgatada como uma linguagem poderosa, não tem o requinte mercadológico que o nome Ajax possui.

Benefícios dos Frameworks Ajax

Esses Frameworks trabalham com um conjunto de tecnologias: CSS (formatação da apresentação); XHTML (estrutura de apresentação); DOM (modelo de árvore de objetos que representam os elementos especificados que os browsers devem implementar); XML e JSON (formatos de dados); e XMLHttpRequest (objeto que fornece conexões assíncronas ao servidor sem precisar submeter a página, e que deu origem à técnica de Ajax).

Os benefícios de usar Frameworks estão na redução da complexidade pela facilidade de manipulação de um conjunto de tecnologias com uma única API; na possibilidade de acessibilidade semelhante ao ambiente desktop; e na facilidade do tratamento dos dados em camadas físicas entre o lado servidor e o lado cliente.

Além disso, esses Frameworks estendem as tecnologias fornecendo efeitos visuais (como Fade in, Fade out), Drag’n’Drop (arrastar e soltar), mecanismo de Crossbrowser (encapsulamento das especificidades de cada navegador), redimensionamento de regiões da GUI em tempo de execução, implementação de métodos inexistentes na API nativa dos navegadores e tratamento adequado a diversos formatos das fontes de dados.

Tipos de Frameworks Ajax

Existem vários frameworks distintos, mas é comum dividi-los entre três categorias principais: Propósitos gerais, Tratamentos remotos e Especializados. Não existe uma classificação precisa. Na Figura 1 podemos ver uma pilha de camadas de frameworks agindo sobre as técnicas Ajax.

Um framework de propósito geral fornece componentes sobre o conjunto de todas as tecnologias no lado cliente e mecanismos de acesso aos recursos no lado servidor (exemplos: Yahoo!YUI, DOJO, ExtJS). Os frameworks de tratamento remoto são específicos ao controle de tráfego e manipulação de dados (exemplo: DWR). Os especializados realizam somente algumas técnicas ou determinado comportamento do conjunto de tecnologias web (exemplos: Prototype, Moo.fx).

Frameworks web no lado servidor, como os que suportam o MVC Model 2, tradicionalmente “Ajaxificados” (neologismo que indica suporte às técnicas Ajax) geralmente embutem Frameworks Ajax, e no máximo criam uma estrutura de Tags como uma camada extra para criar código Javascript e satisfazerem as necessidades de integração.

Figura 1. Pilha de camadas de Frameworks agindo sobre técnicas de Ajax

A técnica de Ajax nasceu por conta da utilização do objeto XMLHttpRequest (chamaremos de XHR daqui para a frente) processando códigos XML que são transitados como fonte de dados em conexões assíncronas ao servidor.

A técnica mais antiga de iframes já permitia produzir resultados similares, mas não era muito popular e apresentava muitos problemas. iframes ainda são utilizados em pontos específicos como no upload de arquivos, já que por padrão uma conexão usando o objeto XHR não permite esse tipo de operação.

Outra estratégia de implementar Ajax (aqui um tanto desvirtuado) é com a técnica de Scripttag (ver quadro “Scripttag”).

Além do formato XML que deu origem ao acrônimo Ajax, hoje o formato de transição de dados mais popular é o JSON (ver quadro “Objeto Literal”).