ASP.NET WebParts는 웹페이지를 구성하고 있는 요소의 순서 혹은 배치를 바꾸거나 별도의 색상을 부여할 수 있는등 각 사용자별 웹페이지의 커스터마이징 기능을 구현할 수 있도록 해주는 포털프레임워크입니다.
이를 위해 ASP.NET에서는 웹파트라는 하나의 영역으로 필요한 컨트롤과 클래스를 제공하며 개발자는 이러한 프레임웤 라이브러리를 통해 해당 기능을 손쉽게 구현할 수 있습니다.
WebPartManager 컨트롤은 존(Zone)의 영역을 관리하는 메인컨트롤입니다. 내부에 존항목을 포함하는 형태로서 자체적인 디자인을 갖고 있지 않습니다.
<asp:WebPartManager ID="WebPartManager1" runat="server"></asp:WebPartManager>
WebPartManager 컨트롤을 화면에 배치하고 나면 그 다음 WebPartZone으로 각 영역을 생성하여 화면을 구성합니다. 이 컨트롤을 통해 화면에 보여줄 요소를 만들고 나면 해당 영역은 WebPartManager를 통해 자동으로 관리됩니다.
<asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ZoneTemplate>
</asp:WebPartZone>
<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</ZoneTemplate>
</asp:WebPartZone>
WebPartZone 컨트롤은 내부에 요소를 담기위해 <ZoneTemplate>을 포함해야 합니다. 상기 예제는 2개의 웹파트존 영역으로서 하나는 버튼 다른 하나는 텍스트박스 컨트롤을 담고 있습니다. 이렇게 담아놓은 요소는 WebPartZone안에서 개별적으로 커스터마이징이 가능합니다.
하나의 <ZoneTemplate>안에 여러개의 요소가 포함되어 있는 경우 LayoutOrientation속성으로 수직 또는 수평방향의 출력형태를 지정할 수 있습니다. 참고로 내부에는 HTML뿐만 아니라 다른 ASP.NET컨트롤등도 자유롭게 포함될 수 있습니다.(단 runat="server" 지정이 가능한것만)
WebPartZone의 영역은 기본적으로 Untitled라는 제목이 붙는데 다른 이름을 부여하려면 내부 요소에 Title속성을 붙여 원하는 이름을 지정하면 됩니다.
<asp:WebPartManager ID="WebPartManager1" runat="server"></asp:WebPartManager> <asp:WebPartZone ID="WebPartZone1" runat="server">
<ZoneTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" Title="버튼" />
</ZoneTemplate>
</asp:WebPartZone>
<asp:WebPartZone ID="WebPartZone2" runat="server">
<ZoneTemplate>
<asp:TextBox ID="TextBox1" runat="server" Title="텍스트박스"></asp:TextBox>
</ZoneTemplate>
</asp:WebPartZone>
WebPartZone을 생성 후 로그인등의 과정을 통해 인증사용자로 접근해 보면 각 존의 최소화와 닫기기능이 활성화 되는 것을 볼 수 있습니다.
이는 인증사용자만이 커스터마이징이 가능하도록 되어 있기 때문인데 web.config에서 설정을 수정하면 익명사용자도 커스터마이징에 접근이 가능하도록 할 수 있습니다.
특정 WebPartZone의 요소를 사용자가 Close(닫기)하여 닫게되면 해당 요소는 본래의 WebPartZone영역에서 사라지게 됩니다. 그리고 이렇게 사리진 요소는 CatalogZone을 통해 사용자가 스스로 다시 복구할 수 있습니다.
<asp:CatalogZone ID="CatalogZone1" runat="server">
<ZoneTemplate>
<asp:PageCatalogPart ID="PageCatalogPart1" runat="server" />
</ZoneTemplate>
</asp:CatalogZone>
CatalogZone은 WebPartManager와 마찬가지로 하나의 <ZoneTemplate>이 필요하며 내부에 PageCatalogPart가 존재해야 합니다.
페이지를 실행하면 Page Catalog 라는 부분에 추가할 수 있는 요소가 보이는데 예제에서의 시점은 닫은 요소가 하나도 없으므로 추가가능한 요소항목도 표시되지 않습니다. 시험삼아 WebPartZone2 영역의 텍스트박스를 닫아보겠습니다.
WebPartZone2(텍스트박스)영역을 닫으면 Page Catalog에 추가가능한 항목으로 표시됩니다. 여기에서 원하는 요소를 왼쪽 체크박스에 체크표시를 하고 Add to에서 추가할 WebPartZone을 선택한뒤 Add버튼을 누르면 해당 요소는 선택한 WebPartZone에 추가될 것입니다.
기본적으로 화면에 표시하지 않고 사용자가 선택해서 WebPartZone에 추가해야 하는 경우라면 DeclarativeCatalogPart를 사용해야 합니다.
<asp:CatalogZone ID="CatalogZone1" runat="server">
<ZoneTemplate>
<asp:DeclarativeCatalogPart ID="DeclarativeCatalogPart1" runat="server">
<WebPartsTemplate>
<asp:Calendar ID="Calendar1" runat="server" Title="달력"></asp:Calendar>
</WebPartsTemplate>
</asp:DeclarativeCatalogPart>
</ZoneTemplate>
</asp:CatalogZone>
DeclarativeCatalogPart 내부에 추가해야할 요소를 WebPartsTemplate으로 정의하면
비로소 원하는 요소를 선택한 WebPartZone에 추가할 수 있게 됩니다.
WebPartZone의 설정을 변경할 수 있도록 하는 것이 바로 EditorZone의 역활입니다. EditorZone을 이용하면 WebPartZone의 외관, 동작, 배치등의 세부사항 변경이 가능합니다.
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:LayoutEditorPart ID="LayoutEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
다른 Zone과 마찬가지로 EditorZone도 하나의 ZoneTemplate이 필요하며 ZoneTemplate안에 설정 변경을 위한 템플릿을 추가하면 됩니다. 예제에서는 LayoutEditorPart 하나를 포함하여 WebPartZone에 대해 레이아웃변경을 가능하도록 하였습니다.
만약 특정 WebPartZone에서 명시적으로 레이아웃 설정이 불가능하게 하려면 원하는 WebPartZone의 AllowLayoutChange속성을 false로 하면 됩니다. 참고로 이 설정은 CatalogZone에서의 WebPartZone추가기능등에도 적용됩니다.
동작영역은 기본적으로 관리자가 전체 사용자에 대해 WebPartZone의 동작상태를 설정하는 용도로 사용됩니다. 따라서 아래와 같이 동작에 대한 편집기능을 EditorZone에 포함시켜도 일반 사용자는 해당 설정변경이 가능한 화면을 볼 수 없습니다.
일반사용자에도 동작관련 기능을 활성화 하려면 web.config에서 webPart의 개인화를 허용해야 하며
<webParts>
<personalization>
<authorization>
<allow users="*" verbs="enterSharedScope"/>
</authorization>
</personalization>
</webParts>
해당 기능을 보여줄 페이지에도 WebPartManager의 Personalization 객체에서 ToggleScore 메소드를 호출해야 합니다.
if (WebPartManager1.Personalization.Scope == PersonalizationScope.User &&
WebPartManager1.Personalization.CanEnterSharedScope) {
WebPartManager1.Personalization.ToggleScope();
}
EditorZone에 들어갈 수 있는 요소중 PropertyGridEditorPart는 WebPartZone의 특정 요소가 포함하고 있는 속성을 직접 설정할 수 있게 해주는 역활을 수행합니다. 좀 더 추가적인 내용은 '6. 사용자 WebPart 생성'부분을 참고해 주십시오.
WebPartVerb는 각 WebPartZone에 대해 최소화, 닫기등의 동작관련 세부설정을 가능하게 합니다.
<asp:WebPartZone ID="WebPartZone2" runat="server">
<CloseVerb Text="죽이기" Enabled="false" />
<ZoneTemplate>
<asp:TextBox ID="TextBox1" runat="server" Title="텍스트박스"></asp:TextBox>
</ZoneTemplate>
</asp:WebPartZone>
예들 들어 특정 WebPartZone에서 닫기에 관한 동작인 CloseVerb을 위와 같이 설정했다면 해당 WebPartZone은 '닫기'가 불가능해질 것입니다.
참고로 사용할 수 있는 WebPartVerb는 <ConnectVerb>, <DeleteVerb>, <EditVerb>, <ExportVerb>, <HelpVerb>, <MinimizeVerb>, <RestoreVerb>등이 있습니다.
기존에 존재하는 WebPart 대신 개발자가 직접 WebPart를 생성하여 사용할 수도 있습니다. 이를 위해 우선
프로젝트에 서버컨트롤을 생성하고 다음과 같이 클래스를 작성합니다.
[DefaultProperty("Text")]
[ToolboxData("<{0}:customerWebPart runat=server></{0}:customerWebPart>")]
public class customerWebPart : WebPart
{
public customerWebPart()
{
AllowClose = false;
}
[Personalizable, WebBrowsable]
public string YourName
{
get;
set;
}
TextBox namebox = new TextBox();
protected override void CreateChildControls()
{
namebox.ID = "myname";
namebox.Text = YourName;
Controls.Add(namebox);
}
}
클래스는 반드시 WebPart를 상속받아야 합니다. 그러면 AllowClose = false; 와 같이 WebPart에 존재하는 특별한 기능을 사용할 수 있게 됩니다. 예제에서는 AllowClose를 false로 설정하여 닫기 기능을 사용하지 못하도록 하였습니다.
YourName은 커스텀 속성인데 Personalizable과 WebBrowsable 속성이 정의되어 있는것을 볼 수 있습니다. Personalizable은 WebPart의 개인화를 활성화하며 WebBrowsable은 이후에 살펴볼 PropertyGridEditorPart에 속성설정이 표시될지를 지정합니다.
특히 Personalizable은 해당 속성의 설정값이 적용될 사용자 범위를 지정할 수 있는데
[Personalizable(PersonalizationScope.User), WebBrowsable]
public string YourName
{
get;
set;
}
User는 개인별 Shared는 전체사용자에 해당합니다. 즉, Shared로 지정된 속성을 수정하면 전체 사용자에게보여질 것이며 User로 지정된 것이라면 실제 속성을 수정한 사용자에게만 설정값이 적용될 것입니다.
CreateChildControls() 오버로드 메소드는 내부에서 컨트롤에 보여질 레이아웃을 구성합니다.
프로젝트 안에서 서버컨트롤을 생성했다면 해당 컨트롤을 배치할 수 있도록 해야 합니다. Visual Studio의 Toolbox에서 원하는 카테고리를 선택하고 마우스 오른쪽 버튼을 눌러 Choose Toolbox Items를 선택합니다.
그리고 Browse... 버튼을 눌러 현재 웹프로젝트의 dll을 선택하면 다음과 같이 추가한 서버컨트롤이 표시될 것입니다.
해당 서버 컨트롤을 선택하여 Toolbox에 추가하고 디자인모드에서 컨트롤을 끌어다 놓으면
<cc1:customerwebpart runat="server"></cc1:customerwebpart>
컨트롤이 생성될 것입니다. 컨트롤의 id를 namebox로 하고 코드에서 속성을 변경합니다.
namebox.YourName = "anchor37";
이제 해당 컨트롤을 원하는 WebPartZone에 배치하면 성공적으로 컨트롤이 표시될 것입니다.
<asp:WebPartZone ID="WebPartZone3" runat="server">
<ZoneTemplate>
<asp:Calendar ID="Calendar1" runat="server" Title="달력"></asp:Calendar>
<cc1:customerwebpart runat="server" ID="namebox"></cc1:customerwebpart>
</ZoneTemplate>
</asp:WebPartZone>
위에서 EditorZone에 대해 알아볼때 PropertyGridEditorPart를 언급한 적이 있는데 Eidit 모드에서 ProertyGridEditorPart를 사용할 경우 우리가 추가한 customerwebpart 컨트롤의 YourName속성이 다음과 같이 표시될 수 있습니다.
<asp:EditorZone ID="EditorZone1" runat="server">
<ZoneTemplate>
<asp:PropertyGridEditorPart ID="PropertyGridEditorPart1" runat="server" />
</ZoneTemplate>
</asp:EditorZone>
