Использование JQuery

Зачем это надо?

Если вкратце, то jQuery – это фреймворк, основанный на джава-скрипт, который позволяет работать с веб-страницей через ее DOM-модель. Это позволяет использовать на клиентской стороне функционал типа AJAX, т.е. менять содержимое страницы без ее перезагрузки. Естественно, что мелочи типа раскрашивания элементов управления, валидации ввода, периодической сработки какого-то процесса по таймеру – все это делается элементарно.

Рассмотрим на примере реальной задачи: требовалось обеспечить проверку ввода в поля формы поиска «на лету», без отсылки формы на сервер. Валидация задается маской, сама маска задается в аттрибутах элемента апплета.

Подключение jQuery

Скачиваем jquery.js c оф-сайта: http://jquery.com/download/ . Production версия отличается меньшим размером и абсолютной нечитаемостью, на прод-ы надо ставить именно ее. Файл кладется в корень сибеля PUBLIC\RUS\XXXXX\SCRIPTS, где XXXXX соответствует версии патча, который последним накатывали на Сибель. Это можно сделать как для всего приложения (в одном месте), или для конкретных веб-темплейтов.

Для приложения Siebel SI:

- идем в Applications, находим свое, находим в нем свойство Container Web Page; - идем в Web Pages, находим нужную, смотрим в свойство Web Template; - идем в Web Templates и находим файл, в котором физически будет лежать общий для всего приложения темплейт.

Для апплета:

находим апплет и смотрим в Applet Web Template;
в Applet Web Template Items находим апплет для нужного нам режима;
далее, как и в п.1., находим файл для этого темплейта через Web Templates.

Находим этот файл в каталоге WEBTEMPL, открываем и видим что-то типа:

<!-- Template Start: dCCForm1ColScreenHomepage.swt -->
    <tr valign="top">
        <td>
            <table width="*" border="0" cellpadding="0"  cellspacing="4">
            …

В начале темплейта подключаем jQuery:

<HEAD>
    <script type="text/javascript" src="23016/SCRIPTS/jquery.js"></script>
</HEAD>

Собственно, все – теперь можно внутри темплейта работать с селекторами jQuery.

Грабли. Патчи Сибеля в песочнице разработки и на проде могут быть разными – соответственно пути тоже будут разными. Кроме того, серверная часть Сибеля может жить на *Nix-овой машине, и тогда XXXXX/SCRIPTS и XXXXX/scripts – будут разными каталогами. Поэтому после переноса темплейта надо проверять пути, в ряде случаев – в т.ч. и на регистр.

Доступ к элементам интерфейса апплета

Сибель генерит код для форм-апплетов на основании SWT-темплейта. При этом теги типа swe:control на конечной html-странице будут преобразовываться в <span>-ы, <input>-ы, или вообще какие-нибудь <select>-ы с вагоном <options>-ов. Главный фокус в том, чтобы в джава-скрипте получить ссылку на конечный элемент, которого в самом темплейте еще нет, и который соответствует нужному полю в БК. Можно «подсмотреть» исходный код сгенерированной страницы и увидеть, что большинству элементов интерфейса Сибель назначит свой id. В принципе, мы можем сделать какой-нибудь getElementById (‘s_6_15_0’) и дальше работать с этим элементом. Но при изменении апплета, переносе и т.д. – никто не гарантирует, что этот id не изменится. Кроме того, есть ситуации, когда идентификатора в принципе нет, например, для кнопки, активность которой регулируется серверным скриптом, пока кнопка неактивна – Сибедь сгенерит что-то типа <span class=’miniButtonOff’>Find</span>. А когда кнопка включится, произойдет перезагрузка всей страницы и та же кнопка будет задаваться линком вида <a href=’’ onClick=’’>Find</a>, и будет сгенерирован соответствующий код для внутреннего метода – обработчика нажатия. На самом деле, существует возможность достучаться до полей через свойство Html Attributes, доступное для контролов апплета. Вернее, даже две возможности:

Можно внаглую указать id=’sbl_MyField’, например, и в конечной html-странице Сибель подставит именно это id.
Можно задать любой аттрибут с любым значением и получить к ним доступ через селекторы jQuery, например myAttr=’myAttrValue’.

