По моему мнению, одним из лучших модулей, добавленных к Drupal 6, был фреймворк AHAH (или Asynchronous Html And Http), так что в этом уроке я попытаюсь дать вам выстрый обзор того, как его можно использовать. Wikipedia обобщает это понятие таким образом:

Подобно **Ajax**, **AHAH** является методом для динамического обновления страниц при помощи Javascript, но с той разницей, что отклик на запрос используется напрямую, без парсинга на стороне клиента. Это означает, что отклики сервера должны иметь вид текста или уже включать правильную структуру XHTML/HTML.

По существу, когда пользователь предпринимает какое-либо действие (например, щелкает на ссылке или на кнопке формы) AHAH может откликнуться на это действие, вызывая URL и возвращая HTML или текст без обновления всей страницы.

Как это работает

Фреймворк AHAH полностью встроен в Drupal 6, так что все, что вам нужно, это использовать хук API формы Друпала. Ниже приведен пример, как сделать форму API для использования AHAH.

<?php
  $form['my_form_submit'] = array(
    '#type' => 'submit',
    '#value' => t('Submit'),
    '#weight' => 1,
    '#submit' => array('my_form_submit'),//none JS version
    '#ahah' => array(
      'event' => 'click',
      'path' => 'mymodule/js',
      'wrapper' => 'myform-wrapper',
      'method' => 'replace',
      'effect' => 'fade',
      'progress' => array(
        'type' => 'bar',
        'message' => t('Loading...')
      )      
    ),
?>

Обратив основное внимание на массив #ahah в конце массива формы, шаг за шагом объясним использование различных параметров:

#ahah[‘event’]

Это тип события, которое должно произойти над элементом $form (в этом примере кнопка Submit) для того чтобы запустить AHAH.

Возможные значения: ‘click’, ‘blur’, ‘change’ (По умолчанию используется click)

_Пример: Examples:_ пользователь щелкает на кнопке (click) или пользователь выбирает значение из выпадающего меню (change)

#ahah[‘path’]

Это пункт меню или URL, который вызывается, когда происходит событие. Без этого AHAH не запустится.

В верхнем примере нам нужно иметь соответствующий пункт меню, определенный в нашем hook_menu примерно так:

<?php
function mymodule_menu() {
$items[‘mymodule/js’] = array(
‘page callback’ => ‘mymodule_js’,
‘access arguments’ => array(‘access mymodule js’),
‘type’ => MENU_CALLBACK,
);

return $items;
}

/**
* callback function for mymodule/js
* The return HTML will be outputted by AHAH
*/
function mymodule_js() {
return drupal_json(array(‘status’ => TRUE, ‘data’ => “Hello Drupal World”));;
}
?>
>
> Для того чтобы Javascript мог понять, какие значения/HTML ему нужно возвращать, важно использовать drupal_json function.

Можно также использовать модуль AHAH helper , который обработает для вас все задания меню.

#ahah[‘wrapper’]

Это ID элемента HTML на текущей странице, который должен быть обновлен после вызова пункта меню с соответствующим #ahah[‘path’].

В нашем примере 'wrapper' => 'mymodule-wrapper' соответствует <div id="mymodule-wrapper">.....</div> и этот div должен показать текст “Hello Drupal World”;, возвращаемый функцией меню mymodule_js() при запуске AHAH.

#ahah[‘method’]

Это то, как мы хотим, чтобы HTML, возвращенный функцией меню mymodule_js() был прикреплен к нашему разделу, определенному #ahah[‘wrapper’].

По умолчанию он замещает HTML, в настоящий момент находящийся в данном разделе, новым, но вы также можете задать следующие варианты:

‘after’ = Вставляет возвращаемый HTML после данного раздела

‘append’ = Добавляет возвращаемый HTML внутрь элемента раздела.

‘before’ = Вставляет возвращаемый HTML внутрь данного разделом.

‘prepend’ = Вставляет возвращаемый HTML перед данным разделом.

#ahah[‘effect’]

Это визуальный эффект jQuery, который вы хотите применить к элементу раздела, когда он получит новый HTML из функции меню.

Возможные значения: ‘none’ (по умолчанию), ‘fade’, ‘slide’.

#ahah[‘progress’]

Это тип анимации, который вы хоттите показать в процессе ожидания пользователем отклика на запуск функции меню AHAH. Это может быть либо прогресс-бар, либо мигающая иконка (throbber); опционально вы также можете добавить какое-либо сообщение.

Значение #ahah[‘progress’] должно быть массивом настроек (смотрите пример выше). Здесь приведен полный список параметров:

#ahah[‘progress’][‘type’] = Тип анимации для показа, бар или throbber.

#ahah[‘progress’][‘message’] = Необязательное сообщение, которое будет показываться вместе с баром или throbber. Вы должны заключить его текст в t().

#ahah[‘progress’][‘url’] = Необязательный URL на пункт меню, который определяет, насколько заполнен прогресс-бар.

Итак, все это было очень сложная теория. Вот диаграммы, которые проиллюстрируют, как работает последовательность AHAH:

Пример

Итак, давайте сейчас перейдем к примеру, как AHAH используется в Drupal в реальной жизни. Для этого посмотрим модуль опроса, который поставляется как часть ядра Drupal 6.

Этот модуль использует AHAH на странице, создаваемой опросом, для того чтобы позволить пользователям добавить больше вариантов вопросов.

В функции poll_form следующий код описывает, как AHAH должен взаимодействовать с элементом формы “poll_more”;:

<?php

//AHAH declaration in poll_form function
$form['choice_wrapper']['poll_more'] = array(
  '#type' => 'submit',
  '#value' => t('More choices'),
  '#description' => t("If the amount of boxes above isn't enough, click here to add more choices."),
  '#weight' => 1,
  '#submit' => array('poll_more_choices_submit'), // If no javascript action.
  '#ahah' => array(
    'path' => 'poll/js',
    'wrapper' => 'poll-choices',
    'method' => 'replace',
    'effect' => 'fade',
  ),
);
?>

Код указывает, какое меню poll/js будет вызвано после запуска AHAH, так что модуль должен определить пункт меню для этого примерно таким образом:

<?php
function poll_menu() {
  .....  
  $items['poll/js'] = array(
    'title' => 'Javascript Choice Form',
    'page callback' => 'poll_choice_js',
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
  ......
}
?>

Как можно увидеть, пункт меню вызывает функцию poll_choice_js, и теперь давайте посмотрим, что она делает:

<?php
function poll_choice_js() {
  $delta = count($_POST['choice']);

  // Создаём новый элемент формы
  $form_element = _poll_choice_form($delta);
  drupal_alter('form', $form_element, array(), 'poll_choice_js');

  // Создаем новую форму.
  $form_state = array('submitted' => FALSE);
  $form_build_id = $_POST['form_build_id'];
  // Добавляем новый элемент к сохраненной форме. Без этого
  // Drupal просто не знает о существовании новых элементов и не будет
  // обрабатывать их. Мы извлекаем форму из кэша, добавляем элемент и сохраняем форму.
  if (!$form = form_get_cache($form_build_id, $form_state)) {
    exit();
  }
  $form['choice_wrapper']['choice'][$delta] = $form_element;
  form_set_cache($form_build_id, $form, $form_state);
  $form += array(
    '#post' => $_POST,
    '#programmed' => FALSE,
  );

  // Перестраиваем форму.
  $form = form_builder('poll_node_form', $form, $form_state);

  // Создаем новый вывод.
  $choice_form = $form['choice_wrapper']['choice'];
  unset($choice_form['#prefix'], $choice_form['#suffix']); // Предотвращаем дублирование оболочек.
  $choice_form[$delta]['#attributes']['class'] = empty($choice_form[$delta]['#attributes']['class']) ? 'ahah-new-content' : $choice_form[$delta]['#attributes']['class'] .' ahah-new-content';
  $choice_form[$delta]['chvotes']['#value'] = 0;
  $output = theme('status_messages') . drupal_render($choice_form);

  drupal_json(array('status' => TRUE, 'data' => $output));
}
?>

Это достаточно сложная функция обратного вызова, изучение которой лежит за пределами данной статьи. Сначала она создает новый элемент формы для дополнительного выбора, обрабатывает его и возвращает его AHAH через функцию drupal_json.

Чтобы увидеть пример в действии просто активизируйте модуль опроса и перейдите к пункту yoursite.com/node/add/poll.

Вот и все! Надеюсь, это руководство показало, насколько полезен AHAH и подвигнет вас на его испытание! Спасибо за внимание!

Оригинал статьи: здесь.

Комментарии

comments powered by Disqus