응용 프로그램에서 Wijmo 5를 사용하려면 HTML 페이지에 몇 가지 참조를 추가하여 주십시오.
먼저, GrapeCity 홈페이지에서 Wijmo를 다운로드합니다. ㅌip 파일에는 샘플, 참조 애플리케이션 등이 포함되어 있으므로 npm과 함께 zip 파일을 다운로드하는 것을 권장드립니다.
Wijmo 애플리케이션에 필요한 최소한의 파일 세트는 다음과 같습니다:
이 외에도 사용하시고 하는 기능에 따라 하나 이상의 추가 JS파일을 포함하십시오:
Wijmo에는 가장 널리 사용되는 JavaScript 프레임워크의 기본 컴포넌트로 컨트롤을 사용할 수있는 interop 모듈이 포함되어 있습니다:
파일의 참조하는 방법은 두 가지 옵션이 있습니다. Wijmo를 다운로드하고 필요한 파일을 응용 프로그램의 해당 폴더에 복사하거나 또는 콘텐츠 전송 네트워크(CDN)에서 클라우드에 호스팅 된 Wijmo 파일을 참조 할 수 있습니다. 아래 섹션은 이에 대한 예제를 보여줍니다.
Wijmo 파일을 다운로드하여 응용 프로그램 내의 폴더에 복사하십시오. Wijmo 스크립트 파일을 "scripts / vendors"라는 폴더에두고 "styles"라는 폴더의 CSS 파일을 HTML 페이지에 추가 할 수 있습니다:
<!-- Wijmo 레퍼런스 (필수) -->
<link href="styles/wijmo.min.css" rel="stylesheet" />
<!--
wijmo.min.css 대신에 아래와 같이 사용자 정의 테마 사용가능
<link href="styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="scripts/vendor/controls/wijmo.min.js"></script>
<!-- Wijmo 컨트롤 (옵션, 필요한 컨트롤 만 추가) -->
<script src="scripts/vendor/controls/wijmo.grid.min.js"></script>
<script src="scripts/vendor/controls/wijmo.chart.min.js"></script>
<script src="scripts/vendor/controls/wijmo.input.min.js"></script>
<script src="scripts/vendor/controls/wijmo.gauge.min.js"></script>
<!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) -->
<script src="scripts/vendor/controls/cultures/wijmo.culture.ko.min.js"></script>
<!-- AngularJS and Wijmo directives (옵션, Angular/React/Vue/etc 어플리케이션에서 사용가능) -->
<script src="scripts/vendor/angular.min.js"></script>
<script src="scripts/vendor/interop/angular/wijmo.angular.min.js"></script>
<!-- Wijmo 배포라이선스키 적용 (배포 시 필요) -->
<script>
wijmo.setLicenseKey(**'your license key goes here...'**);
</script>
이 경우 다운로드 할 내용이 없습니다. HTML 페이지에 다음 행을 추가하기만 하면 됩니다:
<!-- Wijmo 레퍼런스 (필수) -->
<link
href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css"
rel="stylesheet"
/>
<!--
wijmo.min.css 대신에 아래와 같이 사용자 정의 테마 사용가능
<link href="https://cdn.grapecity.com/wijmo/5.latest/styles/themes/wijmo.theme.modern.min.css" rel="stylesheet"/>
-->
<script src="https://cdn.grapecity.com/wijmo/JSOB_WIJMO_CURRENT_VERSION/controls/wijmo.min.js"></script>
<!-- Wijmo 컨트롤 (옵션, 필요한 컨트롤 만 추가) -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.gauge.min.js"></script>
<!-- Wijmo custom culture (옵션, 원하는 문화권을 추가) -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ko.min.js"></script>
<!-- AngularJS and Wijmo directives (옵션, Angular/React/Vue/etc 어플리케이션에서 사용가능) -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/JSOB_WIJMO_CURRENT_VERSION/interop/angular/wijmo.angular.min.js"></script>
<!-- Wijmo 배포라이선스키 적용 (배포 시 필요) -->
<script>
wijmo.setLicenseKey(**'your license key goes here...'**);
</script>
만약 가장 최신 버전을 항상 사용하고 싶으시다면 5.latest 레퍼런스에 버전 숫자를 교체하시면 됩니다.
다음과 같습니다.
<!-- latest Wijmo version -->
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<link
href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css"
rel="stylesheet"
/>
주의사항: CDN형태로 참조를 하시면 체험판이기 때문에 화면 오른쪽 하단에 Wijmo 워터 마크가 보이게 됩니다. 워터 마크를 표시하지 않으려면 정품을 구매하고 위에서 설명한대로 Wijmo를 로컬로 다운로드하여 배포해야합니다. 더 상세한 내용은 Wijmo 어플리케이션 라이선싱 섹션을 참고해주세요.
주의사항: 참조의 순서도 중요합니다. wijmo.js 모듈이 먼저 있어야하고 그 다음에 제어 모듈, 제어 확장이 있어야하며 wijmo.angular 모듈이 마지막에 포함되어야합니다.
구매문의 - 전화 : 1670-0583 | 이메일 : sales-kor@grapecity.com