Введение Так как многие в наше время интересуются, как интегрировать AJAX в компоненты Joomla CMS, я написал маленький учебник и разработал демо-компонент, на основе которых легко показать, как это сделать. Скачать демо компонент com_xajaxdemo Терминология Ajax (от англ. Asynchronous JavaScript and XML — «асинхронный JavaScript и XML», произносится аджа́кс) — это подход к построению интерактивных пользовательских интерфейсов веб-приложений. При использовании Ajax веб-страница не перезагружается полностью в ответ на каждое действие пользователя. Вместо этого с веб-сервера догружаются только нужные пользователю данные. Ajax — один из компонентов концепции DHTML. (Взято из википедии) XAJAX — это open source библиотека классов PHP, которая позволяет вам легко создавать мощные, веб-ориентированные Ajax-приложения, использующие HTML, CSS, JavaScript и PHP. Для того, чтобы получить более подробную информацию об XAJAX, можно обратиться к следующим статьям: Joomla плагин(мамбот) - это скрипты (или их совокупность), которые могут исполняться в Joomla при наступлении определенных событий. В качестве примера можно привести WYSIWYG редакторы, которые подгружаются при редактировании текста. Инструментарий Если вы хотите успешно интегрировать XAJAX в CMS Joomla, то должны убедиться в том, что у вас установлена и отлажена связка Apache+PHP+MySQL (в случае использования на локальной машине). Если же ваш сайт размещен в сети, то за вас об этом должен позаботиться хостер. Joomla CMS - собственно сама система управления сайтом, для которой будем писать компонент. Если вы новичок и еще только начинаете осваивать данную систему управления сайтом, то настоятельно рекомендуем вам посетить следующие сайты: PHP-редактор. Идеальный вариант - это использование среды ZEND (с ZEND.com), но можно применять и такие программы, как Edit Plus или PHP Editor. Обращаем ваше особое внимание на то, без взаимодействия и правильной работы вышеописанных средств, вести разговор дальше о чем-либо будет просто нецелесообразно. xAJAX plugin для Joomla 1.0.x - плагин, который позволяет использовать в ваших компонентах, написанных для Joomla, библиотеку XAJAX. При этом не нужно каждый раз ее включать в компонент. Достигается это благодаря тому, что у каждого компонента в Joomla есть свое API – данный факт позволяет особо не переживать об интегрировании библиотеки и CMS. Перейдем к рассмотрению вопроса об установке и настройке плагина. Установка xAJAX plugin'а Для этого зайдите в зону администратора Joomla. После авторизации выбирите Главное меню->Инсталляторы->Установка/удаление мамботов. Проделав вышеописанные действия, перед вами должен будет появиться экран, который показан на рисунке 1. Рис. 1 Инсталляция мамботов в Joomla CMS.
Теперь нажмите кнопку, которую я обвел желтым цветом ("Browse...") и вам покажется диалог, изображенный на рисунке 2. Рис.2 Выбор файла для загрузки. 
Выберите файл плагина (xajax4Joomla.plugin.zip) и щелкните на кнопке "Открыть" (она выделена желтым цветом). При этом диалог закроется и вы снова окажитесь в инсталляторе мамботов Joomla.
Для установки нажмите кнопку Загрузить и установить После этого вы должны увидеть следущий экран. Рис. 3 Сообщение об успешной установке мамбота. 
Теперь плагин установлен. Остается толко его опубликовать, то есть, фактически, включить на выполнение.
С этой целью зайдем в Главное меню->Мамботы->Мамботы сайта. После чего перед нами откроется следующий экран рис.4. Рис. 4. Менеджер мамботов. 
В столбце Название мамбота выберем плагин xAJAX4Joomla, нажав на ссылку XAJAX System Mambot For Joomla. При этом откроется редактор для редактирования плагина и задания его параметров (см. рис.5) Рис. 5 Редактор xAJAX плагина. .jpg)
Установите параметры, обведенные желтым цветом в ON и установите параметр Опубликован тоже в ON. Для сайтов на русском определите параметр Encoding равным windows-1251. После этого нажмите кнопку Сохранить в правом верхнем углу. На этом установка и настройка плагина закончена, пришло время рассмотреть сам компонент. Анализ компонента com_xajaxdemo Рассмотрим как был создан компонент com_xajaxdemo. Структура компонента обычная и ничем не отличается от сотни других. Однако, есть одна тонкость, на которую следует обратить особое внимание. Она заключается в наличии файла xajax.xajaxdemo.php. В этом файле сосредоточены все функции, которые будут вызываться посредством AJAX с сервера. Обобщенное имя файла для каждого конкретного компонента задается по следующей схеме:xajax.Имя_компонента.php Ниже представлен подробный листинг файла xajax.xajaxdemo.php. Вначале мы объявляем константу компонента.
Далее регистрируем наши функции для того чтобы они могли быть вызваны.
Теперь записываем собственно функции которые будут выполнятся. addAssign("timebox", "innerHTML", $sOut);
return $objResponse->getXML();
}
/**
* Checking name
*
* @param string $sName
* @return unknown
*/
function checkName($sName) {
$objResponse = new xajaxResponse();
if (function_exists('iconv')) {
$sName=iconv('UTF-8',_XAJAXDEMO_B_ISO,$sName);
}else {
$objResponse->addAssign("ncheck", "innerHTML", _XAJAXDEMO_B_NOICONV);
$objResponse->addScript("document.getElementById('ncheck').style.color = 'red';");
return $objResponse->getXML();
}
if(preg_match('/^(['._XAJAXDEMO_EX2_B_1.']){0,50}$/', $sName)) {
$checkVal = _XAJAXDEMO_EX2_B_2;
if(strlen($sName) < 6) {
$checkVal = _XAJAXDEMO_EX2_B_3;
}
if($sName == "") {
$checkVal = "";
}
}
else {
if(strlen($sName) > 0) {
$checkVal = _XAJAXDEMO_EX2_B_4;
}
}
$checkVal=$sName;
$objResponse->addAssign("ncheck", "innerHTML", $checkVal);
if ($checkVal == _XAJAXDEMO_EX2_B_2) {
$objResponse->addScript("document.getElementById('ncheck').style.color = 'green';");
}
else {
$objResponse->addScript("document.getElementById('ncheck').style.color = 'red';");
}
return $objResponse->getXML();
}
/**
* Checking age
*
* @param unknown_type $nLeeftijd
* @return unknown
*/
function checkAge($nLeeftijd) {
$checkVal = _XAJAXDEMO_EX2_B_2;
if((!is_numeric($nLeeftijd)) && (strlen($nLeeftijd) > 0)) {
$checkVal = _XAJAXDEMO_EX2_B_5;
}
else {
if($nLeeftijd < 18) {
$checkVal = _XAJAXDEMO_EX2_B_6;
}
if($nLeeftijd > 65) {
$checkVal = _XAJAXDEMO_EX2_B_7;
}
if($nLeeftijd == "") {
$checkVal = "";
}
}
$objResponse = new xajaxResponse();
if ($checkVal == _XAJAXDEMO_EX2_B_2) {
$objResponse->addScript("document.getElementById('lcheck').style.color = 'green';");
}
else {
$objResponse->addScript("document.getElementById('lcheck').style.color = 'red';");
}
$objResponse->addAssign("lcheck", "innerHTML", $checkVal);
return $objResponse->getXML();
}
/**
* Processing form
*
* @param unknown_type $aFormData
* @return unknown
*/
function processForm($aFormData) {
$objResponse = new xajaxResponse();
if (function_exists('iconv')) {
$aFormData['firstname']=iconv('UTF-8',_XAJAXDEMO_B_ISO,$aFormData['firstname']);
$aFormData['lastname']=iconv('UTF-8',_XAJAXDEMO_B_ISO,$aFormData['lastname']);
$aFormData['email']=iconv('UTF-8',_XAJAXDEMO_B_ISO,$aFormData['email']);
}else {
$objResponse->addAssign("theform", "innerHTML", _XAJAXDEMO_B_NOICONV);
$objResponse->addScript("document.getElementById('theform').style.color = 'red';");
return $objResponse->getXML();
}
$sOut = ""._XAJAXDEMO_EX3_B_1."";
$sOut .= ""._XAJAXDEMO_EX3_B_2." ";
$sOut .= "";
$sOut .= "- "._XAJAXDEMO_EX3_B_3." ".$aFormData['firstname']."
";
$sOut .= "- "._XAJAXDEMO_EX3_B_4."".$aFormData['lastname']."
";
$sOut .= "- "._XAJAXDEMO_EX3_B_5."".$aFormData['email']."
";
$sOut .= " ";
$sOut .= ""._XAJAXDEMO_EX3_B_6." ";
$objResponse->addAssign("theform", "innerHTML", $sOut);
return $objResponse->getXML();
}
/**
* getCities
*
* @param unknown_type $sSearch
* @return unknown
*/
function getCities($sSearch) {
require('gemeenten.php');
$sOut = "";
$nCount = 0;
foreach($aCities as $sCity) {
$sPattern = "/^(".strtolower($sSearch).")/";
if(preg_match($sPattern, strtolower($sCity))) {
$nCount++;
$sOut .= "".$sCity."";
$sLastHit = $sCity;
}
}
if($nCount > 31) {
$sOut = "";
}
$objResponse = new xajaxResponse();
if(strlen($sOut) > 0) {
$sOut = "";
$objResponse->addScript("document.getElementById('citybox').style.display = \"block\"");
}
else {
$objResponse->addScript("document.getElementById('citybox').style.display = \"none\"");
}
if($nCount == 1) {
$objResponse->addScript("document.getElementById('citybox').style.display = \"none\"");
$objResponse->addScript("document.getElementById('search').value = \"".$sLastHit."\"");
}
$objResponse->addAssign("citybox", "innerHTML", $sOut);
return $objResponse->getXML();
}
?>
В файле xajaxdemo.php мы выводим HTML функциями javascript , которые являются исполняемыми на стороне клиента и будут вызывать php функции на стороне сервера.
Соответвие между функциями javascript и функциями php можно определить как
имя_PHP_функции - функция PHP
doTimestamp() => xajax_doTimestamp()
xajax_имя_PHP_функции - функция javascript Собственно все . Если есть вопросы задавайте в форуме на http://myjoomla.ru
|
