WebPart 프레임워크의 이해 - 커스터마이징 가능한 페이지 만들기2

제목 : WebPart 프레임워크의 이해 - 커스터마이징 가능한 페이지 만들기2

지난 강좌에서는 WebPartManager 컨트롤과 WebPartZone을 페이지에 배치하는 것을 보았습니다. 실행하면 아주 썰렁하게 아무 것도 나타나지 않는 페이지 였는데요. 이번 강좌에서는 WebPartZone에 서버 컨트롤들을 집어 넣어서 페이지를 실행 해 보는 것을 해보겠습니다.

WebPartZone에 컨트롤 집어넣기

지난 강좌에서 HeaderText 속성 값으로 “검색”을 가지고 있는 WebPartZone1 컨트롤 위로 아래 두 개의 컨트롤을 배치합니다.

1. 도구상자의 표준 탭에 있는 서버컨트롤인 텍스트 박스를 드래그 합니다.

2. 다음에는 텍스트 박스 아래에 버튼 컨트롤을 배치합니다.

소스를 보면 <asp:WebPartZone> 컨트롤 안에 하위 하위 요소로 <ZoneTemplate> 요소가 추가되고 <ZoneTemplate> 요소의 하위 요소로 <asp:TextBox>와 <asp:Button>이 추가되는 것을 알 수 있습니다. 따라서 만일 Visual Studio의 페이지 디자이너를 사용하지 않고 직접 페이지의 소스를 입력하는 경우에는 <ZoneTemplate>안에 서버 컨트롤을 집어 넣어야 한다는 사실을 기억해야 합니다.

<asp:WebPartZone ID="WebPartZone1" runat="server" style="z-index: 100; left: 19px; position: absolute; top: 83px" HeaderText="검색 Width="125px">     <ZoneTemplate>         <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>         <asp:Button ID="Button1" runat="server" Text="Button" />     </ZoneTemplate> </asp:WebPartZone>

이제 페이지를 실행 해 보면 Zone에 배치했던 텍스트 박스와 버튼 컨트롤이 화면에 보입니다. 여전히 “자세히 보기”와 “리스트”에 해당하는 WebPartZone2와 WebPartZone3에는 컨트롤을 배치하지 않았으므로 보이지 않습니다.

웹파트의 커스터마이징 기능을 테스트 해 보겠습니다.

1. 텍스트 박스를 감싸고 있는 테두리를 표시하고 있는 상자의 오른쪽 위에 작은 아래를 가리키는 화살표를 클릭해 봅시다. “최소화”, “닫기” 메뉴가 나타나는 것을 알 수 있습니다. 버튼에 대한 메뉴도 역시 “최소화”, “닫기” 메뉴가 나타납니다.

2. 메뉴에서 “최소화”를 눌러 보면 아래 그림과 같이 텍스트 박스가 감추어 지는 것을 알 수 있습니다. 메뉴를 다시 누르면 이번에는 “복원”과 “닫기” 메뉴가 나타납니다. “복원” 메뉴를 선택하면 텍스트 박스가 다시 보여집니다.

3. 텍스트 박스를 최소화 한 상태에서 브라우저를 종료한 후 다실 실행해서 ASP.NET 페이지의 URL을 다시 요청합니다. 페이지를 다시 실행했는데도 위의 그림처럼 텍스트 박스가 최소화 되어서 감추어 진 상태로 보입니다. 이와 같이 사용자 별로 취향에 따라 페이지의 모양을 변화 시켜서 마지막 상태 그대로 기억이 되어 사용할 수 있도록 하는 것이 웹파트의 페이지 커스터마이징 기능이라 하겠습니다.

웹페이지가 어떻게 작동하는 지 궁금한 분들은 페이지에 대한 소스보기를 해볼까요? 수많은 테이블 태그와 추가적인 링크와 자바스크립트 함수가 소스로 추가된 것을 확인할 수 있습니다. 어떤 태그와 자바스크립트가 웹파트와 맵핑되는지 자세하게 설명하지는 않겠습니다만 웹파트 프레임워크가 이런 HTML 태그와 자바스크립트를 생성해 준다는 것을 알 필요가 있습니다.

