Seguindo a linha de artigos traduzidos do livro Professional Joomla! Programmer to Programmer, iremos publicar uma coletânea de artigos relativos ao capítulo 7 Joomla e Ajax. Ao longo deste coletânea iremos criar um componente e depois adaptá-lo ao conceito MVC (model view controler) para que o mesmo esteja dentro dos padrões de projeto exigidos pelo CMS Joomla! O nosso componente será um componente Joomla! utilizando o Ajax.
Ajax - O acrônimo "Ajax" significa "Asynchronous Javascript and XML" e combina um poderoso conjunto de tecnologias voltadas para o desenvolvimento web padrão web 2.0. Utilizando Ajax, você pode fazer com que o usuário tenha uma experiência mais interativa com o seu projeto web, seja portal, website ou sistema. O efeito "matrix" de arrastar algo pela tela, é possível graças ao Ajax. No passado, a cada mudança de parâmetro ou seleção de botões em uma página, as alterações eram enviadas ao servidor web e exigiam uma resposta de todo o conteúdo, criando o conhecido "refresh" na página. Quem nunca passou pela situação de preencher uma formulário grande e a cada mudança de página ter de aguardar todo o carregamento do mesmo pelo "browser", que atire a primeira pedra!
Utilizamos o Ajax, por exemplo, para o preenchimento de um formulário. A cada ação do usuário o novo dado é gravado na base de dados . Porém, não há necessidade de ser carregada toda a página web. Desta forma, Ajax funciona permitindo que pequenas quantidades de dados sejam trocadas com o servidor web e as atualizações ocorrem de forma dinâmica e rápida.
Estrutura do Ajax
Ao contrário do que muita gente pensa, Ajax não é uma linguagem de programação, Ajax não é uma tecnologia nova nem tão pouco é um detergente utilizado na limpeza de utensílios da cozinha. Ajax é uma forma de utilizar o javascript assincronamente.
Uma aplicação Ajax combina várias tecnologias existentes na web, por exemplo:
- XHTML (Extensible Hypertext Markup Language) - Linguagem de marcação de texto;
- Cascading Style Sheets (CSS) - Folha de estlos;
- Javascript - Linguagem de programação;
- Document Object Model (DOM) - Especificação da W3C para alteração e edição da estrutura, conteúdo e estilo de um documento eletrônico;
- XML (Extensible Markup Language) - é uma recomendação do W3C para gerar linguagens de marcação;e
- XLST (Extensible Stylesheet Language for Transformation) - é uma linguagem de marcação usada para transformar documentos XML.
Desta forma, a experiência do usuário será muito melhor além de facilitar a implementação de fundamentos importantes do webdesign como acessibilidade, persuasão e encontrabilidade, logicamente dependendo do nível de conhecimento do profissional que vai desenvolver o projeto.
O Javascript é executado no navegador do usuário e se comunica com o servidor da web. Informações podem ser enviadas e recuperadas e pode ser formatado dinamicamente para exibir na janela do navegador.
Uma forma simples e cada vez mais difundida da utilização do Ajax são as janelas "pop-up" que podem ser arrastadas pelo usuário ou mostradas quando da passagem do cursor do mouse sobre determinada região da página web. Fotos, introdução de textos, textos e movie clips, podem ser incluídos no "pop-up" que não será bloqueado pelo navegador do internauta.
As informações exibidas no "pop-up" não estão embutidas no código fonte da página web. As informações são recuperadas do servidor muitas vezes com uma consulta a base de dados. Em geral funciona da seguinte forma: " ao passar o mouse sobre a região pré-determinada, o banco de dados é consultado e o resultado apresentado na janela do "pop-up". Ao retirar o mouse do alvo, a janela é fechada imediatamente sem nenhuma necessidade de "refresh" da página web.
Para que esta "mágica" seja possível, um número de peças de tecnologia devem trabalhar em conjunto:
- O navegador deve ser capaz de executar o javascript para detectar eventos do usuário que representem um pedido para o servidor;
- O servidor deve ser capaz de responder com a informação que corresponda à solicitação feita pelo javascript, devidamente formatada; e
- O código javascritp deve ser capaz de receber as novas informações vindas do servidor, processá-las e formatá-las para exibição através do navegador utilizando DOM.
Isto pode parecer assustador tendo em vista a quantidade de atores do processo. Entretanto, a maior parte dos navegadores, destacando-se os dominantes Internet Explorer (IE) e Mozilla Firefox estão em condições de implementar esta solução.
Navegadores são um capítulo a parte e merecem uma atenção especial.
Campanha por uma Internet melhor
Você sabia que o internet explorer 6 continua a ser o navegador mais utilizado no mundo, apesar de todas as falhas já conhecidas? Que ele é o responsável pela mudança na visualização de muitas páginas web simplesmente por possuir "bugs" que ninguém entende? Nem mesmo quem o criou?
O Imasters está lançando uma campanha pelo " crossbrowser " na Internet. Os navegadores são os " caras " uma vez que tem a responsabilidade de renderizar o código fonte (HTML, XHTML e etc..) e apresentar na tela do nosso computador o resultado gráfico.
A maioria dos navegadores seguem as "webstandards" do W3C e possibilitam que seu website seja "crossbrowser", ou seja, que ele funcione perfeitamente em qualquer navegador. Infelizmente, os que menos seguem os padrões (os da família IE) ainda são os mais usados. Principalmente o IE 6.0 que apesar de ter sido lançado a oito anos ainda domina grande parte do mercado.
Visitem o Imasters e saibam como proceder, é simples, basta colar um script no seu template, logo após a chamada à folha de estilos.
Do lado do servidor, joomla tem incluído no quadro JDocument as opções necessárias para que o CMS possa responder a um pedido através de um componente Ajax personalizado.
Componente Ajax Simples
A demonstração será composta de uma única página da Web que tem um parágrafo com o texto "o meu produto". Quando o cursor do mouse passa por cima do número, o javascript do componente Joomla executa uma consulta ao servidor. Isso retorna uma mensagem simples com o estado do produto em estoque. A mensagem recebida é exibida em uma caixa de alerta. 
Criando o componente
Esta primeira peça na aplicação é o componente joomla. Um componente Joomla pode ser consultado diretamente através de um ítem de menu que vai fazer com que o mesmo seja apresentado no frontend. Portanto, o nosso componente tem apenas uma única saída, apresentando uma linha de texto que irá exibir a aplicação AJAX com o texto resultante.
1) Comece por criar um diretório /com_productinfo dentro do seu diretório components do Joomla. Dentro do diretório com_productinfo, crie um arquivo e nomeie-o de productinfo.php. Digite o seguinte código:
<?php
// no directed access
defined('_JExec') or die ('Restricted access');
echo "Este produto existe em estoque!";
?>
2) Vamos agora criar o arquivo productinfo.xml que possibilitará a instalação de nosso componente bem como irá conter todas as informações referentes ao mesmo.
<?xml version="1.0" encoding="utf-8" ?>
<install version="1.5.0" type="component">
<name>ProductInfo</name>
<version>1.5.0 - Beta</version>
<description>Product Info component for Ajax queries </description>
<files>
<filename component="com_productinfo"> productinfo.php</filename>
</files>
</install>
3) Crie um pacote compactado do componente (zip, tar, targz), nomeie como com_productinfo.zip e use o menu Extensões-> Instalar/Desinstalar existente no backend do Joomla para instalar o novo componente.
Até o próximo artigo...
