Desenvolvimento - ASP. NET
Bindows e AJAX: Um relacionamento íntimo
Bindows foi projetado para satisfazer aos mais íntimos desejos da Web 2.0. Uma das metas desta nova Web é a considerável redução de transporte de dados por parte do servidor e a melhoria da usabilidade de páginas, pondo sempre o usuário em foco e tentando melhorar ao máximo sua experiência em termos de navegabilidade.
por Luiz Alberto de Souza Jr.Muito tem se falado de uma nova metodologia de sistemas chamada AJAX. Este artigo tem como objetivo mostrar quais recursos Bindows™ nos provê para criar aplicações baseadas neste novo conceito. Para atingir este objetivo, uma base sólida de conhecimento desta metodologia simplifica o acompanhamento desde artigo e ao mesmo tempo auxilia no planejamento e especificações de aplicações que a utilizam.
O que é AJAX?
O termo - cunhado por Jesse James Garrett (Adaptive Path LLC) em fevereiro de 2005 - promove a simplificação na nomenclatura de um conjunto de tecnologias integradas de tal forma que o cliente possa facilmente compreender seu significado sem que, de fato, se preocupe com as tecnologias envolvidas internamente.
Linguagens como HTML, JavaScript, XML, CSS, XPath podem trabalhar em conjunto para melhorar a usabilidade de aplicações web, incrementando a experiência do usuário e atingindo um nível completamente novo de interação.
A idéia por trás de AJAX (Asynchronous Javascript And Xml) é simples: reduzir ao máximo a latência entre o cliente e o servidor. Para isto, ao invés de transferir todo o conteúdo da página, transfere-se apenas o código localizado, transmitindo menos dados a cada requisição; em conjunto, a recarga de página não é mais necessária, abrindo um leque de novas possibilidades e funcionalidades. Sem a necessidade da recarga, é possível aumentar a interação entre a aplicação web e o usuário, como por exemplo, através de um controle de auto-completar ou até mesmo de sugestão (tal como o Google Suggest).
Tipos de AJAX
Frame/Iframe
A forma mais utilizada para enviar e receber dados ao servidor consiste em chamadas via Iframe ou sua variante ainda mais antiga, Frame. Devido ao seu amplo suporte e a possibilidade de se trabalhar com o histórico, faz com que esta forma mais adotada. Exemplos podem ser dados, como o Google Maps, Gmail, etc.
Infelizmente, esta metodologia não possui controle de cabeçalhos nem é possível saber qual o status da requisição; caso o servidor pare de funcionar durante uma requisição, não há como saber se esta foi bem sucedida ou não.
Como cerne de sua metodologia, este sistema utiliza um quadro (Frame ou Iframe) que carrega uma página definida e carrega alguns dados (até mesmo processa, via argumentos na URL ou via POST). Ao término da carga, um evento (load) é disparado e a resposta pode ser trabalhada da forma que a aplicação desejar, como por exemplo, alterando dados em uma listagem ou até mesmo uma confirmação de cadastro realizado com sucesso.
Não está no propósito deste artigo detalhar estas metodologia e seus padrões em detalhes; uma busca pela Internet poderá auxiliá-lo nesta questão.
JavaScript Remote Scripting
Uma metodologia não muito difundida por sua difícil forma de manipular strings e gerá-las de forma adequada. Uma forma segura de se carregar blocos JavaScript e ao mesmo tempo interagir com o servidor. Bindows™ utiliza esta metodologia para carregar seus scripts internamente. Possui bom suporte, mas ainda têm os mesmo problemas mencionados no tipo de carregamento por quadros.
Sua vantagem para aplicações web que emulam aplicações desktop é a não inclusão de carregamento de scripts na lista de histórico.
Para implementar, uma requisição é criada via script. O código é então interpretado podendo gerar ações no layout da página. A interação com o servidor é possível durante o carregamento do script.
XmlHttpRequest
Suporte recente (datado de 2001) que visa cobrir as falhas de monitoramento existentes na metodologia de quadros. No entanto, devido à sua recente inclusão, possui um suporte aos browsers pós-2001. Bindows™ possui suporte a este tipo de objeto, conforme falaremos mais tarde.
Sua grande virtude está no controle de cabeçalhos e monitoramento do status da requisição. Seu único ponto contra é a não inclusão na listagem do histórico; no fim, para uma aplicação web semelhante à uma desktop, isto é até vantajoso.
A implementação consiste em criar uma requisição via JavaScript, definir uma série de parâmetros e enviar. Através do evento (readystatechange), é possível monitorar o status da resposta e assim tomar diversos caminhos distintos, de acordo com o conteúdo retornado. Seu código é mais enxuto que a metodologia de quadros e muito mais intuitivo; possui suporte a requisições GET e POST, bem como qualquer outro tipo de requisição HTTP.
Outras formas...
Outras formas de interação com o servidor foram desenvolvidas, tais como CSS Server, Live! Connection, Image Server Request, etc. Destas, a mais interessante é a Live! Connection, que possui uma interação com o lado do cliente (navegador) similar à linguagemm Java.
Transporte de dados
Texto Puro (Plain Text)
A forma mais simples de se trabalhar com transporte de dados é utilizando texto puro. Esta forma é bastante utilizada no retorno de uma frase simples ou até mesmo uma validação feita com sucesso ou não.
JSON (JavaScript Object Notation)
Uma variante muito útil de transporte de dados, utilize a simplicidade do texto puro com a notação JavaScript afim de realizar o transporte de variáveis completamente. Com este recurso, é possível transportar objetos, arrays, strings, números, booleanos, etc. Bindows™ possui suporte nativo a este método de transporte por meio do componente BiJson e seu carregador associado é o BiJsonLoader. XML (eXtensible Markup Language)
Forma mais completa e complexa de transportar dados, possibilitando realizar até mesmo consultas (queries) no conjunto, uma vez este retornado. Altamente estruturado, é possível percorrer uma larga escala de dados de forma relativamente simples, expandindo ainda mais o leque de possibilidades de interação com o usuário numa aplicação.
Bindows™ e AJAX: Um relacionamento íntimo
Bindows™ foi projetado para satisfazer aos mais íntimos desejos da Web 2.0. Uma das metas desta nova Web é a considerável redução de transporte de dados por parte do servidor e a melhoria da usabilidade de páginas, pondo sempre o usuário em foco e tentando melhorar ao máximo sua experiência em termos de navegabilidade.
O framework possui inúmeras formas de se implementar AJAX intuitivamente e sem que o usuário se preocupe com diferentes padrões de implementação por parte dos navegadores modernos. A seguir, estudaremos alguns componentes que Bindows™ nos provê para criar tal tipo de interação.
Para desenvolver aplicações utilizando o Bindows™ você pode fazer o download do framework ou utilizar o programa de avaliação, ambos no site www.bindows.com.br.
BiScriptLoader
Componente capaz de abstrair toda a definição de JavaScript Remote Scripting. É um objeto interno, mas que pode ser utilizado sem problemas pelos seus componentes personalizados. Para que isto seja possível, é necessário carregar o pacote "Loaders" do Bindows™.
Suponhamos que ao clicar em um botão, seja executado algo no servidor e que retorne um script. É uma metodologia comum de ação AJAX e o Bindows™ auxilia nesta tarefa de forma simples. Para simplificar, será exposto um exemplo e seus comentários serão feitos posteriormente.
<?xml version="1.0" encoding="utf-8"?>
<Application autoNameMapping="true">
<Window caption="Bindows Test">
<Command id="clickCommand" />
<Button id="btnTest" text="Clique aqui!" command="clickCmd"/>
<Label id="lblTest" text="" top="30" left="10"/>
</Window>
<Resources>
<Package name="Loaders"/>
<Script>
<![CDATA[
function Index()
{
clickCommand.addEventListener("execute", function (e) {
(new BiScriptLoader()).load("aSerCarregado.php");
});
};
Index.main = function () { new Index; };
]]>
</Script>
</Resources>
</Application>
No exemplo acima, carregamos o pacote "Loaders" (<Package name="Loaders"/>) e habilitamos assim a possibilidade de se invocar uma série de novos componentes de carga de dados. Em específico, estamos interessados no componente BiScriptLoader.
Não está no escopo deste artigo explicar a API em detalhes, apenas uma introdução a possíveis formas de se implementar AJAX utilizando Bindows™.
Este componente possui o método load, que é responsável por carregar e incorporar o conteúdo do arquivo na aplicação. Ao realizar a carga, é possível que um código do lado do servidor possa ser executado, em qualquer linguagem, por exemplo, ASP, .NET, PHP, JSP, Ruby, etc. Ao executar este código, uma possível resposta poderia ser embutida no script que é carregado. No nosso caso, vamos utilizar a linguagem PHP para exemplificar como é possível esta interação. Veja o código abaixo:
<?php
$resposta = "Script carregado para " . $_SERVER["REMOTE_ADDR"] . "!";
?>
var l = application.getComponentById("lblTest");
if (l) {
l.setText("<?=$resposta?>");
}
Definimos uma resposta na forma de um conjunto de comandos em JavaScript (estamos utilizando neste caso, plain text como transporte de dados), mas criamos ao mesmo tempo algum código do lado do servidor para exemplificar como é possível. No nosso exemplo, foi gerada uma string simples, mas nada impede, por exemplo, que seja carregado uma listagem em um componente BiComboBox obtida via Banco de Dados através de uma linguagem do lado do servidor qualquer.
BiTextLoader
Este componente, apesar de fazer parte do pacote "Loaders", não é preciso ser carregado; ele é automaticamente carregado durante a inicialização do Bindows™ framework e tem como objetivo carregar texto puro. Possui utilização tão simples quanto o BiScriptLoader, exceto pelo fato que não é possível executar códigos JavaScript diretamente. Veja exemplo abaixo:
<?xml version="1.0" encoding="utf-8"?>
<Application autoNameMapping="true">
<Window caption="Bindows Test">
<Command id="clickCommand" />
<Button id="btnTest" text="Clique aqui!" command="clickCommand" />
<Label id="lblTest" text="" top="30" left="10"/>
</Window>
<Resources>
<Package name="Loaders"/>
<Script>
<![CDATA[
function Index()
{
var self = this;
clickCommand.addEventListener("execute", function (e) {
// Aborta uma requisicao caso ela ainda nao tenha sido completada
if (self._request) {
self._request.abort();
self._request.dispose();
}
self._request = new BiTextLoader();
self._request.addEventListener("load", self._onRequestLoad);
self._request.load("aSerCarregado.php");
});
};
Index.addProperty("request", Function.READ);
Index.prototype._request = null;
Index.prototype._onRequestLoad = function (e)
{
var l = application.getComponentById("lblTest");
if (l) {
l.setText(this.getText()); // this referencia instancia de BiTextLoader
}
};
Index.main = function () { new Index; };
]]>
</Script>
</Resources>
</Application>
O código de aSerCarregado.php é:
<?php echo "Script carregado para " . $_SERVER["REMOTE_ADDR"] . "!"; ?>
Como pode perceber, o código necessário para realizar a mesma tarefa é um pouco mais complexo. No entanto, este recurso possui não somente esta, mas outras finalidades que, porventura, sejam mais interessantes do que a carga via BiScriptLoader. Um bom exemplo deste uso é na carga de um texto grande para edição dentro de um BiTextField.
BiJsonLoader
Possui o mesmo princípio de funcionamento do BiTextLoader, exceto pela forma de transporte de dados (utiliza JSON ao invés de Plain Text). Difere principalmente da forma como os dados são obtidos (ao invés de getText, utiliza getData). Devido à sua extrema semelhança de implementação com o exemplo anterior, não listaremos novo exemplo aqui.
BiXmlLoader
Nosso último componente a ser analisado neste tutorial é, sem dúvida, o mais complexo de todos os carregadores de dados. Transporta dados em XML e, seu modo de recuperação de dados carregados não é tão simples e acessível quanto ao dos dois últimos carregadores. Vejamos o seguinte exemplo:
<?xml version="1.0" encoding="utf-8"?>
<Application autoNameMapping="true">
<Window caption="Bindows Test">
<Command id="clickCommand" />
<Button id="btnTest" text="Clique aqui!" command="clickCommand" />
<Label id="lblTest" text="" top="30" left="10"/>
</Window>
<Resources>
<Script>
<![CDATA[
function Index()
{
var self = this;
clickCommand.addEventListener("execute", function (e) {
// Aborta uma requisicao caso ela ainda nao tenha sido completada
if (self._request) {
self._request.abort();
self._request.dispose();
}
self._request = new BiXmlLoader();
self._request.addEventListener("load", self._onRequestLoad);
self._request.load("aSerCarregado.php");
});
};
Index.addProperty("request", Function.READ);
Index.prototype._request = null;
Index.prototype._onRequestLoad = function (e)
{
var l = application.getComponentById("lblTest");
if (l) {
// this referencia instancia de BiXmlLoader
var o = BiXmlDocument.create();
o.loadXML(this.getText());
l.setText(o.text);
}
};
Index.main = function () { new Index; };
]]>
</Script>
</Resources>
</Application>
Veja também o arquivo XML carregado:
<?php // Short tags habilitado no PHP impede criar diretamente esta tag echo "<?xml version=\"1.0\" encoding=\"utf-8\"?>"; ?> <data> <str>Script carregado para <?php echo $_SERVER["REMOTE_ADDR"]; ?>!</str> </data>
Como se pode ver, este exemplo requer um código ainda mais refinado para interpretar o mesmo case implementado nos componentes anteriores. Apesar de ser de difícil depuração, é o mais indicado para carregar grandes blocos de dados, especialmente numa listagem com componentes BiGrid.
A forma de obtenção da string foi simplificada, não sendo de fato a melhor forma de se recuperar um bloco.
Conclusão
Bindows™ foi projetado visando atender às emergentes demandas de software para Web, e a metodologia de implementação de sistemas AJAX não ficou de fora. Este framework é considerado uma das mais completas e simples formas de se trabalhar usando está metodologia, por possuir um código unificado, abstrair claramente as diferenças entre browsers e acima de tudo, por prover dezenas de componentes, cada um com seu objetivo definido, sem necessitar escrever código próprio para cada forma de implementação AJAX.
A Web 2.0 está se torna presente e Bindows™ atinge todos os objetivos desta nova Web. Maior possibilidade de interação, concisão de código, robustez; é isto o que faz de Bindows™ o melhor framework de criação de aplicações Web, maiores detalhes e exemplos sobre este framework podem ser encontradros no site www.bindows.com.br
