대상 : ASP.NET의 기본적인 컨트롤 사용법을 뗀 이들.
선수지식 : ADO.NET 기본 지식.

비주얼 도구를 사용하여 DataList 꾸미기

이제 DataList를 정리하는 시간을 가져보도록 하겠습니다. 그 정리는 VS.NET의 도움 기능을 사용하는 것으로써 해 보도록 하구요 ^^;

사실, 지금까지 여러분은 DataList의 출력과 관계된 작업을 대부분 하드 코딩을 통해서 이루었습니다. 하지만, VS.NET은 이를 쉽게 해주는 비주얼한 기능도 제공하고 있지요~~. 그렇다면, 그 방법을 왜 진작 알려주지 않고 이제서야 이야기하는 것일까요? 누누히 강조하지만, 비주얼한 방법을 통해 쉽게 코드를 생성하는 방법만을 배운다면 여러분은 그러한 방법이 제공되지 않을 경우 아무 것도 할 수 없는 개발자가 되고 말 것이기 때문입니다. 근본적인 사항들을 이해하지 못하고, 비주얼한 방법(예를 들면, 마법사)만을 애용하는 것은 전혀 바람직하지 않습니다. 해서, 그 방법을 이제서야 이야기하는 것이지요. 여러분이 이제는 DataList에 대해 어느 정도 지식을 갖추고 있으니 말입니다.

하지만 사실, 지금부터 말하는 비주얼한 방법이 그리 매력적으로 느껴지지 않는 독자들도 있을 것 같아요. 이유인 즉, 비주얼한 방법, 쉬운 방법이라는 것은 결국 여러분을 대신하여 코드를 만들어주는 방법이기에, 뭔가 너무 기계적인 느낌이 들기 때문이지요. 개발자의 창조력, 자유가 조금 제한되는 느낌도 든다는 것입니다. 그렇기에, 사실 많은 개발자들이 이러한 비주얼 도구를 즐기지는 않는 것 같아요. 여러분은 어떠한가요? 맘에 드는 어떤 방식을 사용해도 무관합니다. 중요한 것은 기간 내에 프로젝트를 완수하는 것이니 말이다. ^^ 히히... (프로젝트에서 가장 어려운 것은 기간에 작업을 맞추는거..  ㅠ_ㅠ)

자. 그렇다면 시작해 보겠습니다. 여러분의 프로젝트에 새로운 웹 폼을 하나 더 추가해보도록 하세요. 저는 파일의 이름을 DataListEx2VsNet.aspx 라고 주어 보았습니다. 그리고, 그 웹 폼 위에 DataList 컨트롤을 하나 올리고, 컨트롤에 마우스 우측 클릭을 해 보도록 하세요. 다음과 같은 팝업 메뉴가 나오는 것을 볼 수 있을 겁니다.

여기서 [자동 서식]을 선택해 보도록 하겠습니다. 자동 서식을 사용하면 미리 정의된 서식을 간단하게 사용할 수 있어요. 단지 여러분은 서식 목록에서 원하는 색상과 형태를 선택하기만 하면 됩니다. 다음과 같이 [전문가 1]를 선택해 보도록 하세요.

그리고, 디자이너로 돌아와서 HTML 모드를 살펴보면, 여러분이 지정한 서식에 맞추어 템플릿들의 스타일이 지정된 것을 확인할 수 있을 것입니다. [전문가 1]을 선택했다면, 다음과 같이 말이죠.

그렇습니다. [자동 서식]은 여러분이 DataList의 대략적인 외형을 선택할 수 있도록 돕는 기능입니다. 개인적으로는 그다지 즐겨 쓰지 않지만, 출력 디자인을 간단하게나마 화려하게 꾸미고 싶을 경우에는 사용할만한 기능입지요. [자동 서식]보다 좀 더 구체적으로 DataList의 스타일을 지정할 수 있는 기능으로는 [속성 작성기]가 있습니다. 웹 폼 디자인 모드에서 DataList에 마우스 우측 클릭을 하고, 팝업 메뉴에서 이번에는 [속성 작성기]를 선택해 보도록 하세요. 다음과 같은 창이 뜨죠???

먼저, [일반] 속성들을 지정하는 창이 보일 겁니다. 데이터 소스(DataSource)를 여기서 지정할 수도 있는데, 이를 지정하려면 먼저 ADO.NET의 Connection 개체를 웹 폼에 올려서 비주얼한 방법으로 데이터베이스와의 연결을 만들어 두어야 합니다. 우리의 경우는 이를 코드 비하인드 소스에서 지정할 것이므로 이 기능은 사용하지 않도록 하겠습니다. 여기서는 [레이아웃 반복] 부분에만 관심을 가져 보도록 하죠. 레이아웃 부분에서 열(RepeatColumns)과 방향(RepeatDirection)을 위의 그림과 같이 지정해 보도록 하세요. 출력 결과 가로로 2개의 아이템이 출력되도록 말입니다. 설정이 되었으면, 이제 [서식] 메뉴로 옮겨가 보도록 하겠습니다.

