2.Navigation Controls - Demo1

- 기초교육에서는 간단한 공통컴포넌트 기능이 무었이 있다고만 설명했다면 이제부터는 컴포넌트 사용에 대해서 좀더 알아보겠습니다.

- 저도 잘 몰라서 여러번 테스트 해보고 올립니다. 저와 비슷한 초심자 분들을 위한 내용으로 정리해 보겠습니다.

- 2단원에서는 제목과 같이 DevExpress 컴포넌트중 Navigation & Layout에 있는 기능을 설명합니다.

(1) BarManager 컴포넌트

- 신규 프로젝트를 생성을 sample_2_3으로 기본 Blank Screen 으로 생성합니다.

- 생성된 기본 화면 Form1 입니다.

- 도구상자에서 barmanager를 검색해서 컴포넌트를 추가 합니다.

- barManager1 컴포넌트가 추가되면서 화면에 메뉴[Add]라는 부분이 3개가 생성됩니다.

- 메뉴바로 Top메뉴, Toolbar메뉴, Bottom메뉴 3개 구성

(2) BarManager 컴포넌트 - Top 메뉴 추가#1

- Top메뉴에서 Add를 클릭하시면 팝업창 나타납니다. -> Menu(BarSubItem) 클릭

- Menu(BarSubItem) 클릭하시면 아래와 같이 입력하는 상자가 나오는데 이곳에 &File를 입력합니다.

- 그럼 File 메뉴가 생성됩니다. 그리고 File 메뉴를 다시 클릭하면 서브 메뉴를 입력할수 있는 팝업창이 나타납니다.

- File 메뉴 클릭후 서브메뉴창에서 Button(BarButtonItem) 클릭 선택합니다.

- Button(BarButtonItem) 클릭후 박스상자 내용에 &Quit 라고 입력합니다.

- 지금까지 잘따라 하셨다면 다음과 같이 표시 되었을 것입니다.

- 그럼 이번에는 Quit 메뉴에서 더블클릭해서 Script를 입력해 보겠습니다.

- Quit 메뉴에서 더블클릭후 Script 창에서 Close(); 를 입력합니다.

- 이제 프로그램을 실행해 보겠습니다.

- 프로그램 실행 화면

- 실행화면에서 File -> Quit 선택 하시면 프로그램이 종료 됩니다.

(3) BarManager 컴포넌트 - Top 메뉴 추가#2

- 다시한번 Top메뉴에서 Add를 클릭하시면 팝업창 나타납니다. -> Menu(BarSubItem) 클릭

- Menu(BarSubItem) 클릭후 &New 라고 입력합니다.

- New 메뉴아래 서브 메뉴도 추가해 보겠습니다.

- New 메뉴 클릭후 서브메뉴에서 Menu(BarSubItem) 클릭 선택합니다.

- Menu(BarSubItem) 클릭후 Toolbars 라고 입력합니다.

- Toolbars 서버 메뉴를 추가하겠습니다.

- Toolbars 클릭후 Toolbar List(BarToolbarsListItem)를 클릭 선택합니다. 

- Toolbar List(BarToolbarsListItem)를 클릭후 박스내용은 기본내용 그대로 앤터(변경해도 상관없음) 합니다.

- 그럼 (barToolbarsListItem1) 이라고 나타납니다.

- 저장후 바로 실행해 보겠습니다.

- 실행화면에서 New -> Toolbars 를 보시면 툴바 체크내용이 표시되어 있습니다.

- 체크 선택를 해제하시면 메뉴에서 메뉴바가 없어지고 나타나기를 반복합니다.

(4) BarManager 컴포넌트 - Toolbar 메뉴 추가#1

- Toolbar 메뉴에서 Add 클릭후 Button(BarButtonItem) 클릭 선택합니다.

- Button(BarButtonItem) 클릭후 Save 입력합니다.

- Save Button에 Image를 변경해 보겠습니다.

- Save 입력후 Save 윗쪽 세모양(>)  선택후 Image 클릭시 팝업창(Image Picker)가 나타납니다.

- 이때 Image Picker에는 3개의 Picker(VS Image, Dx Raster, Dx Vector)가 있습니다.

- 우리는 DX Vector Images에서 save 이미지를 찾아 아이콘 선택후 OK를 선택합니다.

- DevExpress에서 기본 지원하는 Image가 많이 준비되어 있네요.

- Save Image 선택후 화면 (아이콘 표시)

- Save Image 선택후 Disk 모양 아이콘만 표시됩니다.

- 그래서 Paint Style를 선택해서 이미지아이콘과 Text가 같이 표시됩니다.

(5) BarManager 컴포넌트 - Toolbar 메뉴 추가#2

- Toolbar 메뉴에서 Add 클릭후 Editor(BarEditItem)에 마우스를 위치하면 아래와 같이 확장서브 차이 보여지네요

- Editor(BarEditItem) -> TextEdit 클릭선택합니다.

- TextEdit 클릭선택후 Search 를 입력합니다.

- 입력하고 나면 박스만 나타나네요

- 오른쪽 마우스버튼클릭후 Image and Text 를 선택합니다.

- 다시 오른쪽 마우스버튼클릭후 Begin a Group 클릭 선택합니다.

(6) BarManager 컴포넌트 - Customize

- 아래 barManager1 컴포넌트를 클릭해서 Customize 클릭합니다.

- 클릭시 Customization 팝업창이 나타납니다.

- 이때 Commands 탭 선택하면 기존에 등록된 메뉴 Item를 모두 확인 할수 있습니다.

- 여기에서 원하는 자리로 드래그드랍 해서 추가/이동 할수가 있습니다.

- Customization 팝업창에 있는 Quit 를 마우스클릭 누른상태로 드래그해서 화살표 모양 위치로 이동한후 마우스를 놓으면 Quit Item이 Toolbar에 추가 됩니다.

- 이동후 Toolbar 내용입니다.

- 이번에는 Toolbar에 있는 Search를 Top 메뉴 New-Toolbars 아래 화살표 위치로 추가 해 보겠습니다.

- 좀전과 같이 마우스 드래그해서 이동으로 추가합니다.

- 이동후 Top 메뉴에 추가된 화면입니다.

- 이제 프로그램을 실행해 보겠습니다.

- 프로그램 실행 화면

- 현재 메뉴를 해 보시면 같은 메뉴에서 동시에 적용되는것을 알수 있습니다.

- Toolbar에 Search에 Test라고 입력한후에 Top메뉴 New를 클릭해 보시면 확인할수 있습니다.

- Top 메뉴 New 클릭시 Search 에서 Test라고 표시 되어 있습니다.

- 참고로 New -> Toolbars -> Customize 메뉴를 확인해 보겠습니다.

- Customize 메뉴 선택시 Customization 팝업창이 나타납니다.

- 이때 실행 상태에서 메뉴를 사용자에 맞추어 수정가능합니다. (이동/삭제/추가)

- Toolbars에서 오른쪽 마우스 클릭하면서도 수정 가능합니다.

- Toolbar 메뉴에서도 Customize를 선택할수 있습니다.

- Customize 메뉴를 차단(보이지 않게) 하시고자 할경우는 barManager1 속성에서 선택하여 True -> False

- AllowCustomization - Top 메뉴

- AllowQuickCustomization - Toolbar 메뉴

- 실행화면에서 Customize 메뉴가 사라진것을 확인할수 있습니다.

(7) BarManager 컴포넌트 - 소스

sample_2_3.zip

0.01MB