ASP.NET AJAX Control Toolkit : Accordion 1부

ASP.NET AJAX가 1월 23일에 드디어 정식버전으로 공개되었다. ASP.NET 2.0을 지원하는 MS의 공식 AJAX Framework인것이다. 드디어, 정식버전이 공개가 되었으니 CTP, Beta, RC때의 무엇이 변경될 것인가? 라는 고민에서 벗어날 수 있게되었다.

하지만, 본인은 이ASP.NET AJAX보다는 AJAX Control Toolkit에 더 많은 관심을 가지고 있다. 이 AJAX Control Toolkit은 MS에서 만들어 배포하는 것이 아니라, 전세계 개발자들이 직접 만들고 공유하는 것이다. 만들기만하면 무조건 Control Toolkit에 포함되는것은 아니고 MS 내부 심사를 거처 포함되는 것이므로, 능력있는 개발자들이라면 도전해보는것도 좋으리라 생각된다.

제목을 봐서 알겠지만 여기서는 AJAX Control Toolkit의 각각의 컨트롤들에 대한 활용 방법과 그 예제를 소개하도록 하겠다.

그럼 첫시간으로, 알파벳순으로 가장 위에 있는 Accordion에 대해서 소개하겠다.

Accordion : 아코디언이라고 읽고, 일반적으로 주름이 있는 상자를 신축시켜 소리를 내는 악기를 말한다.

AJAX Control Toolkit의 Accordion은 이 아코디언 악기와 같이 화면의 내용을 신축시켜 컨텐트를 보여주거나 감추는 기능을한다.

일반적으로, 새로로 나열된 메뉴에서 많이 사용될 것으로 보이며, 그 외에도 컨텐트의 특정 부분에도 처리할 수 있다.

Accordion 컨트롤은 Header영역과 Content영역으로 나눌 수 있다. Header영역은 일반적으로 제목을 표시하는 부분을 의미하며, Content영역은 내용이 표시되는 부분이다.

그럼, 이 Accordion에 대해서 알아보도록 하겠다.

요소

Accordion 컨트롤은 3개의 요소를 갖는다.

Panes, HeaderTemplate, ContentTemplate의 3개의 요소를 갖는데, Panes는 다시 여러개의 AccordionPane을 선언하고 하위요소로 Header, Content를 구성할 수 있다.

HeaderTemplate, ContentTemplate는 데이터나 배열 등을 바인딩과 같은 반복작업을 수행할 때 사용할 수 있다.

속성

SelectedIndex : 페이지 로드 시 처음으로 열릴 Pane을 지정, 지정하지 않으면 기본값으로 0을 갖으며, 가장 상위에 있는 Pane을 오픈

HeaderCssClass : Header영역에 미리 정의되어있는 Css Class를 지정

ContentCssClass : Content영역에 미리 정의되어있는 Css Class를 지정

FadeTransitions : true, false로 페이드 효과 사용 여부 지정

TransitionDuration : 1000분의 1초 단위의 애니메이션이 진행될 시간

FramesPerSecond : 애니메이션에 사용될 초당 프레임 수

AutoSize : None, Limit, Fill의 3가지 모드 지원

- None : 높이에 영향을 주지 않는다.

- Limit : 지정되어있는 높이만큼만 표시

- Fill : 무조건 지정되어있는 높이로 표시

백문이 불여일타...

예제로서 동작원리를 설명하도록 하겠다.

실습에 들어가기에 앞어서 선행되어야 할 과제가 있다. 바로 ASP.NET AJAX를 설치하고 AJAX Control Toolkit을 다운받는 것이다. 이 부분은 굉장히 간단하다. 먼저 ajax.asp.net 사이트에 접속하여 설치파일과 Control Toolkit을 다운받는다. 설치파일은 간단하게 설치할 수 있을 것이고, Control Toolkit은 다운받아 압축을 풀어주면 끝이다.

AJAX Control Tookit의 압축을 풀고 SampleWebSite\Bin의 경로의 AjaxControlToolkit.dll 파일을 탭에 추가하도록 하자. [그림 2]와 같이 컨트롤이 추가되는 것을 확인할 수 있을 것이다.

[그림 2] AJAX Control Toolkit이 등록된 도구상자

자이제 모든 준비가 완료되었다. AJAX Control Toolkit을 활용해 보자. 메뉴에서 [파일] -> [새 웹 사이트]를 클릭하면 [그림 3]과 같은 대화상자가 나타난다.

[그림 3] 새 웹 사이트 대화상자

