AjaxContorlToolkit – 사용자 Extender 만들기!!

 

들어가기에 앞서서…

AjaxControlToolkit에서 제공하는 Extender들은 MicroSoft의 ASP.NET AJAX 팀이 개발하여 공개한 것이 아니라, 공개 소스형식으로 진행되어 다양한 개발자들이 참여하여 만들어 낸 결과물입니다. 그렇기에 여러분들도 직접 개발하여 사용할 수도 있습니다. 개발한 Extender를 ACT에 제공하여 자신의 명예를 드높일 수도 있습니다!!! 그렇기에 지금부터 간단한 Extender를 만들어 보겠습니다.

  

EXTENDER 개발을 위한 준비

AjaxControlExtender 폴더 안에 있는 AjaxControlExtender.vsi ß이 파일은 Extender 개발에 도움이 되는 템플릿의 설치 파일입니다. 위 화면처럼 다음을 클릭하여 템플릿을 설치합니다.

 

Extender 개발을 위한 준비

Visual 2008을 실행시키고, 새 프로젝트를 생성하면, 내 템플릿에 ASP.NET AJAX Control Project가 생성 되어 있는걸 확인할 수 있습니다.

제작할 Extender 기능

기능: 텍스트 박스 컨트롤에 접목하여, 입력란에 포커스가 들어오면 지정된 배경색을 나타내고, 포커스가 사라지면, 기본 배경색으로 돌아옴.

노출 속성: BackColor: 배경색으로 사용할 색상을 설정

  

STEP1)
	우선 웹 사이트 프로젝트를 생성합니다.

 

STEP2)
새 프로젝트를 생성 후 ASP.NET AJAX Control Project를 생성합니다. (이렇게 웹사이트를 생성 후 AjaxControl Project를 생성한 이유는 단지 개발에 편리함 때문입니다. (따로 생성해도 Dll을 참조하기 때문에 상관은 없습니다.)

 

3가지 파일들의 역할
파일명	설명
Behavior.js	사용할 클라이언트 스크립트 로직을 담는 파일
Designer.cs	VS 디자인 타임 지원을 위한 파일
MyColortextBoxExtender.cs	Extender의 생성을 관리하고, 속성 및 서버 측 기능을 설정할 수 있게 하는 컨트롤 클래스
위와 같이 Ajax Project Control 프로젝트를 생성하면 위 3가지 파일들이 생깁니다.

  

STEP3) 제일 먼저 Extender.cs 작성

namespace AjaxControlExtender1 { [Designer(typeof(AjaxControlExtender1Designer))] [ClientScriptResource("AjaxControlExtender1.AjaxControlExtender1Behavior", "AjaxControlExtender1.AjaxControlExtender1Behavior.js")] [TargetControlType(typeof(TextBox))] public class AjaxControlExtender1Extender : ExtenderControlBase { // TODO: Add your property accessors here. // [ExtenderControlProperty] [DefaultValue("")] public string BackColor { get { return GetPropertyValue("BackColor", ""); } set { SetPropertyValue("BackColor", value); } } } }

처음 열어보면 접근하기 어렵지만 친절하게 주석으로 //TODO 라고 적혀있고, 샘플 코드 또한 있으니 이것을 유용하게 사용합시다. 위에 화면 처럼 코드를 작성하여 BackColor 속성을 노출시킵니다. (유의점: 대소문자 구분을 확실히 합니다.)

.

STEP4) 다음 Behavior.js 작성

Type.registerNamespace('AjaxControlExtender1');   AjaxControlExtender1.AjaxControlExtender1Behavior = function(element) { AjaxControlExtender1.AjaxControlExtender1Behavior.initializeBase(this, [element]);   // TODO : (Step 1) Add your property variables here //this._myPropertyValue = null; this._backColorValue = null; }

BackColor 속성을 위해 사용할 내부 변수의 선언 합니다. (.js 파일은 더 복잡하게 되어 있습니다. 하지만 주석으로 STEP1으로 친절하게 안내되어 있습니다. 이것 또한 샘플 코드 있으니 참고하시길 바라고, 주석 처리하거나 삭해주세요.)

 

STEP5)

// TODO: (Step 2) Add your property accessors here get_BackColor: function() { return this._backColorValue; },   set_BackColor : function(value) { this._backColorValue = value; },

실제로 속성을 노출시키는 작업입니다.

 

STEP6)

AjaxControlExtender1.AjaxControlExtender1Behavior.prototype = { initialize : function() { AjaxControlExtender1.AjaxControlExtender1Behavior.callBaseMethod(this, 'initialize'); // TODO: Add your initalization code here $addHandler(this.get_element(),"focus", Function.createDelegate(this,this._onfocus)); $addHandler(this.get_element(),"blur", Function.createDelegate(this,this._onblur)); },

포커스가 들어오면 배경색을 설정된 값으로 바꾸고, 빠져나가면 기본 색으로 되돌리는 기능을 제공을 위해 이벤트 처리기 등록해주는 작업입니다. addHandler는 첫 번째 인자로는 이벤트를 적용할 대상 개체 두 번째 인자로는 개체의 이벤트 명 세 번째 인자로는 이벤트가 발생할 경우 수행할 처리기를 지정 Function.createDeletegate() 위임자를 생성 할 수 있게 해주는 함수입니다. à현재의 코드가 Extender에 작성되고 있기 때문에 단순하게 대상 함수 명을 기입 할 수 없으며, 명시적으로 Delegate를 사용해서 사용할 메서드를 지정해 주어야 하기 때문에 이 함수를 씁니다.

 

STEP7)

// TODO: (Step 2) Add your property accessors here get_BackColor: function() { return this._backColorValue; },   set_BackColor : function(value) { this._backColorValue = value; },   _onfocus : function() { this.get_element().style.backgroundColor= this._backColorValue; }, _onblur:function() { this.get_element().style.backgroundColor=""; }

_onfocus(), _onblur() 메서드를 정의하는 작업입니다.

 

STEP8)

Extender를 생성한 경로를 찾아 .dll 파일을 참조 시켜줍니다.

  

STEP9)

텍스트 박스 한 개를 디자인해 봅니다. 그리고 밑에 화면처럼 Extender를 확인해보면 생성한 Extender가 추가된 것을 확인할 수 있습니다.

 

LAST)
	Extender 속성을 보면 BackColor 속성이 있다는 것을 확인 할 수 있습니다. 저는 색상을 Aqua로 줬습니다.

 

실행화면)
	실행 시키고, 텍스트 박스에 포커스를 두면 색상이 변화는걸 확인할 수 있고, 떼어 내면 기본 색상으로 바뀌는걸 알 수 있습니다.