사용자 지정 AJAX 클라이언트 컨트롤 만들기
업데이트: 2007년 11월
이 개요에서는 사용자 지정 ASP.NET AJAX 클라이언트 컨트롤을 만들어 페이지에서 사용하는 방법을 보여 줍니다. 이 개요에서는 다음과 같은 작업을 수행하는 방법을 배웁니다.
ECMAScript(JavaScript)에서 프로토타입 디자인 패턴을 사용하여 컨트롤 클래스를 정의합니다.
컨트롤을 Sys.UI.Control 기본 클래스에서 파생되는 클래스로 등록합니다.
Control 기본 클래스를 초기화하고 해당 메서드를 호출합니다.
페이지 개발자가 바인딩하고 처리할 수 있는 사용자 지정 이벤트를 만듭니다.
페이지의 클라이언트 컨트롤을 사용하고 컨트롤 이벤트에 바인딩합니다.
개요에서는 가리키기 동작을 사용하는 단추를 만드는 완전한 클라이언트 컨트롤의 예제를 제공합니다.
이 개요에서는 클라이언트 컨트롤에 중점을 둡니다. ASP.NET AJAX 클라이언트 구성 요소 개체의 형식은 다음 세 가지입니다.
Sys.Component 기본 클래스에서 파생되고 UI 표시가 없는 비시각적 구성 요소
Sys.UI.Behavior에서 파생된 동작
Control에서 파생된 컨트롤
다음 표에서는 구성 요소, 동작 및 컨트롤 사이의 차이점을 요약하여 보여 줍니다.
클라이언트 구성 요소 개체 형식 |
요약 |
|---|---|
구성 요소 |
|
동작 |
|
컨트롤 |
|
사전 요구 사항
이 항목에서 제공된 클라이언트 컨트롤 예제를 실행하려면 다음이 필요합니다.
- AJAX 사용 ASP.NET 웹 사이트. 이 사이트가 이미 구성되어 있으면 해당 사이트를 이 예제에 사용할 수 있습니다. 가상 디렉터리나 사이트를 만드는 방법에 대한 자세한 내용은 방법: IIS 5.0 및 6.0에서 가상 디렉터리 만들기 및 구성을 참조하십시오.
사용자 지정 ASP.NET AJAX 클라이언트 컨트롤에 대한 기본 기능 만들기
ASP.NET AJAX 클라이언트 컨트롤은 DOM 요소를 클라이언트 개체로 표시하고 태그 표시를 확장하거나 요소에 대한 추가 기능을 제공합니다. 예를 들어 클라이언트 컨트롤은 다양한 CSS 스타일을 적용하여 HTML 요소를 확장하여 마우스 이벤트에 대응할 수 있습니다.
클라이언트 컨트롤은 응용 프로그램 간에 다시 사용할 수 있도록 JavaScript 코드를 캡슐화합니다. Control 기본 클래스에서 파생된 사용자 지정 컨트롤은 기본으로 제공되는 많은 전체 브라우저 간 기능을 자동으로 상속합니다. 해당 기능은 다음과 같습니다.
컨트롤에 연결된 DOM 요소에 대한 이벤트 처리기 및 컨트롤 자체에 대한 이벤트 처리기를 추가하고 제거하는 기능
Sys.IDisposable 인터페이스를 구현하는 삭제 가능한 개체로 컨트롤 자동 등록
속성이 변경될 때 알림 이벤트를 발생시키는 기능
컨트롤 속성 설정의 일괄 처리를 수행하는 기능. 이 기능은 개별 속성 get 및 set 접근자에서 모든 논리를 처리하는 것보다 스크립트 크기 및 처리 시간면에서 더 효율적입니다.
클라이언트 컨트롤 구현
다음 표에서는 Control에서 파생된 사용자 지정 클라이언트 컨트롤을 구현하는 단계를 요약하여 보여 줍니다. 각 단계에 대한 자세한 내용은 표 다음에 나옵니다.
단계 |
요약 |
|---|---|
프로토타입 디자인 패턴을 사용하여 클라이언트 컨트롤 클래스를 정의합니다. |
|
컨트롤의 기본 Control 인스턴스를 초기화하고 연결된 DOM 요소를 인수로 전달합니다. |
|
모든 속성 접근자를 노출하고 Sys.Component.propertyChanged 알림 이벤트를 선택적으로 발생시킵니다. |
|
Sys.UI.Control.initialize 메서드를 재정의하여 모든 속성 및 이벤트 수신기를 초기화합니다. |
초기화할 구성 요소나 DOM 요소에 대한 속성이나 이벤트 수신기가 있는 경우 구성 요소의 프로토타입에서 initialize 메서드를 재정의합니다. 재정의된 메서드에서 다음을 수행합니다.
|
Sys.UI.Control.dispose 메서드를 재정의하여 DOM 이벤트 처리기를 제거하는 것처럼 리소스를 해제합니다. |
컨트롤이 삭제되기 전에 해제할 리소스가 있는 경우 구성 요소의 프로토타입에서 dispose 메서드를 재정의합니다. 재정의된 메서드에서 다음을 수행합니다.
|
프로토타입 디자인 패턴을 사용하여 컨트롤 클래스 정의
컨트롤 클래스를 포함하는 ASP.NET AJAX 클라이언트 클래스는 프로토타입 디자인 패턴을 사용하여 JavaScript에 정의됩니다. 자세한 내용은 프로토타입 모델을 사용하여 클라이언트 구성 요소 클래스 만들기를 참조하십시오.
클라이언트 컨트롤 클래스는 Control 기본 클래스에서 파생되어야 합니다. Type.registerClass 메서드를 사용하여 ASP.NET AJAX 클라이언트 클래스를 클라이언트 응용 프로그램이 있는 클래스로 등록합니다. 자세한 내용은 Type.registerClass 메서드를 참조하십시오.
기본 클래스 초기화
기본 Control 개체는 컨트롤의 생성자에서 초기화됩니다. 컨트롤의 생성자에서, 상속된 initializeBase 메서드를 호출하고 생성자 인수에 받은 DOM 요소를 기본 클래스에 전달합니다. 일반적으로 initializeBase 메서드는 생성자에서 다른 코드가 실행되기 전에 호출됩니다. Control 기본 클래스가 초기화되면 해당 메서드를 컨트롤에서 사용할 수 있으며 컨트롤을 Sys.Application 인스턴스와 함께 삭제 가능한 개체로 자동 등록합니다. 자세한 내용은 Sys.IDisposable 인터페이스를 참조하십시오.
다음 예제에서는 Control에서 파생된 컨트롤에 대한 생성자 함수를 보여 줍니다. 구성 요소의 생성자는 상속된 initializeBase 메서드를 호출합니다.
Samples.SimpleControl = function(element)
{
Samples.SimpleControl.initializeBase(this, [element]);
}
속성 정의 및 속성 변경 알림 발생시키기
페이지 개발자가 가져오고 설정할 수 있는 클라이언트 컨트롤의 클래스에 속성을 정의합니다. 또한 구성 요소 속성에 대한 propertyChanged 알림 이벤트를 발생시킬 수 있습니다. 구성 요소를 사용하는 페이지 개발자는 이러한 이벤트에 바인딩할 수 있습니다. Component, Behavior, 또는 Control 기본 클래스에서 파생된 ASP.NET AJAX 구성 요소는 Sys.Component.raisePropertyChanged 메서드를 상속합니다. 이 메서드는 propertyChanged 이벤트를 발생시키기 위해 호출합니다. 자세한 내용은 사용자 지정 구성 요소 속성 정의 및 PropertyChanged 이벤트 발생시키기를 참조하십시오.
속성 및 이벤트 수신기 초기화
사용자 지정 컨트롤에서 속성이나 이벤트 수신기를 초기화해야 하는 경우 구성 요소의 프로토타입에서 initialize 메서드를 재정의합니다. Control 기본 클래스에서 파생된 클라이언트 컨트롤은 일반적으로 처리기를 해당 DOM 요소 이벤트에 바인딩하고 DOM 요소 속성을 초기 값으로 설정합니다. 마지막 단계로 기본 initialize 메서드를 호출하여 구성 요소의 기본 클래스가 초기화를 완료할 수 있도록 합니다.
리소스 해제
사용자 지정 컨트롤에서 컨트롤이 삭제되기 전에 리소스를 해제해야 하는 경우 dispose 메서드를 재정의하고 재정의된 메서드에서 리소스를 해제합니다. 이렇게 하면 컨트롤이 삭제되기 전에 리소스가 즉시 해제됩니다. 해제할 리소스에는 DOM 이벤트에 바인딩하는 데 사용되는 처리기가 포함됩니다. DOM 요소와 구성 요소 개체 간의 가능한 순환 참조가 모두 제거되는지 확인하여 개체를 메모리에서 제거할 수 있는지 확인합니다. 자세한 내용은 구성 요소 리소스 해제를 참조하십시오.
페이지에서 컨트롤 사용
ASP.NET 웹 페이지에서 사용자 지정 클라이언트 컨트롤을 사용하려면 다음을 수행합니다.
웹 페이지에서 클라이언트 컨트롤의 스크립트 라이브러리를 등록합니다.
클라이언트 컨트롤 인스턴스를 만듭니다.
다음 단원에서는 이러한 단계에 대해 자세히 설명합니다.
웹 페이지에서 컨트롤의 스크립트 라이브러리 등록
ScriptManager 컨트롤을 사용하여 페이지의 클라이언트 컨트롤에 필요한 스크립트를 선언적으로 또는 프로그래밍 방식으로 등록할 수 있습니다.
다음 예제에서는 컨트롤 스크립트를 등록하는 ScriptManager 컨트롤의 선언적 태그를 보여 줍니다.
<form id="form1" >
<asp:ScriptManager ID="ScriptManager01">
<scripts>
<asp:ScriptReference path="HoverButton.js" />
</scripts>
</asp:ScriptManager>
</form>
asp:ScriptManager 요소는 asp:ScriptReference 요소를 scripts 노드 내에 포함합니다. asp:ScriptReference 요소의 path 특성은 컨트롤 클래스를 정의하는 HoverButton.js 파일의 경로를 참조합니다. 자세한 내용은 동적으로 스크립트 참조 할당 및 ScriptManager 클래스 개요를 참조하십시오.
.gif "참고") 참고: |
|---|
ScriptManager 컨트롤을 사용하여 등록될 모든 독립 실행형 스크립트 파일은 notifyScriptLoaded 메서드를 호출하여 응용 프로그램에 스크립트에서 로딩을 완료했음을 알립니다. 어셈블리에 포함된 스크립트는 대부분의 경우 이 메서드를 호출하지 않습니다. 자세한 내용은 Sys.Application.notifyScriptLoaded 메서드를 참조하십시오. |
ScriptManager 컨트롤을 사용하여 스크립트 파일을 등록하는 대신 IScriptControl 인터페이스를 구현하는 사용자 지정 서버 컨트롤을 사용하여 클라이언트 구성 요소를 관리할 수 있습니다. 사용자 지정 서버 컨트롤은 필수 구성 요소 스크립트를 자동으로 등록하고 구성 요소 속성 및 이벤트 바인딩 설정에 대한 선언적 태그를 노출할 수 있습니다. 이렇게 하면 페이지 개발자가 사용자 지정 컨트롤을 쉽게 사용할 수 있습니다. 자세한 내용은 IScriptControl 클래스 개요를 참조하십시오.
사용자 지정 컨트롤 인스턴스 만들기
Sys.Application.init 이벤트 중 Sys.Component.create 메서드나 $create 바로 가기를 호출하여 사용자 지정 클라이언트 컨트롤을 인스턴스화합니다. 다음 표에서는 클라이언트 컨트롤을 만들 때 $create 메서드에 전달하는 매개 변수를 설명합니다.
매개 변수 |
설명 |
|---|---|
type |
구성 요소 형식입니다. |
properties |
구성 요소 ID 값 및 선택적으로 모든 초기 속성 이름/값 쌍을 포함하는 JSON 개체입니다. |
events |
이벤트 이름 및 이벤트/처리기 바인딩 쌍을 포함하는 선택적 JSON 개체입니다. |
references |
구성 요소 이름/ID 쌍으로 전달된 연결된 구성 요소에 대한 참조를 포함하는 선택적 JSON 개체입니다. |
element |
컨트롤과 연결할 DOM 요소입니다. |
다음 예제에서는 $create 메서드를 호출하여 컨트롤 인스턴스를 인스턴스화하는 방법을 보여 줍니다.
$create(Demo.HoverButton, {text: 'A HoverButton Control',element: {style: {fontWeight: "bold", borderWidth: "2px"}}}, {click: start, hover: doSomethingOnHover, unhover: doSomethingOnUnHover},null, $get('Button1'));
자세한 내용은 Sys.Component.create 메서드 및 Sys.Component $create 메서드을 참조하십시오.
사용자 지정 HoverButton 컨트롤 만들기
이 단원에서는 Control 기본 클래스를 확장하는 HoverButton이라는 간단한 사용자 지정 클라이언트 컨트롤을 만든 다음 페이지에서 해당 컨트롤을 사용합니다. HoverButton 컨트롤은 연결된 HTML button 요소의 click, focus 및 mouseover 이벤트를 가로챕니다. 또한 $create 메서드를 통해 바인딩할 수 있는 이벤트가 있는 컨트롤을 제공합니다. HoverButton 컨트롤을 사용하는 페이지 개발자는 컨트롤의 hover 이벤트에 바인딩할 수 있습니다.
HoverButton 컨트롤에 대한 코드를 만들려면
AJAX 사용 ASP.NET 웹 사이트의 루트 디렉터리에서 HoverButton.js라는 파일을 만듭니다.
파일에 다음 코드를 추가합니다.
Type.registerNamespace("Demo"); // Constructor Demo.HoverButton = function(element) { Demo.HoverButton.initializeBase(this, [element]); this._clickDelegate = null; this._hoverDelegate = null; this._unhoverDelegate = null; } Demo.HoverButton.prototype = { // text property accessors. get_text: function() { return this.get_element().innerHTML; }, set_text: function(value) { this.get_element().innerHTML = value; }, // Bind and unbind to click event. add_click: function(handler) { this.get_events().addHandler('click', handler); }, remove_click: function(handler) { this.get_events().removeHandler('click', handler); }, // Bind and unbind to hover event. add_hover: function(handler) { this.get_events().addHandler('hover', handler); }, remove_hover: function(handler) { this.get_events().removeHandler('hover', handler); }, // Bind and unbind to unhover event. add_unhover: function(handler) { this.get_events().addHandler('unhover', handler); }, remove_unhover: function(handler) { this.get_events().removeHandler('unhover', handler); }, // Release resources before control is disposed. dispose: function() { var element = this.get_element(); if (this._clickDelegate) { Sys.UI.DomEvent.removeHandler(element, 'click', this._clickDelegate); delete this._clickDelegate; } if (this._hoverDelegate) { Sys.UI.DomEvent.removeHandler(element, 'focus', this._hoverDelegate); Sys.UI.DomEvent.removeHandler(element, 'mouseover', this._hoverDelegate); delete this._hoverDelegate; } if (this._unhoverDelegate) { Sys.UI.DomEvent.removeHandler(element, 'blur', this._unhoverDelegate); Sys.UI.DomEvent.removeHandler(element, 'mouseout', this._unhoverDelegate); delete this._unhoverDelegate; } Demo.HoverButton.callBaseMethod(this, 'dispose'); }, initialize: function() { var element = this.get_element(); if (!element.tabIndex) element.tabIndex = 0; if (this._clickDelegate === null) { this._clickDelegate = Function.createDelegate(this, this._clickHandler); } Sys.UI.DomEvent.addHandler(element, 'click', this._clickDelegate); if (this._hoverDelegate === null) { this._hoverDelegate = Function.createDelegate(this, this._hoverHandler); } Sys.UI.DomEvent.addHandler(element, 'mouseover', this._hoverDelegate); Sys.UI.DomEvent.addHandler(element, 'focus', this._hoverDelegate); if (this._unhoverDelegate === null) { this._unhoverDelegate = Function.createDelegate(this, this._unhoverHandler); } Sys.UI.DomEvent.addHandler(element, 'mouseout', this._unhoverDelegate); Sys.UI.DomEvent.addHandler(element, 'blur', this._unhoverDelegate); Demo.HoverButton.callBaseMethod(this, 'initialize'); }, _clickHandler: function(event) { var h = this.get_events().getHandler('click'); if (h) h(this, Sys.EventArgs.Empty); }, _hoverHandler: function(event) { var h = this.get_events().getHandler('hover'); if (h) h(this, Sys.EventArgs.Empty); }, _unhoverHandler: function(event) { var h = this.get_events().getHandler('unhover'); if (h) h(this, Sys.EventArgs.Empty); } } Demo.HoverButton.registerClass('Demo.HoverButton', Sys.UI.Control); // Since this script is not loaded by System.Web.Handlers.ScriptResourceHandler // invoke Sys.Application.notifyScriptLoaded to notify ScriptManager // that this is the end of the script. if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
코드 설명
코드는 Type.registerNamespace 메서드를 호출하여 Demo 네임스페이스를 등록합니다. Control 기본 클래스 메서드를 사용할 수 있도록 생성자는 상속된 initializeBase 메서드를 호출합니다. 그런 다음 초기화된 기본 클래스는 클라이언트 응용 프로그램을 사용하여 Demo.HoverButton 인스턴스를 삭제할 수 있는 개체로 등록합니다.
프로토타입에서 코드는 공용 이벤트인 click, hover 및 unhover를 선언합니다. 페이지 개발자는 이러한 이벤트를 수신 대기하는 처리기를 추가하고 제거할 수 있습니다. 그런 다음 이러한 메서드는 컨트롤의 이벤트 처리기 컬렉션을 통해 지정한 처리기를 추가하거나 제거합니다. 컨트롤의 Sys.EventHandlerList 개체를 통해 컨트롤 클래스에서 처리기를 추가하고 제거합니다. EventHandlerList 개체에는 상속된 Sys.Component.events 속성을 통해 컨트롤 이벤트 처리기의 컬렉션이 포함됩니다. 예제의 코드는 처리기를 추가하거나 제거하기 위해 반환된 EventHandlerList 개체의 Sys.EventHandlerList.addHandler 및 Sys.EventHandlerList.removeHandler 메서드를 호출합니다.
HoverButton 클래스는 기본 dispose 메서드를 재정의하여 컨트롤이 삭제되기 전에 모든 컨트롤 리소스(예: DOM 이벤트에 대한 처리기)를 안전하게 삭제합니다. 마지막으로 코드는 기본 dispose 메서드를 호출하여 응용 프로그램에서 컨트롤을 해제할 수 있게 합니다.
웹 페이지에서 HoverButton 컨트롤 사용
이 단원에서는 웹 페이지에서 클라이언트 스크립트를 사용하여 컨트롤 인스턴스를 만드는 방법을 배웁니다.
HoverButton 컨트롤을 사용하는 페이지를 만들려면
HoverButton.js 파일을 넣은 응용 프로그램 루트 디렉터리에서 DemoHoverButton.aspx라는 파일을 만듭니다.
다음 태그 및 코드를 파일에 추가합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" > <style type="text/css"> button {border: solid 1px black} #HoverLabel {color: blue} </style> <title>Control Demo</title> </head> <body> <form id="form1" > <div id="ResultDisplay"></div> <asp:ScriptManager ID="ScriptManager01"> <scripts> <asp:ScriptReference Path="HoverButton.js" /> </scripts> </asp:ScriptManager> <script type="text/javascript"> var app = Sys.Application; app.add_init(applicationInitHandler); function applicationInitHandler(sender, args) { $create(Demo.HoverButton, {text: 'A HoverButton Control',element: {style: {fontWeight: "bold", borderWidth: "2px"}}}, {click: start, hover: doSomethingOnHover, unhover: doSomethingOnUnHover},null, $get('Button1')); } function doSomethingOnHover(sender, args) { hoverMessage = "The mouse is over the button." $get('HoverLabel').innerHTML = hoverMessage; } function doSomethingOnUnHover(sender, args) { $get('HoverLabel').innerHTML = ""; } function start(sender, args) { alert("The start function handled the HoverButton click event."); } </script> <button type="button" id="Button1"></button> <div id="HoverLabel"></div> </form> </body> </html>
코드 설명
DemoHoverButton.aspx 파일은 사용자 지정 컨트롤을 호스팅하는 ASP.NET 웹 페이지입니다. 이 페이지에서 사용자 지정 컨트롤에 바인딩되는 함수는 script 요소에 정의됩니다. Sys.Application.init 이벤트 처리기에서 HoverButton 컨트롤은 $create 메서드를 호출하여 클라이언트 스크립트에서 인스턴스화됩니다. 코드는 다음 인수를 $create 메서드에 전달합니다.
type 인수에는 이전에 만든 Demo.HoverButton 클래스가 포함됩니다.
properties 인수에는 초기 값이 있는 속성 이름을 지정하는 속성 이름-값 쌍이 뒤에 오는 필수 컨트롤 ID 값이 포함된 JSON 개체가 포함됩니다.
events 인수에는 해당 처리기와 쌍을 이루는 이벤트 이름이 포함된 개체가 포함됩니다.
ScriptManager 컨트롤에서 asp:ScriptReference 노드의 path 특성은 Demo.HoverButton 컨트롤 클래스를 정의하는 HoverButton.js 파일의 경로를 참조합니다.
DOM 요소 이벤트 처리기 및 구성 요소 이벤트 처리기 설정
ASP.NET의 AJAX 기능에는 구성 요소 및 DOM 요소에 대해 표준화된 이벤트 관리를 제공하는 클래스가 포함됩니다. addHandler 및 removeHandler와 같은 Sys.EventHandlerList 클래스의 멤버를 사용하여 컨트롤의 이벤트를 관리합니다. 자세한 내용은 Sys.EventHandlerList 클래스 개요를 참조하십시오.
Sys.UI.DomEvent 클래스, addHandler 또는 removeHandler의 정적 메서드를 사용하여 DOM 요소 또는 window 개체 이벤트에 대한 이벤트 처리기를 관리합니다. 자세한 내용은 Sys.UI.DomEvent 클래스 개요를 참조하십시오.
DOM 요소 속성 액세스
Sys.UI.DomElement 클래스에는 사용자가 클라이언트 컨트롤 및 요소에 대해 CSS 클래스 연결을 추가, 제거 및 설정/해제할 수 있게 해주는 멤버가 포함됩니다. 또한 이러한 멤버는 DOM 요소 속성에 표준화된 액세스를 제공합니다. 자세한 내용은 Sys.UI.DomElement 클래스를 참조하십시오.
참고 항목
작업
개념
데이터 바인딩된 컨트롤에서 ASP.NET UpdatePanel 컨트롤 사용