#States: Потужне покращення для розробки інтерфейсу користувача в Drupal 7

05.04.2012
# States: Strong improvement for developing the Drupal 7 user interface
Автор:

Під час однієї з доповідей на Drupal Camp Donetsk, хтось з веб розробників згадав про #states. Оскільки особисто я із цим раніше не зустрічався, а тільки чув, то  вирішив вивчити питання більш детально.

Отже , що ж це за властивість?

 #states додає JavaScript, за допомогою якого - після дій виконаних користувачем - можна змінити стан одного елементу на підставі стану іншого.

Для чого це потрібно?

 Початкова ідея #states полягає в тому, щоб уможливити створення динамічних форм. Простий приклад: у нас є форма з радіобаттонами "Шукаю роботу" і "Роботодавець": при виборі різних значень, користувачеві відображаються різні елементи форми для заповнення.

Що ж конкретно можна зробити використовуючи #states?

Отже, розглянемо базовий приклад:

'# 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.

Корисні посилання

2 votes, Рейтинг: 3.5

Також по темі

1

Пропонуємо вам збірку інтернет-магазину CommerceBox, створену на основі Drupal 7 і...

2

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

3

В пості ми розкриємо основи створення середовища для розробки Drupal проектів на основі Debian 6 "Squeeze". Маючи дане підгрунтя, кожен зможе попрактикуватись в налаштуванні сервісів ОС.

4

В даній статті на Ваш розгляд буде представлена інформація про можливості платформи Titanium Appcelerator. Також стаття дає можливість познайомитись із частовживаними об'єктами групи Titanium.UI:...

5

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

Subscribe to our blog updates