WebPart 프레임워크의 이해 - 커스터마이징 가능한 페이지 만들기1
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에 컨트롤을 배치하도로 하겠습니다.