ASP.NET 2.0의 웹파트 프레임워크를 이용하여 커스터마이징 가능한 페이지를 만드는 방법에 대해서 다루어 보겠습니다.
ASP.NET 서버 컨트롤 중에는 사용자로 하여금 페이지의 모양을 커스터마이징 가능하도록 만들어 놓은 특별한 유형의 컨트롤들이 있습니다. 이 들을 웹파트 프레임워크 컨트롤이라고 부르지요.
웹파트 프레임워크 컨트롤에는 다음과 같은 컨트롤들이 있습니다.
- WebPartManager 컨트롤
- Zones 컨트롤
- Editors 컨트롤
- Catalogs 컨트롤
- ConnectionZones 컨트롤
Zones와 Editors, Catalogs 컨트롤은 더 자세하게 컨트롤들로 분류되어 집니다. 이 들에 대해서는 다음에 다루도록 하겠습니다.
- WebPartManager 컨트롤 : 페이지에 이 컨트롤이 들어 있어야 웹파트 컨트롤을 추가할 수 있습니다. 즉 페이지의 커스터마이징 기능을 활성화 시키는 역할을 합니다.
- Zones 컨트롤 : 페이지에서 커스터마이징 가능한 영역(section)을 표시하는 역할을 합니다. Zones 컨트롤 안에 개별 WebPart 컨트롤들을 배치합니다.
Zones 컨트롤의 종류에는 다음의 세 가지가 있습니다.
- WebPartZone
- CatalogZone
- EditorZone
Zones 컨트롤의 종류에 따라 안에 집어 넣을 수 있는 WebPart 컨트롤의 종류도 달라집니다. 이들 또한 다음에 다루도록 하겠습니다. 그냥 각각의 Zone의 성격에 따라 그 안에 들어갈 수 있는 컨트롤도 달라진다는 정도록만 설명하고 넘어가겠습니다.
커스터마이징 가능한 페이지 작성하기
그럼 이제 본격적으로 이번 강좌의 목적인 커스터마이징 가능한 페이지를 만들어 보겠습니다.
WebPartManager 컨트롤 페이지에 추가하기
커스터마이징 가능한 페이지 즉 웹파트를 활용하는 페이지를 작성하기 위한 제일 첫 번째 단계는 WebPartManager 컨트롤을 추가하는 것입니다. WebPargManger는 이전에도 설명했듯이 ASP.NET 페이지에 웹파트를 활용할 수 있도록 웹파트 프레임워크의 기능을 활성화 시키는 역할을 합니다.
1. Visual Studio 2005을 실행합니다. 파일, 새로 만들기, 웹 사이트... 메뉴를 선택합니다.
2. 프로젝트의 위치를 지정하고 프로젝트 이름을 지정한 후 확인 버튼을 누릅니다. 여기서는 FirstWebParsSites로 지정했습니다.
3. Default.aspx 페이지를 디자인뷰로 전환하고 도구 상자에서 WebParts 컨트롤 탭을 펼칩니다. WebParts 탭안의 컨트롤 중 WebPartManager 컨트롤을 Defalt.aspx 페이지 위로 드래그 앤 드롭합니다.
WebPartManger 컨트롤을 추가한 후 소스 뷰를 통해 생성된 HTML을 확인해 보면 아래와 같이 <asp:WebPartManger> 요소가 추가됩니다.
|
<asp:WebPartManager ID="WebPartManager1" runat="server"> </asp:WebPartManager> |
Zone 컨트롤 페이지에 추가하기
Zone 컨트롤을 추가하는 목적은 페이지의 커스터마이징은 오직 zone안에서만 일어나기 때문에 커스터마이징이 일어나는 영역과 커스터마이징을 하지 않고 싶은 부분을 구분하기 위한 용도로 사용합니다.
이번 강좌에서는 Zone 컨트롤 중 WebPartZone을 세 개를 화면에 추가해 보도록 하겠습니다.
1. 도구상자에서 WebPartZone 컨트롤 세 개를 드래그 앤 드롭하여 아래와 같이 페이지에 배치합니다. 각각의 WebPartZone 컨트롤의 HeaderText 속성을 “검색”, “자세히 보기”, “리스트”로 설정합니다.
참고 사항 : WebPartZone을 드래그 앤 드롭한 후 각 WebPartZone 컨트롤의 위치를 화면에 위에 마우스로 조정하고 싶다면 컨트롤의 위치 지정방법을 절대위치(absolute position)으로 바꾸어 주어야 합니다. 하나의 WebPartZone 레이아웃, 위치 메뉴에서 절대를 선택하면 마우스로 WebPartZone 컨트롤의 위치를 조정할 수 있게 됩니다.
WebPartZone 컨트롤 세 개를 추가하여 만들어진 결과의 소스는 아래와 같습니다.
|
<body> <form id="form1" runat="server"> <div> <asp:WebPartManager ID="WebPartManager1" runat="server"> </asp:WebPartManager> <br /> <asp:WebPartZone ID="WebPartZone1" runat="server" </asp:WebPartZone> <asp:WebPartZone ID="WebPartZone2" runat="server" </asp:WebPartZone> <asp:WebPartZone ID="WebPartZone3" runat="server" </asp:WebPartZone> </div> </form> </body> |
이번 시간에는 여기 까지 하도록 하겠습니다.
아직까지는 브라우저에서 Default.aspx를 실행하더라도 아무것도 나타나지 않습니다.
단, 소스보기를 통해서 HTML 소스를 보면 border가 0인 즉 선이 보이지 않는 테이블이 세 개 만들어지는 데 이 table의 id를 보면 WebPartZone1, WebPartZone2, WebPartZone3라고 되어 있으므로 WebPartZone이 각각의 테이블로 매핑되었음을 알 수 있습니다.
|
<table ... id="WebPartZone1" ...> <tr> <td ...><table ...> <tr> <td style="height:100%;"></td> </tr> </table></td> </tr> </table> <table ... id="WebPartZone2" ...> <tr> <td ...><table ...> <tr> <td style="height:100%;"></td> </tr> </table></td> </tr> </table> <table ... id="WebPartZone3" ...> <tr> <td ...><table ...> <tr> <td style="height:100%;"></td> </tr> </table></td> </tr> </table> |
다음 강좌에서는 WebPartZone에 컨트롤을 배치하도로 하겠습니다.
'.net' 카테고리의 다른 글
| WebPart 프레임워크의 이해 - 커스터마이징 가능한 페이지 만들기3 (0) | 2007.05.03 |
|---|---|
| WebPart 프레임워크의 이해 - 커스터마이징 가능한 페이지 만들기2 (0) | 2007.05.03 |
| 2.0에서의 스마트 클라이언트 문제해결 (1) | 2007.05.03 |
| ASP.NET 2.0으로 웹 사이트를 구축하여 음악 라이브러리 탐색 (2) | 2007.05.03 |
| ADO.NET 2.0의 쿼리 알림 (0) | 2007.05.03 |