Дата публикации оригинала - 2008-05-23

Несколько последних дней я работал совместно с разработчиками заказчика над созданием нестандартных дэшбордов. Основным требованием заказчика было создание prompt’ов в виде чекбоксов. В результате у нас получились такие вот симпатичные дэшборды, как на скриншоте внизу.

Prompt 1

Расскажу в двух словах, как это реализовано.

То, что на скриншоте справа – это обычный prompt. Помимо трех видимых комбо-боксов, там есть еще один невидимый мультиселект для валюты, условно назовем его HIDDEN_CURRENCY (о том, как его спрятать, будет ниже). Чекбоксы слева – это обычные чекбоксы, создаваемые html-тэгом <input type=”checkbox”>. Фрагмент макета дэшборда при этом выглядит следующим образом:

Prompt 2

Элемент под названием «Javascript валюты» - это Static Text с включенным свойством Contains HTML-markup. В этом элементе создаются сами чекбоксы, а также опеределения следующих java-script функций:

  • getCurrencyString - функция на базе текущего состояния чекбоксов строки вида формирует и возвращает строку вида ’RUR’,’USD’, содержащую коды отмеченных валют.
  • setPromptValue – функция находит на странице элемент <input>, соответствующий prompt’у HIDDEN_CURRENCY и устанавливает ему value = getCurrencyString(). Затем надо вызвать у HIDDEN_CURRENCY обработчик onChange, т.к. в prompt’е Банки и Счета должны подрезаться при выборе валюты (для этого в prompt’e, напомню, используется галочка Constrain). На эту функцию устанавливается обработчик onClick для чекбоксов.
  • initCurrencyChk – функция инициализирует значения чекбоксов на основании значения prompt’а HIDDEN_CURRENCY

Теперь немного о том, как сделать элемент HIDDEN_CURRENCY спрятанным. Для этого была написана javascript-функция hideElements, которая ищет на странице элементы <input>, и у которых в innerHTML элемента parentNode.previousSibling.previousSibling содержит подстроку HIDDEN. Т.е. ищутся input’ы, лежащие рядом с заголовками, которые мы специально помечаем префиксом HIDDEN в названии. У найденных элементов в стили дописывается display:none. Вызов этой функции нужно вставить в файл ajax.js в самый конец обработчика sawr.iFrameConnection._onLoad. Файл этот лежит на сервере, путь к нему зависит от того, используется ли OC4J или AS. На моем лэптопе этот файл лежит в папках c:\oracle\biee\oc4j_bi\j2ee\home\applications\analytics\analytics\res\b_mozilla\common\
и c:\oracle\biee\web\app\res\b_mozilla\common\.

Наконец, на дэшбород положен Static Text под названием Hide, в котором однократно вызываются функции initCurrencyChk и hideElements.

Вот собственно и все. Не самый простой путь, требующий неплохого знания html и javascript, но игра часто стоит свеч.

Автор: Егор Демьянов
Материал опубликован в блоге Егора Демьянова


Для удобства отслеживания новых публикаций рекомендуем подписаться на рассылку или на канал RSS.

Читайте также: