DevExpress 강좌3-5 (SUI Demo) #2

1. DevExpress 강좌3-4 (SUI Demo) #2

- 강좌가 이어서 계속 됩니다. 지금까지 따라 하지 못하신 분은 추가된 소스를 가지고 계속 하시면 됩니다.

 

(1) 기본프로그램

- DocumentManager -> Run Designer -> Content Container 페이지를 활성화 합니다.

- Add New Container 를 클릭해서 컨테이너를 추가 할 수 있습니다.

- Page : 한번에 하나의 문서만 생성합니다. (이 데모에서는 문서에 대해 자동으로 생성되는 컨테이너 유형입니다.)

- SplitGroup : 분할기로 문서를 분리합니다.

- SlideGroup : 수평으로 나란히 설정되어 있습니다. (하단의 스크롤 막대나 태블릿으 스와이프 동작을 사용하여 탐색함)

- TabbedGroup,  PageGroup : 사용자가 선택기 UI 요소를 사용하여 다른 문서간에 전환할 수 있습니다.

 

- 두개의 Page 를 선택합니다.

- Page1 -> Document -> richEditUserControlDocument 선택

- Page2 -> Document -> gridUserControlDocument 선택

- 페이지 컨테이너를 명시적으로 설정함으로써 얻을 수 있는 한가지 이점은 컨테이너와 연결된 버튼과 같은 항목을 포함하여 컨테이너의 속성르 사용자 정의할 수 있다는 것입니다.

- Add WindowsUIButton 1번

- Add WindowsUISeparator 1번

- Add WindowsUIButton 2번

- 마지막 Button에서 Style를 선택해서 간단한 누름버튼과 확인버튼 사이에 선택할 수 있습니다.

    (PushButton -> CheckButton)

- 두 페이지 컨테이너 외에도 각각 페이지 그룹과 텝 그룹을 만듭니다.

- 두개의 문서를 하나의 보기로 결합하여 컨테이너 유형간의 시각적 차이를 보여주고 싶습니다.

- 컨테이너를 연결하기 위해 탐색트리(Navigation Tree)로 전환합니다.

- 기본적으로 탐색트리(Navigation Tree)가 자동으로 타일컨테이너의 타일을 문서와 연결합니다. 지금까지 타일이 생성되었습니다.

- 새로 생성된 컨테이너 항목은 다른 항목과 전혀 연결되지 않았습니다. 단지 컨테이너를 타일로 드래그하여 계층구조에 나라히 있을뿐입니다.

- 컨테이너를 타일과 활성화 대상으로 연결할 수 있습니다.

- 활성화 대상의 우선순위에서 할당을 제거합니다. 

- RichEditUserControlTile -> Document -> ( richEditUserControlDocument -> 없음 ) 변경

- Page2도 Page1과 같은 방식으로 이동 합니다.

- 다시 타일페이지(Tiles)로 돌아가 타일 두개를 더 추가합니다.

- 활성화 대상 속성을 페이지 그룹과 내가 만든 탭 그룹에 설정합니다.

- 탐색트리(Navigation Tree)에 새 타일이 목록에 표시되고 그위(Items)로 드래그 합니다.

- Documents에 있는 컨트롤 2개도 pageGroup1과 tabbedGroup1에 드래그하여 추가 합니다.

- 마지막 단계로 계층구조에 새 그룹을 올바르게 포함시키는 것이 중요합니다.

- 그렇지 않으면 런타임시 올바른 위치에 뒤로 버튼이 표시되지 않기 때문입니다.

- pageGroup1과 tabbedGroup1를 드래그해서 Children으로 이동합니다. (Children 그룹에 모두 표시되어 있음)

- 닫기(Close)

 

(2) 실행

- 리치편집컨트록에 맞춤페이지 컨테이너용으로 만든 버튼이 포함되어 있고,  

- 사용자 컨트롤에는 세번째 타일이 새페이지 그룹으로 연결되기 전과 같이 그리드가 표시되고,

- 세번째 타일 클릭시 다른 컨테이너에서 이미 본것과 동일한 문서가 표시됩니다.

- 탭 그룹의 네번째 타일 Rich Edit Control을 표시하는 탭을 표시합니다.

 

2. 프로그램 소스

sample_3_11.zip

0.04MB