Обработка событий

Ради чего все затевалось. Например, нам нужно для поля паспорт включать проверку по маске, когда пользователь нажал на чекбокс «Проверять паспорт». В Controls апплета в свойстве HTML Attributes назначаем идентификаторы для нужных элементов: id=’dtbCheckPassport’ для чекбокса, id=’dtbPassport’ для поля с паспортом. Пишем скрипт:

<script type="text/javascript">
    $(document).ready(function() {
        $("#dtbCheckPassport").click(function() {
            if($('#dtbCheckPassport').attr("checked") == true) {
                $('#dtbPassport').mask($('#dtbPassport').attr("mask"),{placeholder:$('#dtbPassport').attr("mask_placeholder")});
            }
            else {
                $('#dtbPassport').unmask();
            }              
        });
    });
</script>

Здесь после того, как страница загружена в браузер, чекбоксу на форм-апплете назначается событие на OnClick. В этом событии мы проверяем, что чекбокс «включен», и если да – включаем маску для нужного поля, если нет – снимаем маску. При этом сама маска и символ, используемый в качестве плэйсхолдера тоже задаются в Сибеле, в свойстве HTML Attributes. При этом нам совершенно не важно, в каком виде Сибель сгенерит эти поля, какие им присвоит id-ники и т.д.

              jQuery также позволяет работать с коллекциями объектов. Например, нескольким полям в HTML Attributes задан аттрибут group=’1’, а нескольким – group=’2’:

    $("[group]").keyup(function(){
        …
    });

- Всем полям ввода, у которых есть аттрибут «group», назначается обработчик на нажатие клавиши

  var val = false;
  $(‘[group=”1”]’).each(function(i, obj) {
      val = val || ($.trim($(this).attr ("value")) != "");
  });

- Переменная val будет равна true, если среди всех полей с аттрибутом group=’1’ найдется хотя бы одно не пустое.

Селекторы в jQuery работают аналогично XPath в XSL, т.е. можно свободно бегать по всей DOM структуре документа, выбирать все элементы, часть элементов, элементы с определенными значениями аттрибутов кроме тех, у которых первый дочерний элемент не пустой, ну и так далее. При этом полученной коллекции элементов можно назначать общие обработчики событий, производить с ними какие-то действия и т.д. При этом все, что мы запихаем в HTML Attributes будет доступно на уровне конечного html, т.е. там можно задавать не просто идентификаторы, а какую-то логику. На деве Дельты есть пример, когда в этих аттрибутах хранятся разные маски ввода для разных полей, например аттрибуты поля Фамилия выглядят так:

id='dtbLastName' mask='?U<..>U' mask_def_name='U' mask_def_value='[А-Яа-яЄєІіЇї --*]' mask_placeholder='' group='1'

Далее в вебтемплейте подключен класс MaskedInput и написан следующий обработчик:

<script type="text/javascript">
    jQuery(function($) { 
        $("[mask]").each(function(i, obj) {
            var dname = $(this).attr("mask_def_name");
            var dvalue = $(this).attr("mask_def_value");
            var pholder = $(this).attr("mask_placeholder");
            if (dname != "") {
                $.mask.definitions[dname]=dvalue;
            }
            if (pholder != "") {
                $(this).mask($(this).attr("mask"),{placeholder:pholder});
            } 
            else {
                $(this).mask($(this).attr("mask"));
            }
        });
    });
</script>

Здесь скрипт выбирает все элементы, у которых задан аттрибут mask, настраивает для каждой маски свой диапазон символов, свой плейсхолдер, и назначает нужному элементу (уже html-ному) его маску. Такая маска в отличие от Сибелевой работает полностью на клиентской части. В данном примере она позволяет вводить только символы украинского или русского алфавитов, пробел, тире или звездочку. При этом каждому полю ввода назначается своя маска, прописанная в Тулзах именно для этого поля.

— Igor Yurgelevichius 2015/01/14 15:03

JQuery, WebTemplate

Siebel CRM

Инструменты пользователя

Инструменты сайта

Содержание