이 구역은 각각의 아이템들의 스타일을 지정할 수 있는 곳입니다. 아이템 명들이 한글로 번역되어 나오고 있어서, 오히려 헛갈리기도 하는데요. 하지만, 유심히 보면 각각이 어떤 아이템을 의미하는지 어렵지 않게 알 수 있을 것입니다. 일반적인 경우라면 배경색과 전경색을 제외한 다른 부분은 건드릴 일이 없을텐데, 이유는 대부분의 웹 페이지가 폰트와 관계된 것들은 CSS를 사용하여 설정하기 때문입니다. 원한다면 적절히 값들을 설정해도 좋아요(별로 권장하지는 않지만요 -_-+). 이제, [테두리] 메뉴로 건너가 보도록 하겠슴다..

여기는 말 그대로 출력 테이블의 테두리와 관계된 설정들을 하는 곳입니다. 셀의 여백(CellPadding)과 간격(CellSpacing)을 그림과 같이 적절히 선택하고, 모눈선(GridLines)을 "모두"로 선택하도록 하세요. 그리고, 테두리의 색상은 Black 색상으로 지정해 보세요. 모든 설정이 끝났으면 [확인] 버튼을 눌러 [속성 작성기]를 닫으면 됩니다. 우리가 작업한 내용들은 DataList의 HTML에 모두 반영되어져 있을 겁니다. 여러분은 이미 대부분의 속성들을 하드 코딩으로 작업해 보았었기에, [속성 작성기]에 의해 자동으로 생성된 코드들이 그리 낯설지 않을 것입니다. 그래야 합니다... 그래야 하는데...  ㅠ_ㅠ

하드 코딩하는 방법과 [속성 작성기]를 사용하는 방법. 여러분은 어떤 방법이 더 편한가요? 물론, 그것은 여러분의 취향에 따라 결정될 부분이기는 합니다. 만일, 갈등이 된다면 저의 경우는 하드 코딩을 선택한다고 귀 뜸해 드리고 싶네요. ^^

현재까지의 작업은 템플릿의 출력 스타일을 설정하는 작업이었습니다. 이제, 코드 비하인드 페이지로 이동하여 Page_Load 이벤트 처리기를 작성해 보도록 하겠습니다. 코드는 기존 예제과 동일하게 작성하면 될 것입니다. 그러므로, 굳이 그 코드를 여기서 다시 반복하여 지면으로 나타낼 이유는 없어보이네요~~. 그렇다면, 이제 모든 준비는 끝난 것일까요?? 이제 페이지를 컴파일하고 실행하면 잘 동작할까요? 설마 그럴리가 있겠습니까??

여러분은 결정적인 것을 아직 구성하지 않았습니다. 그렇습니다.!!! 그렇구요~~ 템플릿에 데이터 바인드 표현식을 아직까지 작성하지 않았던 것이었던 것이드랩니다. 실제로 데이터를 출력하는 부분이 없으니 페이지를 실행해도 결과가 나올 리 만무하겠죠???.  (지금 혼자 해보다가 잘 안되어서 이 글을 보고 움찔!! 하신 분들 있죠??   거기~~~  딱 걸렸습니다.. !!) 

그렇다면, 이제 템플릿 내부를 꾸미고, 데이터 바인딩 표현식도 작성해 보도록 해요~. 실은, 이를 위해서도 도우미가 존재합니다. 웹 폼 디자이너에서 DataList에 마우스 우측 클릭하고, 팝업 메뉴에서 다음 그림과 같이 [템플릿 편집] 메뉴를 클릭해 보도록 하세요. 다음 그림과 같이 3개의 서브 메뉴가 나타날 겁니다.

[머리글 및 바닥글 템플릿]은 HeaderTemplate 과 FooterTemplate을 비주얼하게 꾸미는데 도움을 주며, 항목 템플릿은 ItemTemplate, AlternatingItemTemplate, SelectedItemTemplate, EditItemTemplate을 비주얼하게 작성하는 데 도움을 줍니다. [구분 기호 템플릿]은 거의 사용하지 않는 편인 SeparatorTemplate을 작성하는데 도움을 주구요.

우리는 이 중 [항목 템플릿]을 선택해 보도록 하겠습니다. 다음과 같은 창이 나타날 것이며, 각각의 템플릿을 비주얼하게 꾸밀 수 있는 구역들이 나타날 것입니다. 만일, 그러한 템플릿들에 이미 스타일이 지정되어져 있다면 그 스타일이 반영되어 배경색이나 전경색이 적용된 채로 출력될 것이니 너무 놀라지 마세염~~~ 이제, 여기를 다음과 같이 간단한 수준으로 작성해 보도록 하겠습니다.

