Curso de Joomla em várias modalidades só aqui no Joomla Brasília

Criando o módulo Ajax

Para o módulo que irá exibir as informações que retornaram com o Ajax, você irá fazer reutilização de código, uma vez que o Joomla é cheio de rotinas e objetos que podem ser tratados e utilizados dentro de suas próprias extensões. Neste caso, em vez de implementar o código de uma janela pop-up a partir do zero, usaremos a rotina do próprio joomla para tal.

Joomla inclui uma excelente rotina de janela pop-up que permite tudo, desde a personalização de cores até o ajuste da configuração do local de exibição. A rotina é a overLib, criada em JavaScript e escrita por Erik Bosrup (Web www.bosrup.com/overlib/), que gentilmente permitiu que fosse incluído na instalação do Joomla. Você pode visitar seu site para buscar a versão mais recente se você quiser implementá-la fora do Joomla.

Para usá-la dentro do Joomla, você precisa adicionar somente uma única linha:

<script type="text/javascript" src="/includes/js/overlib_mini.js"> </ script>

A partir desta referência, você pode ver o código armazenado no diretório includes/js/. Você deve estudar o código quando tiver um tempo livre para que possa ver todos os parâmetros e características que ela inclui.

Criando a pasta do módulo e o arquivo de manifesto XML

Para o módulo, crie uma pasta chamada mod_articleajax. Na pasta, crie um arquivo chamado mod_articleajax.xml e digite o seguinte código:

<?xml version=”1.0” encoding=”utf-8”?>
<install type=”module” version=”1.5.0”>
<name>Article Ajax</name>
<version>1.5.0</version>
<description>This module will display links to 5 current articles. <p />
Each link has an onMouseOver event to activate an
Ajax routine to retrieve article information from
com_articleinfo.
</description>
<files>
<filename module=”mod_articleajax”>mod_articleajax.php</filename>
</files>
</install>

Este código é um simples arquivo de manifesto xml. Você poderá melhorar a aplicação incluindo outros arquivos e parâmetros no xml.

Criando mod_articleajax

Crie um arquivo dentro da pasta chamada mod_articleajax.php e digite o seguinte código