참고로 지난강좌에서 언급하지 않고 넘어간 부분이 있었는데요. 그것은 ASP.NET 페이지에 WebPartManager를 추가하면 페이지의 커스터마이징 기능을 활성화 시킨다고 했는데요. 그뿐만 아니라 WebPartManager를 추가하면 ASP.NET 응용프로그램의 개인화(personalization) 기능도 같이 활성화 시킵니다. 페이지를 커스터마이징 한다는 것이 결국은 각 사용자 별로 페이지를 각각 다르게 구성할 수 있도록 하는 기능이므로 각 사용자 별로 페이지를 커스터마이징한 것을 저장할 곳이 필요하고 ASP.NET은 기본적으로 SQL Server 혹은 SQL Express를 사용하고 있습니다. Visual Studio 2005에서 보면 개인화 기능을 지원하기 위해서 ASP.NET의 프로젝트에 SQL Server 데이터베이스 파일이 하나가 자동으로 추가됩니다. 솔루션 탐색기의 App_Data 폴더 아래에 보면 ASPNETDB.MDF 파일이 하나 추가되는 것을 볼 수 있습니다.

ASPNETDB.MDF 파일은 ASP.NET 프로젝트를 처음 만들어서 WebPartManager를 추가한다 하더라도 처음부터 App_Data폴더에 나타나지는 않습니다. 프로젝트를 처음으로 실행하거나 디버깅할 때 생성됩니다. 따라서 페이지를 실행 한 후 Visual Studio를 다시 실행하거나 아니면 솔루션 탐색기의 프로젝트 파일을 새로 고침한 후에 위 그림과 같이 ASPNETDB.MDF 파일을 볼 수 있습니다.

또한 페이지를 실행하려는데 SQL Server에 연결하지 못했다는 에러가 발생하는 경우가 발생하는 경우가 있을 수도 있습니다.

이 경우에는 SQL Server나 SQL Server Express를 접속하지 못한 것이므로 ASP.NET이 올바르게 SQL Server 혹은 SQL Server Expresss에 접속하여 개인화 기능을 활성화 시킬 수 있도록 설정을 해 주어야 합니다. Visual Studio 2005를 설치할 경우 SQL Server Express를 같이 설치하였다면 별다른 오류는 발생하지 않습니다. 만일 SQL Server Exress를 기본으로 설치하였는데도 위와 같은 페이지 에러가 발생하였다면 윈도우 서비스에서 SQL Server(EXPRESS)가 시작되었는지 확인 해 봅니다.

WebPartZone에 ASP.NET 서버 컨트롤을 배치할 때 일어나는 일 - GenericWebPart 안에 래핑(wrapping)

그런데 WebPartZone에 서버 컨트롤을 배치할 때 약간 이상한 점을 발견하지 않았나요? 텍스트 박스와 버튼 위에 각각 “제목 없음” 이라는 Title이 출력됩니다. 그리고 “최소화”와 “닫기” 메뉴를 보여주는 화살표가 나타나는 것은 텍스트 박스와 버튼 컨트롤과는 무관합니다.

WebPartZone에는 WebPart 컨트롤이 들어가야 합니다. 하지만 지금 까지의 예제에서는 ASP.NET 서버 컨트롤인 TextBox와 Button 컨트롤을 WebPartZone에 직접 넣었습니다. WebPart 컨트롤을 넣어야 하는데 직접 서버 컨트롤을 넣어도 아무런 이상 없이 잘 돌아가고 있습니다.

사실 서버 컨트롤을 넣은 후 페이지를 실행하면 다음과 같은 일이 벌어집니다. ASP.NET 페이지를 디자인 할 때에는 서버 컨트롤을 직접 배치하였지만 실행할 경우에는 GenericWebPart라는 웹 파트 컨트롤이 실행됩니다. 그리고 GenericWebPart가 TextBox나 Button과 같은 ASP.NET 서버 컨트롤을 하나 가지는 구조가 됩니다.

즉 “최소화”, “닫기”와 같은 메뉴는 GenericWebPart가 가지고 있는 것이고 “제목 없음”이라는 Ttile도 GenericWebPart가 가지게 되는 것입니다. 따라서 우리의 예제에서는 페이지를 실행할 때 WebPartZone1 안에 두 개의 GenericWebPart가 들어가게 되고 그 두 개의 GenericWebPart안에 각각 TexBox와 Button 컨트롤이 들어가게 됩니다. 지금과 같이 GenericWebPart인 경우에는 WebPart 하나 당 서버 컨트롤을 하나밖에 집어 넣지 못하였지만 실제로 프로그래머가 자신만의 WebPart를 만들어서 그 안에 서버 컨트롤을 원하는 만큼 여러개 집어 넣을 수 있습니다.