Wijmo 디자이너를 사용하여 컨트롤 사용자 정의
Wijmo 디자이너 는 Wijmo 컨트롤을 생성 및 구성을 위한 비주얼 디자이너입니다. Wijmo Designer는 Visual Studio에 표시되는 것과 유사한 속성 표 및 라이브 미리보기를 제공합니다. 디자인 화면을 사용하여 특정 컨트롤의 인스턴스를 만들고 해당 속성과 이벤트를 사용자 지정하고 응용 프로그램에 통합할 수 있는 HTML/JavaScript를 생성하십시오. 디자이너는 그리드 및 차트와 같은 복잡한 객체를 탐색하는 데 특히 유용합니다.
페이지가 처음 열리면 디자인 화면에 라이브 샘플 데이터가 포함된 단일 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 | 소스 코드 보기에서 디자인 보기로 전환합니다. |
디자인 화면으로 돌아가려면 디자인 뷰 명령을 사용하십시오.