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

06.12.2011
Share on FacebookShare on TwitterShare on GooglePlusShare on Linkedin
Автор:

В ходе одного из докладов на 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
2) http://api.drupal.org/api/drupal/developer--topics--forms_api_reference.html/7#states
3) http://drupal.org/project/examples
4) http://d7.drupalexamples.info/examples/form_example/states
2 votes, Rating: 5
Share on FacebookShare on TwitterShare on GooglePlusShare on Linkedin

Также по теме

1

XML-RPC – простой протокол вызова удаленных процедур. XML-RPC является прародителем одного из популярных протоколов SOAP и, не смотря на свой возраст (реализован в 1998 году), XML-RPC не канул в...

2

В статье предоставлена информация о возможностях работы с платформой Titanium Appcelerator. Мы т...

3

В данном посте будут раскрыты основы создания среды для разработки Drupal проектов на основе Debian 6 "Squeeze". Имея даную площадку, каждый сможет попрактиковаться в настройке сервисов ОС,...

4

В предыдущей статье рассказывалось о создании инсталляционных профилей для Drupal 6. В данной...

5

В Drupal 7 API есть целый раздел, который посвящен темизации сайта. Все без исключения элементы сайта должны пройти...

Need a quote? Let's discuss the project

Are you looking for someone to help you with your Drupal Web Development needs? Let’s get in touch and discuss the requirements of your project. We would love to hear from you.

Join the people who have already subscribed!

Want to be aware of important and interesting things happening? We will inform you about new blog posts on Drupal development, design, QA testing and more, as well news about Drupal events.

No charge. Unsubscribe anytime