디자이너컴포넌트 파일 메뉴 사용자 정의 - 디자이너 컴포넌트
페이지 정보
작성자 GCK루카스 작성일 2022-12-12 15:32 조회 402회 댓글 0건본문
관련링크
최근 기업과 정부의 디지털 트랜스포메이션이 가속화됨에 따라, 기존의 Excel(엑셀) 문서를 온라인 시스템에 통합하고, 이러한 엑셀 문서를 웹 상에서 관리하고 편집하고자 하는 요구 사항이 점점 많아지고 있습니다.
이를 위해, 웹 상에 구글 시트(Google Sheet) 또는 MS Office 365와 같이 기존의 Excel 파일과 호환이 되고, 최종 사용자가 기존의 MS Excel을 사용하는 것과 동일한 방식으로 사용할 수 있는 Excel(엑셀) 에디터를 구현하는 것은 결코 쉬운 일이 아닐 것 입니다.
이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라고 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시는 개발자 분들을 위해, SpreadJS를 기반으로 하는 를 제공하고 있습니다.
*실제 SpreadJS 디자이너 컴포넌트를 구현한 모습입니다.
는 구글 시트, 온라인 MS Excel과 유사한 UI, 메뉴 구조 그리고 Excel의 기능을 웹 페이지 상에 구현하고자 하시는 분들을 위한 완전한 Front-End Excel 에디터입니다.
디자이너 컴포넌트에는 아래와 같은 요소들이 포함되어 있습니다.
- 리본 메뉴
- 수식 표시줄
- 상태 표시줄
- 측면 패널
- 컨텍스트 메뉴
기본적으로 구성된 컴포넌트를 그대로 사용할 수도 있지만, 원하시는 형태에 맞게 커스터마이징하여 사용하실 수 있습니다.
"탭, 버튼, 컨텍스트 메뉴, 대화상자, 파일 불러오기 이벤트 바인딩, 상태 표시줄, 지역화"와 같은 추가적인 디자이너 컴포넌트를 커스터마이징 하는 방법을 확인 하고자 하시는 경우에는,
를 눌러 해당 글 목록을 확인하실 수 있습니다.
이번 글에서는 디자이너 컴포넌트를 커스터마이징하는 방법 중, 파일 메뉴를 눌렀을 때 나오는 화면에 사용자 지정 컴포넌트를 추가하는 방법을 소개합니다.
디자이너 컴포넌트 파일 메뉴
SpreadJS 디자이너 컴포넌트의 "파일 메뉴"를 선택하면, MS Excel에서 볼 수 있는 것과 같이 "새로 만들기", "저장(내보내기)", "열기(가져오기)", "인쇄"와 같은 추가적인 매뉴 항목들을 볼 수 있습니다.
위와 같은 파일 메뉴의 화면에 새로운 메뉴를 추가하고 필요 없는 메뉴는 삭제 할 수 있도록,
디자이너 컴포넌트에서는 사용자 정의를 위한 메소드들을 제공하고 있습니다.
파일 메뉴 항목 추가하기
아래 단계를 통해,
아래 이미지와 같이 "Custom Actions"이라는 새로운 메뉴와 하위 메뉴를 만들어 보도록 하겠습니다.
getTemplate 메서드를 사용하여 파일 메뉴 패널 템플릿을 가져옵니다.
let fileMenuTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);
파일 메뉴 패널 템플릿을 작성하여 사용자 정의 항목 및 관련 옵션을 추가합니다. 만들고자 하는 메뉴 구조는 아래와 같습니다: - Customs Actions -- Printer -- Action 1 -- Action 2
var listContainer = template["content"][0]["children"][0]["children"][0]["children"][0]["children"][1]; listContainer.items.push({ text: "Custom Actions", value: "CustomItem" }); var listDisplayContainer = template["content"][0]["children"][0]["children"][1]; listDisplayContainer.children.push({ type: "Container", visibleWhen: "activeCategory_main=CustomItem", children: [ { type: "TextBlock", margin: "50px 0 15px 50px", text: "Custom Actions", style: "font-size:36px;line-height:80px" }, { type: "ColumnSet", margin: "0 0 0 50px", children: [ { type: "Column", children: [ { type: "List", className: "file-menu-list", items: [ { text: "Print", value: "print" }, { text: "Action 1", value: "action_1" }, { text: "Action 2", value: "action_2" } ], bindingPath: "custom_item" } ], width: "350px" }, { type: 'Container', children: [ { "type": "Button", "margin": "20px 50px", "text": "Printing", "width": 120, "height": 120, "iconClass": "icon-common", "bindingPath": "custom_item_print", "iconPosition": "top" } ], visibleWhen: 'custom_item=print' }, { type: 'Container', children: [ { "type": "Button", "margin": "20px 50px", "text": "Action 1", "width": 120, "height": 120, "iconClass": "icon-common", "bindingPath": "custom_item_action_1", "iconPosition": "top" } ], visibleWhen: 'custom_item=action_1' }, { type: 'Container', children: [ { "type": "Button", "margin": "20px 50px", "text": "Action 2", "width": 120, "height": 120, "iconClass": "icon-common", "bindingPath": "custom_item_action_2", "iconPosition": "top" } ], visibleWhen: 'custom_item=action_2' } ] } ] });
작성한 템플릿을 registerTemplate 메서드를 사용하여 등록합니다.
GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuTemplate);
버튼 클릭 시, 수행할 간단한 동작들을 JS코드로 작성합니다.
var fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel); var oldExecuteFn = fileMenuPanelCommand.execute; fileMenuPanelCommand.execute = function (context, propertyName, newValue) { console.log("aaa"); oldExecuteFn.apply(this, arguments); switch (propertyName) { case 'custom_item_print': var workbook = context.getWorkbook(); workbook.print(); break; case 'custom_item_action_1': alert('do something for action 1') break; case 'custom_item_action_2': alert('do something for action 2') break; } } var config = GC.Spread.Sheets.Designer.DefaultConfig; config.commandMap = { fileMenuPanel: fileMenuPanelCommand }
config를 설정하며 디자이너 인스턴스를 초기화합니다.
let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
파일 메뉴 항목 제거하기
아래 단계를 따라 파일 메뉴에 항목을 제거할 수 있습니다. 이를 통해, 사용자의 사용 범위를 제안할 수 있습니다.
getTemplate 메서드를 사용하여 파일 메뉴 패널 템플릿을 가져옵니다.
let fileMenuTemplate = GC.Spread.Sheets.Designer.getTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate);
파일 메뉴 패널의 좌측 항목 중 원하는 항목을 제거합니다.
let listContainer = fileMenuTemplate["content"][0]["children"][0]["children"][0]["children"][0]["children"][1]; listContainer.items.splice(0,2);
파일 메뉴 패널의 우측 항목도 함께 제거합니다.
let listDisplayContainer = fileMenuTemplate["content"][0]["children"][0]["children"][1]; listDisplayContainer.children.splice(0,2);
작성한 템플릿을 registerTemplate 메서드를 사용하여 등록합니다.
GC.Spread.Sheets.Designer.registerTemplate(GC.Spread.Sheets.Designer.TemplateNames.FileMenuPanelTemplate, fileMenuTemplate);
다만, "새로 만들기" 항목을 제거하면 우측 항목의 최초 화면이 제대로 나오지 않기 때문에 최초 항목을 설정해 주어야 합니다.
let fileMenuPanelCommand = GC.Spread.Sheets.Designer.getCommand(GC.Spread.Sheets.Designer.CommandNames.FileMenuPanel); let oldExecuteFn = fileMenuPanelCommand.getState; fileMenuPanelCommand.getState = function (context, propertyName, newValue) { let options = oldExecuteFn.apply(this, arguments); if (options['activeCategory_main'] === 'New') { options['activeCategory_main'] = 'Export'; } return options; } let config = GC.Spread.Sheets.Designer.DefaultConfig; config.commandMap = { fileMenuPanel: fileMenuPanelCommand }
디자이너 인스턴스를 초기화합니다.
let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("gc-designer-container"), config);
- 아래와 "내보내기"와 "인쇄" 제외한, 모든 항목이 제거된 모습을 확인하실 수 있습니다.
를 눌러 글 목록을 확인해 보세요.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.