Pull to refresh

jQuickForm = генератор форм на PHP (большое обновление)

Reading time 8 min
Views 11K
пример демотиватора
Прошло несколько дней с публикации анонса о появлении на свет jQuickForm (если в двух словах, то jQuickForm это сборка jQuery + HTML_QuickForm2).
Была получено масса положительных отзывов, в т.ч. в личку, много посетителей сайта проекта сказали «LikeIt», а это говорит о том, работа нужная и своевременная.
Итак, сегодня я хочу сказать о том, что на данный момент практически все явные и потайные возможности jQuickForm описаны, а это ни много, ни мало:

Элементы


InputText, InputPassword, Date (выбор даты, состоящий из нескольких элементов типа select), DatePicker (jQueryUI), Slider (jQueryUI — «ползунок»), SliderRange (jQueryUI — диапазон значений), Select, Buttons, Textarea, Page (элемент для построения многостраничного мастера), Static (элемент формы для вставки произвольного HTML), jWysiwyg (простейший редактор), Autocomplete One Array (автокомплит с единственным значением и инициализацией при помощи передачи массива), Autocomplete One Remote (то же самое, но источник — аякс-скрипт), Autocomplete Multiple Array (автокомплит с множеством значений через запятую, используется, например, для формирования списка веб2.0 меток, источник — массив), Autocomplete Multiple Remote (тоже самое с удаленным источником), File Upload (обычный элемент загрузки файлов), и, по заявкам телезрителей — File MultiUpload


Группировка элементов


Это вообще песня! Все элементы формы — это ноды и контейнеры. По сути, контейнер, это тоже нода, но с возможностью содержать в себе другие ноды.
Самым важным в HTML_QuickForm2 является то, что появляется возможность добавления групп друг в друга с неограниченной вложенностью.
Причем добавляя в группу два элемента (first_name, last_name) типа InputText, если вы указываете имя «group_name» для группы, то эти элементы автоматически получают имя «group_name[first_name]» и «group_name[last_name]», соответственно.
Если же в группу имя не добавляется, то визуально элементы могут быть сгруппированы и находиться на одной строке, но иметь свои исходные имена «first_name», «last_name»

Правила валидации


Правила валидации четко разделяются на серверные и клиентские, причем при задании правила можно явно указать где должна быть произведена проверка и, если в первой версии HTML_QuickForm по-умолчанию была серверная проверка, и она выполнялась всегда, а клиентская опционально, то уже во второй версии появилась возможность делать только клиентскую проверку.
Правила из коробки:
«обязательное поле», «минимум», «максимум», «совпадают», «не совпадают», «строго меньше», «не больше», «строго больше», «не меньше», «каждый в группе». «пустой»,
«не пустой».
в принципе из названия понятен принцип проверки правила, отдельно хотелось бы отметить правило «каждый в группе», оно делается для того, чтобы указать для группы элементов (группа это подвид контейнера), какую проверку следует произвести с каждым ее элементом.

Фильтры полей форм


Фильтры в HTML_QuickForm2 — это возможность автоматически приводить элементы у нужному виду, например так:
<?
 $element->addFilter('trim');
?>


* This source code was highlighted with Source Code Highlighter.

В качестве параметра передается имя функции или название метод класса фильтра.
Вы правильно догадались, что для того, чтобы значение поля, которое придет после POST вне зависимости от того, что туда написал пользователь, было целым, — нужно наложить фильтр
<?
 $element->addFilter('intval');
?>


* This source code was highlighted with Source Code Highlighter.


Фильтрация ограничивается только вашей фантазией.

Источники данных


Еще один важный вопрос, который я упустил в анонсе генератора форм и отвечал в комментариях, это заполнение формы перед ее первым показом.
Например при получении новости на редактирование у вас есть ассоциативный массив записи.
<?
  $form = new jQuickForm('simple');
  $fieldset = $form->insertFieldset('Пример работы');
    $fieldset->insertInputText('news_title')
    ->setLabel('Заголовок новости')
    ->setExample('Пример текста');

    $fieldset->insertTextarea('news_text')
      ->setLabel('Содержание новости')
      ->setCols(50)->setRows(5);

  $form->insertInputSubmit('Сохранить новость');

  // выставим значения по-умолчанию
  $form->addDataSource(
    new HTML_QuickForm2_DataSource_Array(array(
      'news_title'    => 'Заголовок новости №1',
      'news_text'    => "Текст новости №1",
    )
  ));

?>


* This source code was highlighted with Source Code Highlighter.

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

Кастомизация внешнего вида формы


Еще одной из главных фишек HTML_QuickForm2 является то, что уменьшается рутинный труд по отрисовке формы, типовые шаблоны для каждого элемента или контейнера элементов уже есть в рендерере по-умолчанию.
Но самое интересное, что вы можете легко перекрывать отрисовку любого элемента формы да и самой формы!

Есть два метода:
1) при помощи CSS (всего лишь внеся пару строк в файл стилей, а можно и изменять inline-css)
2) при помощи изменения конкретного шаблона элемента

Рабочие примеры


Еще меня просили сделать что то реальное с формами, чтобы понять как оно работает, я сделал пример простейшего демотиватора (слегка причесал скрипт с лурка), а также массовый аплоад файлов (файлы не сохраняются, просто происходит имитация обработки, все остальное в рабочем режиме)

