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

EditorZone 컨트롤 사용하기

EditorZone은 다른 Zone에 있는 WebPart의 속성을 사용자가 편집할 수 있게 해 줍니다. EditorZone도 zone 컨트롤이라서 자기 안에 WebPart를 가지는 데 그 기능이 편집을 지원 하기위한 Zone이므로 EditorZone안에 올 수 있는 WebPart는 이미 정해진 특별한 WebPart만 올 수 있습니다. 이렇게 EditorZone과 같이 특별한 Zone안에만 들어 갈 수 있게 만들어 놓은 WebPart를 customization part라고 부릅니다. 사실 customization part라는 용어가 중요한 것은 아니고 EditorZone안에는 들어가는 part가 몇가지로 이미 정해져 있다라고만 알고 있으면 될 듯합니다.

EditorZone 안에 들어 갈 수 있는 customization part 네 가지

- AppearanceEditorPart

- BehaviorEditorPart

- LayoutEditorPart

- PropertyGridEditorPart

실습을 해 봅시다.

1. 화면에 EditorZone을 우선 드래그 합니다.

2. EditorZone안에 AppearanceEditorPart를 드래그 합니다. 드래그 할 때 EditorZone의 헤더 부분 아래에 드래그 앤 드롭해야 합니다.

EditorZone 안에는 AppearanceEditorPart 뿐만 아니라 나머지 세 개의 BehaviorEditorPart, LayoutEditorPart, PropertyGridEditorPart를 드래그 해서 넣을 수 있습니다. 그리고 같은 AppearanceEditorPart 도 여러개 집어 넣을 수 있습니다.

프로그래머라면 Default.aspx 소스가 어떻게 되는 지 보고 넘어가지 않을 수 없습니다.

<asp:EditorZone ID="EditorZone1" runat="server">     <ZoneTemplate>         <asp:AppearanceEditorPart ID="AppearanceEditorPart1" runat="server" />     </ZoneTemplate> </asp:EditorZone>

EditorZone 요소 안에 여느 WebPart와 마찬가지로 ZoneTemplate 요소가 들어가 있는 것에 유의해야 합니다.

3. 페이지에 EditorZone이 있다면 WebPartManager를 Edit 모드로 바꿀 수 있습니다. 페이지에 버튼을 추가하고 “에디트 모드로 바꾸기”로 Text속성을 설정합니다.

4. 버튼의 클릭 이벤트 핸들러를 아래의 코드와 같이 작성합니다.

protected void Button3_Click(object sender, EventArgs e) {     WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode; }

5. 페이지를 실행 합니다. “에디트 모드로 바꾸기” 버튼을 눌러 봅니다. 엇! DesignDisplayMode로 설정할 때와 별로 바뀐 것이 없어 보입니다. 하지만 Verb 메뉴를 펼쳐 보시면 “편집” 메뉴가 하나 더 추가 된 것을 확인 할 수 있습니다.

6. “편집” Verb 메뉴항목을 선택합니다. 텍스트 박스에 대한 모양 속성을 설정할 수 있도록 EditorZone 안에 AppearanceEditorPart가 보입니다.

7. 적절하게 모양을 바꾸고 모양을 수정한 것을 적용하기 위해서 EditorZone의 “확인” 버튼을 클릭합니다. 이 경우에는 제목을 “도서검색”으로 설정해 보겠습니다.

참고로 EditorZone에서 “확인” 버튼 말고도 “취소”, “적용”, “닫기”의 세 가지 동작이 더 있습니다. 그리고 “닫기” 기능의 경우에는 EditorZone 오른쪽 상단에 링크로 표시 됩니다.

“닫기” 기능은 EditorZone을 화면에서 없애버리도록 작동합니다.

“확인” 버튼은 편집한 값을 적용한 후 EditorZone을 닫습니다.

“취소” 버튼은 사용자가 편집한 값을 적용하지 않고 단순히 EditorZone을 닫습니다.

“적용” 기능은 편집한 값을 적용하는 것은 “확인” 버튼과 같지만 EditorZone은 페이지에 계속 남아 있습니다.

8. 브라우저에서 텍스트박스 컨트롤의 제목인 “제목없음[1]”에서 “도서검색”으로 바뀌었습니다. 여기서 유의 할 것은 화면에 EditorZone이 사라지긴 했지만 아직 WebPartManager1의 모드는 여전히 EditDisplayMode입니다. WebPartManager의 모드는 명시적으로 모드 설정을 바꾸어 지키 전에는 화면에 PostBack이 일어나도 바뀌지 않습니다.

** 참고로 Visual Studio에서 EditorZone에 대한 구성을 마친 후 다른 Display모드에 대한 화면 디자인을 계속 하고자 할 때 EditorZone이 디자인 창에 계속 그려져 있다면 혼동스러울 수 있습니다. 따라서 EditorZone을 사짝 접는 기능이 있는데요. EditorZone 컨트롤의 스마트태그를 눌러서 작업을 펼쳐 보면 “찾아보기 모드로 보기” 체크 박스가 있습니다. 이 체크 박스를 체크 표시하면 EditorZone이 접히게 됩니다.