붉은색으로 태두리가 되어있는 부분이 ASP.NET AJAX를 설치하면 새롭게 추가되는 항목이다. ASP.NET AJAX로 개발을 하려면 이 추가된 탬플릿을 선택하면 된다. 위치에 적당한 경로를 지정하고 확인을 클릭하면 AJAX 웹 사이트가 생성이 된다.

정말 준비과정이 길었다. 이제 정말로 실습에 들어가겠다. 기본 생성된 Default.aspx 파일에 작성해도 좋고, 별도로 파일을 생성해서 작업을 하여도 좋다. 단, Defatul.aspx 파일에는 기본적으로 ScriptManager가 등록되어 있지만, 새롭게 파일을 생성을 하면 이 ScriptManager가 등록되어있지 않다. 이 ScriptManager는 ASP.NET AJAX의 스크립트를 관리하므로 반드시 있어야 한다. 앞으로 별다른 내용이 없더라도 반드시 ScriptManager부터 등록하고 실습을 하는 것으로 인식하기 바란다.

Accordion이라는 폴더를 생성하고 그 하위에 Accordion.aspx라는 파일을 생성했다. 당연히 ScriptManager는 없다. 직접 등록해 주어야 한다. 명심할 것은 이 ScriptManager는 form태그 내부에서 선언되어야 한다는 것이다. 만약 그렇지 않다면 [그림 4]와 같은 에러가 난다.

[그림 4]ScriptManager가 form 태그내부에 없을 때

ScriptManager를 form 태크 내부에 선언하고, Accordion 컨트롤을 [코드 1]과 같이 등록한다.

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<div>

<cc1:Accordion ID="Accordion1" runat="server">

</cc1:Accordion>

</div>

</form>

[코드 1] ScriptManager와 Accordion 추가

그리고, 페이지 상단에 보면 Register 지시자도 Accordion 컨트롤을 추가함과 동시에 추가되었음을 확인할 수 있다.

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

[코드 2] 자동 추가된 Register 지시문

이제 Accordion을 구성해 보자!

일단, 데이터나 배열의 바인딩은 나중에 다뤄보기로 하고, 지금은 직접 내용을 입력하도록 하겠다. Accordion 컨트롤에 직접 내용을 채워넣기 위해서는 Panes를 입력하고 그내부에 각각의 AccordionPane을 입력한다. 그리고, 각각의 AccordionPane은 ID와 runat="server"을 갖으며, 구성요소로 Header, Content가 있다.

<cc1:Accordion ID="Accordion1" runat="server">

<Panes>

<cc1:AccordionPane ID="AccordionPane1" runat="server">

<Header></Header>

<Content></Content>

</cc1:AccordionPane>

</Panes>

</cc1:Accordion>

[코드 3] Accordion 컨트롤의 기본 구성

Accordion 컨트롤은 [코드 3]에서 보는 것과 같은 구조로 이루어져 있다. Accordion의 컨텐트를 늘려리면 AccordionPane을 추가해 주면 된다. 당연한 거지만 ID는 고유해야 한다.

이 Accordion 컨트롤을 사용해서 영화 미션 임파서블 시리즈 각각의 영화정보를 소개하는 컨텐트를 만들어 보도록 하겠다.

<cc1:AccordionPane ID="AccordionPane1" runat="server">

<Header>

Mission: Impossible</Header>

<Content>

<img src="../images/A7626-00.jpg" alt="MI" align="left" style="width: 100px" />

감독 : 브라이언 드 팔마<br />

출연 : 탐 크루즈<br />

년도 : 1996<br />

러닝타임 : 110분<br />

장르 : 액션, 스릴러<br />

내용 : IMF 소속의 짐 펠프스(Jim Pellps: 존 보이트 분)가 이끄는 ''미션 임파서블''팀은 리더인 이단

헌터(Ethan Hunt: 톰 크루즈 분), 경보 해제 전문가 잭(에밀리오 에스테베즈 분), 여성 요원인

사라(Sara: 크리스틴 스콧-토마스 분)와 한나, 그리고 짐의 아내인 클래어(Claire: 엠마뉴엘 베아트

분)로 구성되어 있다. 이들은 글리촌이라는 자가 NOC 리스트(Non Official Cover List: 동유럽에서

활동하고 있는 첩보원들의 명단)를 대사관에서 훔쳐내 ''맥스(Max: 바네사 레드그레이브 분)''라는

무기상에게 팔아 넘기려는 음모를 막기 위해 작전에 투입된다. 그러나 대사관 파티에 잠입하여

작전을 수행하나 도중, 짐을 포함한 요원들이 모두 숨지게 되고 혼자 살아남은 헌트만이 간신히

본부와 연락을 취하게 된다.

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane2" runat="server">

