영어 버전: http://dflying.dflying.net/1/archive/120_build_your_own_behaviors_in_aspnet_atlas.html
Atlas의 동작은 컨트롤 이벤트가 트리거될 때의 동작을 정의합니다. 동작은 클릭 및 마우스 오버와 같은 캡슐화된 DHTML 이벤트로 볼 수 있습니다. 동작은 복잡한 끌어서 놓기, 자동 완성, 플로팅 및 기타 기능과 같은 Atlas 클라이언트 컨트롤의 더욱 발전되고 풍부한 기능을 제공하기 위해 Atlas 클라이언트 컨트롤에 연결할 수 있는 구성 요소일 수도 있습니다. 동작은 Atlas 컨트롤의 동작 컬렉션에 정의됩니다.
Atlas 문서와 소스 파일을 통해 Atlas에 다음과 같은 내장 동작이 있음을 알 수 있습니다.
클릭 동작: 마우스 클릭 처리를 제공합니다.
부동 동작: 드래그 앤 드롭 효과를 제공합니다.
호버 동작: onmouseover, onmouseout, onfocus 및 onblur에 대한 DHTML 이벤트 처리를 제공합니다.
팝업 컴포넌트: 팝업 기능을 제공하며 고급 툴팁을 구현하는 데 사용할 수 있습니다.
자동 완성 동작: 자동 완성 기능을 제공합니다. 이는 Atlas 데모에서 일반적으로 사용되는 기능 중 하나이기도 합니다. 이 동작에는 서버측 핸들러도 필요합니다.
클릭 동작은 DHTML의 onclick 이벤트를 처리하는 데 사용됩니다. 이는 매우 유용하지만 제공되는 기능은 다소 간단합니다. 좀 더 복잡한 프로그램에서는 왼쪽 키와 오른쪽 키의 기능을 분리해야 할 수도 있습니다. 예를 들어 왼쪽 키는 선택에 사용되고 오른쪽 키는 바로가기 메뉴를 팝업하는 데 사용됩니다. 클릭 동작 핸들러에 if-else를 넣을 수는 있지만 이는 좋은 Atlas 방법이 아닙니다. 따라서 오늘 우리는 동작 내에서 왼쪽 키와 오른쪽 키를 분리하고 두 가지 다른 이벤트를 트리거할 수 있는 ExtendedClickBehavior라는 더욱 강력한 클릭 동작을 작성하겠습니다. 이 ExtendedClickBehavior를 작성하면 Atlas에서 사용자 지정 동작을 만드는 일반적인 프로세스도 이해할 수 있습니다.
일반적으로 사용자 지정 동작을 만드는 5단계는 다음과 같습니다.
Sys.UI.Behavior 기본 클래스에서 상속합니다.
DHTML에서 이벤트를 캡슐화하려면 자신만의 이벤트를 정의하세요. 이러한 이벤트는 수정되지 않은 원본 DHTML 이벤트 대신 다른 Atlas 컨트롤을 노출하는 데 사용됩니다.
동작 생성자에서 이벤트 핸들러를 지정하고 소멸자에서 이벤트 핸들러를 분리합니다.
핸들러 함수에서 해당 이벤트를 내보냅니다. ExtendedClickBehavior의 예에서는 다양한 마우스 버튼을 기반으로 다양한 이벤트를 내보냅니다.
getDescriptor() 메서드에 정의한 이벤트에 대한 설명을 추가합니다.
다음은 ExtendedClickBehavior에 대한 JavaScript 코드입니다. 위의 5단계는 코드 내에서 주석으로 표시됩니다. 아래 코드를 ExtendedClickBehavior.js로 저장하세요.
Sys.UI.ExtendedClickBehavior = function() {
Sys.UI.ExtendedClickBehavior.initializeBase(this);
var _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('클릭', true);
td.addEvent('leftClick', true);
td.addEvent('rightClick', true);
td를 반환;
}
// 4단계
함수 clickHandler() {
this.click.invoke(this, Sys.EventArgs.Empty);
if (window.event.button == 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>를 추가하고, 클릭 정보를 표시하려면 라벨을 추가하세요. 다음은 ASPX 파일의 HTML 정의입니다. ScriptManager에서 ExtendedClickBehavior.js 파일에 대한 참조를 추가하는 것을 잊지 마세요.
<atlas:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="서버">
<스크립트>
<atlas:ScriptReference Path="ExtendedClickBehavior.js" />
</스크립트>
</atlas:ScriptManager>
<div>
<div id="myButton" style="border: 1px solid black; width: 20em; white-space:normal">나를 클릭하세요(왼쪽 및 오른쪽)!</div> <br />
<span id="myLabel">클릭하지 않음</span>
</div>
아래는 Atlas 스크립트 정의입니다. Atlas의 setProperty Action(Atlas Action에 대해서는 다음 문서 참조)을 사용하여 클릭할 때마다 레이블의 텍스트를 설정합니다.
<페이지 xmlns:script=" http://schemas.microsoft.com/xml-script/2005 ">
<구성요소>
<라벨 id="myButton">
<행동>
<확장된 ClickBehavior>
<클릭>
<setProperty target="myLabel" property="text" value="clicked" />
</클릭>
<왼쪽클릭>
<setProperty target="myLabel" property="text" value="왼쪽 클릭" />
</왼쪽클릭>
<오른쪽 클릭>
<setProperty target="myLabel" property="text" value="오른쪽 클릭" />
</rightClick>
</extendedClickBehavior>
</행동>
</label>
<라벨 id="myLabel" />
</구성요소>
</page>