<?php
/**
* @version $Id: mod_articleajax.php 5203 2007-07-27 01:45:14Z DanR $
* This module will display links to 5 current articles.
* Each link has an onMouseOver event to activate an
* Ajax routine to retrieve article information from
* com_articleinfo.
*/
?>
<script type=”text/javascript” src=”includes/js/overlib_mini.js”></script>
<script type=”text/javascript”>
// Cria uma variável de requisição xml
var myRequest = false;
function displayAjax(tempArticleID) {
// Configuração da URL da consulta do componenteL
var myURL =
// ALTERE A URL DE ACORDO COM A CONFIGURAÇÃO DE SEU SERVIDOR WEB LOCAL OU REMOTO
‘http://localhost/index.php?option=com_articleinfo&format=raw&articlenum=’
+ tempArticleID;
// Limpa o myRequest
myRequest = false;
// Para browsers: Safari, Firefox, etc. use um modelo XML
if (window.XMLHttpRequest) {
myRequest = new XMLHttpRequest();
if (myRequest.overrideMimeType) {
myRequest.overrideMimeType(‘text/xml’);
}
} else if (window.ActiveXObject) {
// Para browsers: IE, versão 6 e anteriores, use outro modelo
try {
myRequest = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
myRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
// Verifica se a requisição do objeto é válida
if (!myRequest) {
overlib(‘Error: Cannot create XMLHTTP object’);
return false;
}
// Linka a função display para o resultado retornado
myRequest.onreadystatechange = displayReturn;
// Open the URL request
myRequest.open(‘GET’, myURL, true);
// Send request
myRequest.send(null);
}
function displayReturn() {
// Check to make sure result came through, 4=complete
if (myRequest.readyState == 4) {
// Check HTTP status code
if (myRequest.status == 200) {
// Get head XML object
var article =
myRequest.responseXML.getElementsByTagName(‘article’);
// Pega os elementos título e corpo do artigo
myTitle =
article[0].getElementsByTagName(‘title’)[0].firstChild.nodeValue;
myBody =
article[0].getElementsByTagName(‘body’)[0].firstChild.nodeValue;
// Mostra a janela do pop up
overlib(myBody,CAPTION,myTitle,BELOW,RIGHT);
} else {
// erro ao cria o pop up
overlib(‘There was a problem with the request.’,
CAPTION,’Retrieval Error’,BELOW,RIGHT);
}
}
}
</script>
<small>Ajax enabled module</small><br />
<?php
// no direct access
defined( ‘_JEXEC’ ) or die( ‘Restricted access’ );
// Define local variables
$db =& JFactory::getDBO();
$user =& JFactory::getUser();
$userId = (int) $user->get(‘id’);
// Define date parameters to ensure articles are available
$nullDate = $db->getNullDate();
$now = date(‘Y-m-d H:i:s’, time());
// Create search string to display only published articles
$where = ‘a.state = 1’ .
“ AND (a.publish_up = ‘“ . $nullDate .
“‘ OR a.publish_up <= ‘“ . $now . “‘)” .
“ AND ( a.publish_down = ‘“ . $nullDate .
“‘ OR a.publish_down >= ‘“ . $now . “‘)”;
// Create query
$query = “SELECT a.id, a.title \n” .
“ FROM #__content AS a \n” .
“ WHERE “ . $where . “\n” .
“ AND a.access <= “ . $userId;
// Execute query to return a maximum of 5 records
$db->setQuery( $query, 0,5);
if ($rows = $db->loadObjectList()) {
// Process each article row
foreach ( $rows as $row )
{
// Process article title
$artTitle = JText::_($row->title);
// Create mouseover event to call displayAjax function
echo “<span onmouseover=displayAjax(“ . $row->id . “);
onmouseout=nd(); >”;
// Create link for the current article
echo “<a href=index.php?option=com_content&view=article&id=” .
$row->id . “&Itemid=44>” . $artTitle . “</a><br /></span>\n”;
}
}
// Display error message if db retrieval failed.
echo $db->getErrorMsg();
?>

Tal como acontece com o código Ajax anteriormente, você precisa modificar a parte do código que chama a URL na função displayAjax().
...
function displayAjax(tempArticleID) {
// Setup component query URL
var myURL =
'http://localhost/labmvc/index.php?option=com_articleinfo&format=raw&articlenum='
...

Depois de ter todo o código pronto, compacte o pacote do módulo em um arquivo chamado mod_articleajax.zip e use o Gerenciador de extensão para instalá-lo. Se você mantiver a posição do módulo fixado para a esquerda, ele será exibido na na janela principal.

Abra uma janela do navegador e acesse a página principal do seu site. Quando o cursor do mouse é movido sobre cada um dos links, uma janela pop-up será exibida, que mostra o título e os primeiros 200 caracteres do conteúdo do artigo, como mostrado na Figura abaixo. Como você pode ver, Ajax acrescenta uma interface para feedback instantâneo a uma ação do usuário.

A partir deste simples evento, você pode começar a criar suas próprias soluções Ajax. Mas, este código é um pouco mais complexo do que o componente e Você vai precisar estudar bem o código para entender seu funcionamento.



Janela Pop-Up

O código do módulo começa com a chamada ao script necessário para adicionar a funcionalidade overLib ao módulo. Com a biblioteca overLib disponível, uma chamada para o overLib() irá mostrar a janela pop-up. Há um grande número de parâmetros que você pode definir para controlar a janela de exibição, incluindo altura, janela, cor, localização da janela, e manipulação de texto.

Funções de requisição

displayAjax() - A função displayAjax é quase idêntica a utilizada no início da informação exemplo simples, produto. A única mudança significativa é o argumento passado para a função. Em vez de aceitar uma URL, A função requer o articleId, da qual ela cria a URL para acessar o componente com_articleinfo.

displayReturn() - A função displayReturn é muito diferente. Em vez de simplesmente recuperar o texto do componente (usando o objeto responseText), o novo código acessa o objeto responseXML para ter acesso aos dados do objeto da árvore XML. O primeiro código cria uma referência para o elemento artigo. Em seguida, ele recupera os valores do título e elementos do corpo, utilizando a propriedade nodeValue.

O texto desses elementos é usado para chamar a função overLib(), submetendo-as como texto e uma legenda para a apresentação. Isso é tudo o que é necessário para a recuperação de parte do módulo de Ajax. A parte da interface do usuário é um pouco mais complexa, porque o banco de dados Joomla deve ser acessado para recuperar as referências adequadas do artigo.

Encontrar os artigos na base de dados Joomla

O código do artigo não pode simplesmente pegar o título do artigo atual e colocá-lo no display do módulo. Caso contrário o acesso não autorizado ao conteúdo, será possível. O código precisa de proteção para tornar o conteúdo disponível de forma segura. Portanto, após as referências ao banco de dados do usuário, são criados ID de usuário e os dados de variáveis necessárias para estabelecer a pesquisa. O valor de $nullDate será utilizada para busca de artigos que não têm data de validade.

A variável $now permitirá que a exibição de artigos existentes seja limitada, àqueles que estejam realmente publicados, evitando artigos com data de publicação futura ou expirada.

O status $where da consulta é construído de modo a que o artigo seja publicado formalmente e que sua publicação está dentro do prazo atual. A consulta a cláusula Where é então adicionada aos estados da $variável de consulta, que solicita apenas a identificação do artigo e colunas de título. Para o módulo, apenas a tabela de conteúdos entradas precisam ser mostradas, assim não há razão para recuperar os dados desnecessários.

Finalmente, o setQuery() é usado para executar a consulta e recuperar cinco registros ou menos. Poderia recuperar todos os artigos, mas a altura do display do módulo pode ocupar espaço demais da tela. Melhor para limitar a consulta por tamanho de registro ou dados.

O conjunto de registros que são retornados pela consulta é processado. Para cada registro, é criado um <span> que contém um evento onMouseOver. A partir do código fonte, você pode ver o código que está na saída para a página HTML que chama a função displayAjax () e possui o ID do artigo do registro atual codificados. Se for para examinar o código fonte da página, uma vez que seja exibido no navegador, você airá perceber que cada codificação do evento onMouseOver contém o seu próprio ID do artigo. Ele também contém o código para o evento onMouseOut para esconder qualquer janela exibida. Contidos no intervalo HTML é um link personalizado para o artigo da linha atual. O link é gerado para acessar o componente com_content padrão para exibir o artigo e o ID do artigo é passado através de o parâmetro id. O nome do link é o título recuperado da linha. Finalmente, as mensagens de erro foram geradas pela recuperação de banco de dados, exibidas abaixo do módulo de saída.

você deve agora ter uma idéia muito boa de como implementar uma solução AJAX no CMS Joomla. Este fundamento básico pode ser estendido em quase todas as direções para criar mais interatividade Ajax no seu projeto web.

Para baixar o módulo, basta clicar aqui.

Artigo traduzido e adaptado por Júlio Coutinho. O original encontra-se no livro Professional Joomla Programmer to programmer, capítulo 7 Joomla! and Ajax