# Wijmo 디자이너를 사용하여 컨트롤 사용자 정의

## Content


[Wijmo 디자이너](https://demos.wijmo.com/5/WijmoDesigner/WijmoDesigner/) 는 Wijmo 컨트롤을 생성 및 구성을 위한 비주얼 디자이너입니다. Wijmo Designer는 Visual Studio에 표시되는 것과 유사한 속성 표 및 라이브 미리보기를 제공합니다. 디자인 화면을 사용하여 특정 컨트롤의 인스턴스를 만들고 해당 속성과 이벤트를 사용자 지정하고 응용 프로그램에 통합할 수 있는 HTML/JavaScript를 생성하십시오. 디자이너는 그리드 및 차트와 같은 복잡한 객체를 탐색하는 데 특히 유용합니다.

[Wijmo Designer 실행](https://demos.wijmo.com/5/WijmoDesigner/WijmoDesigner/)

페이지가 처음 열리면 디자인 화면에 라이브 샘플 데이터가 포함된 단일 **FlexGrid** 컨트롤이 포함됩니다. 디자인 화면의 컨트롤은 디자인 모드로 표시되므로 스크롤, 크기 조정, 또는 직접 상호 작용할 수는 없습니다. 대신, 페이지 오른쪽의 **속성** 창을 사용하여 컨트롤의 객체 모델을 조작하십시오. 사용 가능한 각 속성에는 적절한 유형의 편집기가 표시되며 변경사항은 선택한 컨트롤에 즉시 적용됩니다.

오른쪽의 **Event** 창에도 선택한 컨트롤에서 지원하는 각 이벤트에 대한 토글 버튼이 표시됩니다. 사용 설정한 각 이벤트에 대해 상용구 이벤트 처리 코드를 생성합니다.

디자인 화면은 순차적 레이아웃으로 여러 컨트롤을 지원합니다. 디자인 화면에서 컨트롤을 이동, 복제 또는 삭제하려면 페이지 상단의 **편집** 도구 모음을 사용하십시오.

| 명령      | 설명                                                                              |
| --------- | --------------------------------------------------------------------------------- |
| Move Up   | 선택한 컨트롤을 디자인 화면에서 한 위치 위로 이동합니다.                          |
| Move Down | 선택한 컨트롤을 디자인 화면에서 한 위치 아래로 이동합니다.                        |
| Duplicate | 선택한 컨트롤의 복사본을 만들어 디자인 화면에서 원래 컨트롤 바로 뒤에 삽입합니다. |
| Delete    | 디자인 화면에서 선택한 컨트롤을 영구적으로 제거합니다.                            |

선택한 컨트롤 인스턴스의 이름이 **Edit** 도구 모음 탭의 왼쪽에 표시됩니다 .

디자이너의 기본 메뉴는 처음에 접혀있고 세로 줄의 아이콘의 모음으로 표시됩니다. 페이지 왼쪽 상단의 Wijmo 로고를 클릭하여 다음 명령이 포함된 메뉴를 확장하십시오.

| 명령        | 설명                                                                                                                                                  |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
| Open        | **저장\*(Save)** 명령으로 작성된 JSON 파일을 사용자에게 프롬프트하고 해당 컨텐츠를 디자인 화면에 렌더링합니다.                                        |
| Save        | **Open** 명령을 통해 재로드를 위해 디자인 화면의 컨텐츠를 JSON 파일로 다운로드합니다.                                                                 |
| Toolbox     | 모듈 이름 (그리드, 차트, 입력, 게이지, 탐색, olap)별로 그룹화된 접혀있는 Wijmo 컨트롤 패널을 엽니다. 컨트롤 이름을 클릭하여 디자인 화면에 추가합니다. |
| Themes      | 사용 가능한 Wijmo 테마 목록을 엽니다. 테마 이름을 클릭하여 디자인 화면의 모든 컨트롤에 적용하십시오.                                                  |
| Source View | 디자인보기에서 소스 코드보기로 전환합니다                                                                                                             |
| Help        | 이 페이지를 표시합니다.                                                                                                                               |
| About       | Wijmo 버전 번호와 저작권 고지를 표시합니다.                                                                                                           |

**Save** 및 **Open** 명령을 통해, 현재 작업중인 디자인 내용을 Json으로 저장하고, 나중에 재작업을 위해 디자이너로 불러올 수 있습니다.

디자이너의 내용을 HTML/JavaScript 코드로 보려면 **Source View** 명령을 사용하십시오. 소스 뷰에서 디자인 화면은 Wijmo 스크립트 및 CSS 참조가 포함된 코드 `<div>`, 디자인 화면의 각 컨트롤에 대한 태그 및 각 컨트롤을 만들고 초기화하는 스크립트 코드로 대체됩니다. 페이지에서 직접 코드 스니펫을 복사하거나 기본 메뉴에서 **Save** 명령을 사용할 수 있습니다.

| 명령        | 설명                                                                                                                                               |
| ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| Save        | 디자인 화면의 컨텐츠를 Wijmo 참조 및 디자인 보기에 지정된 컨트롤 정의 및 사용자 정의와 일치하는 스크립트 코드가 포함된 HTML 파일로 다운로드합니다. |
| Design View | 소스 코드 보기에서 디자인 보기로 전환합니다.                                                                                                       |

디자인 화면으로 돌아가려면 **디자인 뷰** 명령을 사용하십시오.