Создание собственного поведения в ASP.NET Atlas

Автор：Eve Cole Время обновления：2009-06-30 16:12:07

Английская версия: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html.
Поведение в Atlas определяет поведение при срабатывании события элемента управления. Поведение можно рассматривать как инкапсулированное событие DHTML, например щелчок и наведение курсора. Поведение также может быть компонентом, который можно прикрепить к клиентскому элементу управления Atlas для предоставления более продвинутых и расширенных функций клиентского элемента управления Atlas, таких как некоторые сложные функции перетаскивания, автоматическое завершение, плавающие и другие функции. Поведение будет определено в коллекции поведений элемента управления Atlas.

Из документации и исходных файлов Atlas мы знаем, что Atlas имеет следующие встроенные функции поведения:

Поведение щелчка: Обеспечивает обработку щелчков мыши.
Плавающее поведение: обеспечивает эффекты перетаскивания.
Поведение при наведении: обеспечивает обработку событий DHTML при наведении курсора мыши, при наведении курсора мыши, при фокусировке и при размытии.
Компонент всплывающего окна: обеспечивает функцию всплывающего окна и может использоваться для реализации расширенных всплывающих подсказок.
Поведение автозаполнения: обеспечивает функцию автоматического завершения. Это также одна из часто используемых функций в демонстрациях Atlas. Для этого поведения также требуется обработчик на стороне сервера.
Поведение щелчка используется для обработки события onclick в DHTML. Это очень полезно, но предоставляемые им функции довольно просты. В некоторых более сложных программах нам может потребоваться разделить функции левой и правой клавиш. Например, левая клавиша используется для выбора, а правая клавиша — для вызова контекстного меню. Хотя мы можем поместить это if-else в обработчик поведения щелчка, это не очень хороший метод Atlas. Поэтому сегодня мы собираемся написать более мощное поведение клика под названием ExtendedClickBehavior, которое может разделять левую и правую клавиши внутри поведения и запускать два разных события. Написав этот ExtendedClickBehavior, вы также сможете понять общий процесс создания пользовательского поведения в Atlas.

Обычно создание пользовательского поведения состоит из пяти шагов:

Наследование от базового класса Sys.UI.Behavior.
Определите свои собственные события для инкапсуляции событий в DHTML. Эти события будут использоваться для предоставления доступа к другим элементам управления Atlas вместо исходных немодифицированных событий DHTML.
Укажите обработчик события в конструкторе поведения и отсоедините обработчик события в деструкторе.
Вызовите соответствующее событие в функции-обработчике. В примере ExtendedClickBehavior мы создаем разные события в зависимости от разных кнопок мыши.
Добавьте описание события, которое вы определили в методе getDescriptor().
Ниже приведен код JavaScript для ExtendedClickBehavior. Вышеупомянутые пять шагов отмечены в коде как комментарии. Сохраните приведенный ниже код как ExtendedClickBehavior.js.

Sys.UI.ExtendedClickBehavior = function() {
Sys.UI.ExtendedClickBehavior.initializeBase(это);

вар _clickHandler;

// шаг 2
this.click = this.createEvent();
this.leftClick = this.createEvent();
this.rightClick = this.createEvent();

this.dispose = функция() {
// шаг 3
this.control.element.detachEvent('onmousedown', _clickHandler);
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'dispose');
}

this.initialize = функция() {
Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'initialize');

// шаг 3;
_clickHandler = Function.createDelegate(this, clickHandler);
this.control.element.attachEvent('onmousedown', _clickHandler);
}

this.getDescriptor = функция() {
var td = Sys.UI.ExtendedClickBehavior.callBaseMethod(this, 'getDescriptor');

// шаг 5
td.addEvent('клик', правда);
td.addEvent('leftClick', true);
td.addEvent('rightClick', true);
вернуть тд;
}

// шаг 4
функция clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
если (окно.событие.кнопка == 1)
{
this.leftClick.invoke(this, Sys.EventArgs.Empty);
}
иначе, если (window.event.button == 2)
{
this.rightClick.invoke(this, Sys.EventArgs.Empty);
}
}
}
// шаг 1
Sys.UI.ExtendedClickBehavior.registerSealedClass('Sys.UI.ExtendedClickBehavior', Sys.UI.Behavior);
Sys.TypeDescriptor.addType('script', 'extendedClickBehavior', Sys.UI.ExtendedClickBehavior);
Давайте проверим это ExtendedClickBehavior на странице. Добавьте на страницу <div> для кликов и метку для отображения информации о кликах. Ниже приведено определение HTML из файла ASPX. Не забудьте добавить ссылку на файл ExtendedClickBehavior.js в ScriptManager.

<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server">
<Скрипты>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</скрипты>
</atlas:ScriptManager>
<дел>
<div id="myButton" style="border: 1px сплошной черный; ширина: 20em; white-space:normal">Нажмите на меня (слева и справа)!</div> <br />
<span id="myLabel">не нажат</span>
</div>
Ниже приведено определение сценария Atlas. Обратите внимание, что мы используем действие setProperty в Atlas (о действии Atlas см. следующую статью), чтобы установить текст метки после каждого щелчка мыши.