디자이너컴포넌트 다국어 리소스 적용하기 - 디자이너 컴포넌트
페이지 정보
작성자 GCK루카스 작성일 2022-07-28 16:37 조회 555회 댓글 0건본문
관련링크
국내 기업과 솔루션의 해외 진출이 많아지면서, 각 나라의 언어(외국어)에 맞추어 Excel(엑셀) 에디터를 제공하여 여러 나라의 직원들이 유기적으로 일할 수 있는 엑셀(Excel) 기반의 시스템을 구현하자 요구가 많아 지고 있습니다.
이러한 요구 사항에 맞추어 GrapeCity에서는 개발자 분들이 조금이라도 쉽고 빠르게 웹 상에 Excel(엑셀) 스프레드시트의 UI와 엑셀 기능들을 구현할 수 있는 컨트롤과 함수를 제공하는 를 제공하고 있으며, 또한, 완전한 Excel 에디터 기능을 원하시 분들을 위해, SpreadJS를 기반으로 하는 를 제공하고 있습니다.
추가적으로 영어, 한국어, 중국어, 일본어의 다양한 언어 리소스(라이브러리)를 제공하여, 필요한 언어(외국어)에 맞추어 웹 Excel(엑셀) 화면과 기능을 개발하실 수 있도록 도움을 드리고 있습니다.
이번 글에서는 구글 시트(Google Sheet) 또는 MS Office 365와 같이 웹 엑셀 에티터를 개발하실 때 가장 많이 사용하시는 SpreadJS의 디자이너 컴포넌트(Excel 에디터)를 커스터마이징하여, 여러 언어 리소스를 동시에 불러와 적용하는 방법을 소개합니다.
해당 내용들을 참고하여 디자이너 컴포넌트에 외국어 언어 패치를 통해 다국어 지원이 되는 웹 엑셀 에디터를 구현해 보실 수 있습니다.
* 디자이너 컴포넌트에 대한 더 많은 자료는 여기를 확인하실 수 있습니다.
아래 화면은 실제 디자이너 컴포넌트로 구현된 화면입니다.
상단의 HTML / JS 탭을 통해 소스코드를 확인하고 바로 수정해 결과를 확인해볼 수 있습니다.
제공 언어 리소스
| SpreadJS 언어 리소스 | 디자이너 컴포넌트 언어 리소스 |
영어 | 기본 적용 (다른 언어 리소스 미적용 시) | gc.spread.sheets.designer.resource.en.xx.x.x.min.js |
한국어 | gc.spread.sheets.resources.ko.xx.x.x.min.js | gc.spread.sheets.designer.resource.ko.xx.x.x.min.js |
일본어 | gc.spread.sheets.resources.ja.xx.x.x.min.js | gc.spread.sheets.designer.resource.ja.xx.x.x.min.js |
중국어 | gc.spread.sheets.resources.zh.xx.x.x.min.js | gc.spread.sheets.designer.resource.cn.xx.x.x.min.js |
이와 같이 여러 언어 리소스를 제공하지만,
한 번에 불러온다면 가장 마지막에 적용된 리소스로 적용됩니다.
따라서 디자이너 컴포넌트의 언어를 변경하기 위해서는 setResources 메소드를 이용하여
언어 리소스를 필요할 때 적용해 주어야 하며, 언어 리소스를 setResources 메소드에 적용할 수 있는 구조로 바꿔주어야 합니다.
따라서, 아래의 과정을 진행해야 합니다.
setResources 메소드에 적용하는 언어 리소스는 별도로 제공되지 않으며, 사용하시는 버전에 따라 아래 과정을 진행해 주어야 합니다.
리소스 파일 생성 및 적용 과정
- 리소스 파일 생성 샘플을 통해 각 언어의 디자이너 컴포넌트 리소스 파일 생성
- 생성한 디자이너 컴포넌트 리소스 파일을 로드 후 setResources 메소드로 적용
- SpreadJS의 언어도 함께 변경
각 단계의 진행 방법을 아래에서 자세히 소개합니다.
1. 디자이너 컴포넌트의 리소스 파일 생성
우선 가장 기본적인 디자이너 컴포넌트를 생성합니다.
SpreadJS 디자이너 컴포넌트 - 빠른 시작을 따라하거나 다운 받은 라이브러리 폴더의 SpreadJS.Release.xx.x.x\Designer\Designer Component\samples\purejs 경로에서 가장 기초의 샘플을 확인할 수 있습니다.
이때, 디자이너 컴포넌트의 리소스 파일은 원하는 언어의 리소스 파일을 로드합니다.
<script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.ko.15.1.2.min.js"></script> <!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.cn.15.1.2.min.js"></script> --> <!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.en.15.1.2.min.js"></script> --> <!-- <script src="http://cdn.grapecity.com/spreadjs/hosted/scripts/gc.spread.sheets.designer.resource.ja.15.1.2.min.js"></script> -->
아래 코드를 이용하여 리소스를 파일로 생성합니다.
var res_json_str = JSON.stringify(GC.Spread.Sheets.Designer.getResources()); //For KO Resources var result = 'var ko_res_str = ' + "`" + res_json_str + "`;"; result = result.replaceAll('',''); saveAs(new Blob([result], { type: "text/javascript;charset=utf-8" }), 'ko_res.15.1.2.js');
리소스 파일 생성 샘플은 아래에서 확인하실 수 있습니다.
"디자이너 컴포넌트 리소스 파일 생성" 버튼을 클릭하시면, 생성된 한국어 리소스 파일이 다운로드 되는 샘플입니다.
2. 생성한 리소스 파일을 본 프로젝트에 적용
1번 단계에서 생성한 리소스 파일을 setResources 메소드를 통해 적용합니다.
GC.Spread.Sheets.Designer.setResources(JSON.parse(ko_res_str)); //디자이너 컴포넌트 언어 리소스 변경
3. SpreadJS의 언어도 함께 변경
또한 디자이너 컴포넌트 리소스 뿐만 아니라 SpreadJS의 언어도 함께 변경해줍니다.
GC.Spread.Common.CultureManager.culture("ko-kr"); //SpreadJS 언어 변경
한국어, 영어, 중국어, 일본어 드롭 다운 리스트를 생성하고 언어를 변경하는 샘플을 아래에서 확인하실 수 있습니다.
드롭 다운 리스트에서 언어를 선택할 때마다 언어가 변경됩니다.
* 디자이너 컴포넌트에 대한 더 많은 자료는 여기를 확인하실 수 있습니다.
지금 바로 SpreadJS를 다운로드하여 직접 테스트해보세요!
댓글목록
등록된 댓글이 없습니다.