[도구 상자]로부터 서버 컨트롤들을 드래그 앤 드롭하여 템플릿 내부에 올려놓을 수도 있습니다. 여기서는 간단하게 ItemTemplate 구역 내에 약간의 텍스트만을 작성해 보았는데요. 버그 때문인지 한글이 입력되지 않았기에 여기서는 영문으로 작성해 보았습니다. 여기서 바인딩 표현식까지 작성하는 것은 큰 의미가 없어 보이네요. 이 툴은 단지 템플릿의 UI를 꾸미기 위해 도움을 주는 도구일 뿐이니, 실제 데이터 바인딩 표현식은 직접 손수 HTML 코드내에 작성하는 것이 바람직할 것입니다. 물론, 여기서 코딩을 할 수 없는 것은 아니지만 그럴 경우에도 작성한 표현식 중에 존재하는 특수 문자들이 대체문자로 자동 대체되기에 추가적인 하드 코딩이 또한 필요하기 때문입니다. 어차피 하드 코딩을 할 것이라면 굳이 여기서 그러한 바인딩 표현식을 작성할 필요는 없다는 것이 저의 작지만 귀여운(!) 소견인 것입니다.

이제, HTML 모드로 이동하여 현재까지 만들어진 DataList 컨트롤의 코드를 살펴보도록 하세요. 모든 것을 하드 코딩했을 때보다 조금은 조잡(!)하게 HTML이 구성되어져 있는 것을 볼 수 있을 것입니다. 그러한 코드에 실제 바인딩 표현식을 추가하여 코드를 일단 완성해 보도록 하세요. (저의 경우는 HeaderTemplate 코드도 추가해 보았다)

이제 모든 준비는 끝났습니다. 이제는 실행하는 것만이 남아있지요. 그렇다면, 무엇을 주저하고 계십니까??? -_-++++ 그렇습니다. 실행해 보겠습니다. 다음은 이 페이지를 컴파일하고 실행했을 경우의 결과 화면입니다.

재미있져? 재미있어야 하는데.... -_-;

보았듯이 어떤 방식으로 DataList를 만드는 지는 순전히 여러분의 선택 사항입니다. 제가 아무리 위와 같은 툴의 사용보다는 하드 코딩의 사용을 거듭해서 강조한다고 해도 말입니다.

정리하며…

강좌가 드문 드문 올라와서 보는 분들이 좀 짜증났을 수도 있을 것 같은데요... 어쨌든 이번 Repeater, DataList 강좌에서는 현장 활용도가 대단히 높은 몇몇 ASP.NET 바인드 컨트롤들에 대해서 배워보았습니다.

다시 말해서, ASP.NET에서 제공하는 전체 바인드 컨트롤 중 Repeater 컨트롤과 DataList 컨트롤에 대해서 알아보았는데, 이 장의 학습을 통해서 이들이 표 형태의 데이터 출력 및 관리 작업을 위해 대단히 유용하게 사용될 수 있는 컨트롤들이라는 것을 깨닫게 되었을 것이라 믿어 의심치 않습니다. 모두 템플릿을 기반으로 하여 그들의 UI를 꾸민다는 사실을 배웠으며, 데이터를 출력하게 위해서는 특별한 형태의 데이터 바인딩 구문을 사용해야 한다는 것도 배웠습니다.(요게 중요한거죠!!?) 

그렇다면, 이제 그러한 내용들을 전체적으로 한번 정리하면서 강좌도 마무리 해보도록 하겠습니다. 아래의 목록은 이번 장에서 배운 내용들을 간단하게 정리한 목록입니다. 이를 정독하면서 머리 속으로 각자 그 내용들을 정리해 보도록 하면 참 좋을 것 같아요....  참 잘했어요....  

- ASP.NET에서 지원하는 데이터 바인드 컨트롤들의 소개
- 데이터 바인딩 표현식
- Repeater 컨트롤의 소개
- 템플릿의 개념 및 템플릿을 통한 UI의 작성 방법
- DataBinder.Eval 구문의 사용 방법(포맷 문자열의 지정)
- DataList 컨트롤의 소개 및 기능 설명
- DataList 를 사용한 데이터의 가로 출력(RepeatColumn, RepeatDirection)
- DataList 항목의 선택 및 편집 : SelectedItemTemplate, EditItemTemplate
- ItemCommad 이벤트 버블링
- EditCommand 이벤트를 통한 데이터의 업데이트
- DeleteCommand 이벤트를 통한 데이터의 삭제
- DataList의 DataKeyField 속성을 사용한 키 값들의 저장
- 비주얼 도구(자동 서식, 속성 작성기)를 이용한 DataList의 UI 꾸미기

그리고, 다음은 각 컨트롤들에 대한 간략한 정리입니다.

Repeater 컨트롤 : 이 컨트롤을 사용하여 출력하기 위해서는 템플릿을 사용하여 개발자가 직접 하드 코딩으로 작성해야 한다. 사용할 수 있는 템플릿으로는 다음과 같은 것들이 있다. 이는 단순 출력용으로만 사용한다.

<HeaderTemplate>
<ItemTemplate>
<AlternatingItemTemplate>
<FooterTemplate>
<SeparatorTemplate>

DataList 컨트롤 : Repeater 컨트롤에서 제공되는 템플릿외에 다음과 같은 템플릿들이 추가로 제공된다. 항목을 가로로 출력할 수 있다는 장점을 가지고 있으며, 컨트롤 내부에 여러 컨트롤들을 올리고 그 이벤트를 처리하는 쉬운 방법도 제공한다. 단, 페이징 기능과 같은 것은 제공되지 않는다.

<SelectedItemTemplate>
<EditItemTemplate>