#states: Мощное улучшение для разработки интерфейса пользователя в Drupal 7

Версия Друпала:
7.x

Во время одного с докладов на Drupal Camp Donetsk, кто то вспомнил о #states. Так, как лично я с этим раньше не встречался, а только слышал, решил изучить вопрос более детально.

И так, что же это за свойство?

#states добавляет JavaScript, с помощью которого, можно изменить состояние одного элемента на основании состояния второго, после действия пользователя.

Для чего это нужно?

Изначальная идея #states заключается в том, что бы была возможность создание динамических форм. Простой пример: у нас есть форма с радиобаттонами “Ищу работу” и “Работодатель”, при выборе разных значений, пользователю отображаются разные элементы формы для заполнения.

Что же конкретно можно сделать используя #states?

Здесь много текста - излишество, поэтому сразу демо-линк:

http://d7.drupalexamples.info/examples/form_example/states
Все, что вы здесь видите можно сделать без единой строчки JavaScript, только php, только  Drupal Form API.

Итак, рассмотрим базовый пример:

‘#states’ => array(
    STATE1 => CONDITIONS_ARRAY1,
    STATE2 => CONDITIONS_ARRAY2,
     ...
)
здесь:
STATE1,  STATE2 - это состояние, которое нужно применить к элементу,  
CONDITIONS_ARRAY1, CONDITIONS_ARRAY2 - наборы условий, при которых свойства должны применяться.

Наборы условий задаются в виде массива, где ключ - это Jquery селектор какого-либо другого элемента на странице (не обязательно текущей формы), а значение - это набор (так же в виде php массива) свойств этого элемента, при совпадении которых, нам нужно применить к изначальному элементу состояние STATE1, то -  есть:

‘#states’ => array(
  STATE1 => array(
     JQUERY_SELECTOR1 => array(
           REMOTE_CONDITION1 => REMOTE_VALUE1,
           REMOTE_CONDITION2 => REMOTE_VALUE2,
      ),
     JQUERY_SELECTOR2 => array(
           REMOTE_CONDITION3 => REMOTE_VALUE3,
           REMOTE_CONDITION4 => REMOTE_VALUE4,
      ),
  ),
 STATE2 => array.......
)

Следующей вопрос который у меня возник - это какие свойства поддерживаются?
Перечень состояний (STATE1, STATE2 в примере выше), которые могут использоваться для элемента:

  • enabled
  • disabled
  • required
  • optional
  • visible
  • invisible
  • checked
  • unchecked
  • expanded
  • collapsed


Перечень условий (REMOTE_CONDITION1, REMOTE_CONDITION2 в примере выше), которые можно использовать для элементов, что задаются с помощью Jquery селекторов:

  • empty
  • filled
  • checked
  • unchecked
  • expanded
  • collapsed
  • value


Следующий перечень состояний можно использовать для обоих типов элементов (и STATE1, и REMOTE_CONDITION1), но согласно документации, они ещё не полностью реализованы и может быть, что их использование не принесет каких-либо изменений с элементами:

  • relevant
  • irrelevant
  • valid
  • invalid
  • touched
  • untouched
  • readwrite
  • readonly


И конечно же, уже более реальный пример использования (код для этой демо-формы):

 

Небольшые замечание


На данный момент нет возможности использовать в наборах условий (REMOTE_CONDITION1, REMOTE_CONDITION2...), метод ИЛИ (OR). Если у Вас появится такая необходимость, то для этого можно использовать AJAX Forms.

Так как реализация #states полностью завязана на JavaScript, то нужно понимать что она не несет никакой серверной логики, только интерфейс для конечных пользователей. А с отключенным в браузере JavaScript работать вообще не будет, то - есть если Вы используете #states, то нужно позаботится и о том, что бы весь функционал корректно работал и без JavaScript .


Полезные ссылки
1) http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_process_states/7
Тэги:
Forms API, no js, states