#states: Мощное улучшение для разработки интерфейса пользователя в Drupal 7
Во время одного с докладов на 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
И конечно же, уже более реальный пример использования (код для этой демо-формы):
Небольшые замечание
Так как реализация #states полностью завязана на JavaScript, то нужно понимать что она не несет никакой серверной логики, только интерфейс для конечных пользователей. А с отключенным в браузере JavaScript работать вообще не будет, то - есть если Вы используете #states, то нужно позаботится и о том, что бы весь функционал корректно работал и без JavaScript .
Полезные ссылки
1) http://api.drupal.org/api/drupal/includes--common.inc/function/drupal_process_states/7
2) http://drupal.org/project/examples
3) http://d7.drupalexamples.info/examples/form_example/states