<Header>

Mission: Impossible II(M:I-2)</Header>

<Content>

<img src="../images/B8903-01.jpg" alt="MI2" align="left" style="width: 100px" />

감독 : 오우삼<br />

출연 : 탐 크루즈<br />

년도 : 2000<br />

러닝타임 : 123분<br />

장르 : 액션<br />

내용 : 러시아의 생물공학자인 네코비치 박사(Dr. Nekhorvich: 레이드 세르베드비자 분)는 어느 날

IMF(Impossible Mission Force)의 요원인 이단 헌트(Ethan Hunt: 톰 크루즈 분)에게 구원을

요청한다. 그는 그리스 신화를 인용한 ''키메라''라는 바이러스를 만들어 냈고, 또한 이를 억제할

벨레로폰도 만들어 냈음을 밝힌다. 그러나 시드니에서 질병센터가 소재한 아틀란타로 가는

비행기에 탑승한 것은 헌트로 변장한 테러리스트 앰브로즈(Sean Ambrose: 더그레이 스콧

분)였다. 앰브로즈는 박사에게서 벨레로폰을 탈취한 후 비행기 추락사고를 가장하여 그를

살해한다. 그러나 앰브로즈는 정작 필요한 악성 바이러스인 키메라가 없었으므로 그의 작전은 반쪽

성공일 뿐이었다.

</Content>

</cc1:AccordionPane>

<cc1:AccordionPane ID="AccordionPane3" runat="server">

<Header>

Mission: Impossible III(M:I:III)</Header>

<Content>

<img src="../images/D3153-03.jpg" alt="MI3" align="left" style="width: 100px" />

감독 : J.J.에이브람스<br />

출연 : 탐 크루즈<br />

년도 : 2006년<br />

러닝타임 : 124분<br />

장르 : 액션, 스릴러<br />

내용 : 최첨단 정보기관 ''IMF''의 특수 비밀 요원 ''이단 헌트(톰 크루즈)''. 최고의 베테랑 특수

요원으로서 항상 긴장감 속에 경계를 늦추지 않던 그는 이제 현장에서 한 발 물러나 특수 요원

트레이닝에 전념하며 삶의 여유를 찾고, 사랑하는 여인 ''줄리아(미셸 모나한)''와 행복한 결혼을

꿈꾼다.<br />

<br />

하지만 그녀와의 약혼식 날, 급작스런 본부의 호출을 받은 ''이단 헌트''에게 세계적으로 악명 높은

국제 암거래상 ''오웬 데비언(필립 세이모어 호프만)''에게 인질로 잡혀있는 IMF 요원을 구출하라는

명령이 떨어진다. 사랑하는 약혼녀에게 차마 사실을 알리지 못한 채, 최고의 IMF팀을 이끌고

작전에 임하는 ''이단 헌트''는 요원을 구출하는 데에 극적으로 성공하지만 그녀는 결국 목숨을

잃는다.

<br />

<br />

IMF 본부의 국장(로렌스 피시번)은 작전에 실패한 ''이단 헌트''를 심하게 문책하고 그는 자신과

상관의 명예를 회복하기 위해 다시 ''오웬''을 추적한다. 이번에 그에게 주어진 미션은 철통 같은

보안으로 결코 침투 불가능한 바티칸의 심장부. 최첨단 장비로 무장한 IMF 최고의 팀을 이끌고

교황의 연설장에 잠입한 ''이단 헌트''는 환상적인 팀워크와 스릴 넘치는 작전으로 그를 납치하고

극비정보를 입수하는데 성공한다.

</Content>

</cc1:AccordionPane>

[코드 4] AccordionPane 구성

[코드 4]는 영화 미션 임파서블 시리즈 각각의감독, 배우, 장르, 내용 등을 소개하는 컨텐트 페이지이다. 자 이제 저장하고 브라우저에서 실행해 보도록 하자. [그림 5]와 같이 아주 잘 출력될 것이다.
[그림 5] 결과

하지만, 뭔가 허전하다. 헤더와 컨텐트 부분도 잘 구분되지 않고 일단 페이지가 이쁘지 않다. 다음회에는 앞에서 설명한 속성의 사용과 CSS의 적용에 대해서 알아보도록 하겠다.

정리

ScriptManager의 등록방법과 AJAX Control Toolkit의 컨트롤을 도구상자에 등록하는 방법을 알아보았다. 또한 AJAX Control Toolkit중 Accordion 컨트롤의 속성과 그 사용방법에 대해서도 알아보았다. 이어서, Accordion 2부에서는 속성과 CSS를 적용하는 방법에 대해서 알아보겠다.