Кстати, при добавлении элемента SWF Upload в число элементов формы выявилась одна не приятная особенность, которую прошу учитывать:
если у вас аплоад не публичный, а массовый аплоад скорее всего никто не станет давать делать не авторизованному пользователю, то когда вы отсылаете по очереди флешкой файлы на закачку, то для флеша стартуется новая сессия, так как он представляется совсем по другому, поэтому был реализован механизм передачи идентификатора сессии скрипту закачки, чтобы была возможность понять — кто же реально заливает файлы в данный момент.
Ну, а реализацию защиты от подмены значения идентификатора сессии я оставляю на совести вашей системы управления сайтом.

Интеграция jQuickForm с некоторыми PHP-фреймворками


Производим инициализацию:

Можно это сделать в начале приложения, например в /index.php, или в более правильном месте, например в конфиге.
<?
  //включаем автолоад
  require('vendors/__autoload.php');

  header('Content-Type: text/html; charset=utf-8');
  date_default_timezone_set('Europe/Moscow');

  //добавляем стили представления формы и страницы
  Jaguar::css()->addCss('//quickform.css');

  //Подключаем главный js-файл форм,
  //который отвечает за клиентскую валидацию
  Jaguar::js()->addJs('/js/quickform.js');
?>


* This source code was highlighted with Source Code Highlighter.


Создаем шаблон

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head profile="http://gmpg.org/xfn/11">
    <title>jQuickForm</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <?php echo $jquickform->css; ?>
  <?php echo $jquickform->css_inline; ?>
  </head>
<body>
  <?php echo $jquickform->form; ?>
  <?php echo $jquickform->js; ?>
  <?php echo $jquickform->js_inline; ?>
  <?php echo $jquickform->js_onload; ?>
</body>
</html>


* This source code was highlighted with Source Code Highlighter.


Создаем любую форму в нужном месте

<?
  $form = new jQuickForm('simple');
    $fieldset = $form->insertFieldset('Пример правила compare');
      $pass = $fieldset->insertInputText('pass')
        ->setLabel('Пароль')
        ->setComment('Наберите пароль');
      $pass->addRuleRequired("Пароль надо заполнить");

      $repass = $fieldset->insertInputText('pass')
        ->setLabel('Пароль еще раз')
        ->setComment('Наберите пароль');
      $repass->addRuleCompareEq("Пароли должны совпадать", $pass);
      $fieldset->insertStatic('Обратите внимание значение поля
      "Пароль еще раз" не приходит постом'
);

      $captcha= $fieldset->insertInputText('captcha')
        ->setLabel('Captcha')
        ->setComment('Сколько будет 2+2=?');
      $captcha->addRuleCompareEq("Каптча не разгадана", "4");

    $fieldset->insertInputSubmit('Post!','save');
?>


* This source code was highlighted with Source Code Highlighter.


Выводим форму (пример для Zend_Framework)

<?
  $jquickform = array(
    'css'    => Jaguar::css()->getCss(),
    'css_inline' => Jaguar::css()->getCssInline(),
    'js'     => Jaguar::js()->getJs(),
    'js_onload' => Jaguar::js()->getJsOnload(),
    'js_inline' => Jaguar::js()->getJsInline(),
    'form'    => $form,
  );

  Zend_Loader::loadClass('Zend_View');
  $view = new Zend_View();
  $view->jquickform = $jquickform;

  echo $view->render('page.php');
?>


* This source code was highlighted with Source Code Highlighter.


Выводим форму (пример для Kohana)

<?
 $this->template = new View('module/page');
 $this->template->jquickform->css    = Jaguar::css()->getCss();
 $this->template->jquickform->css_inline = Jaguar::css()->getCssInline();
 $this->template->jquickform->js     = Jaguar::js()->getJs();
 $this->template->jquickform->js_onload = Jaguar::js()->getJsOnload();
 $this->template->jquickform->js_inline = Jaguar::js()->getJsInline();
 $this->template->jquickform->form = $form;
?>


* This source code was highlighted with Source Code Highlighter.


Напоследок совет по интеграции!


Мне уже задавали вопрос — почему я не выложил все отдельными библиотеками, а выложил все в кучу в виде сайта.
Отвечаю — чтобы скачав или «вытянув» дистрибутив из SVN вы могли прямо здесь и сейчас посмотреть его в работе безо всяких донастроек.
Ведь порой столько времени теряешь на запуск какой то новой штуки, так как автор не позаботился о быстром старте.
Другими словами это пробник.

Для того, чтобы не таскать «пробник» в своих рабочих приложениях предлагаю сделать следующее (расскажу детально по шагам, чтобы воспользоваться советом могли даже новички, — знающие люди могу пропустить):

1) Получите последнюю версию из SVN в любую временную директорию на диске, например в c:/jquickform.

2) Скопируйте директории «vendors» и «js» в корень вашего сайта вместе со служебными файлами subversion! Например в /home/site.ru/www/vendors/, где /home/site.ru/www/ — это DOCUMENT_ROOT вашего проекта

3) Произведите интеграцию jQuickForm с вашим фреймворком, согласно вышеописанной инструкции.

4) Время от времени делайте svn update для директорий «vendors» и «js», чтобы всегда иметь свежую версию.

Скачать jQuickForm


Забрать jQuickForm для тестирования можно из SVN
svn co jquickform.googlecode.com/svn/trunk jquickform
Скачать архивом можно тут code.google.com/p/jquickform/downloads/list

Спасибо за внимание!
Tags:
Hubs:
+49
Comments 37
Comments Comments 37

Articles