데모
도움말
API
다른 샘플
다운로드
도움말 문서
Wijmo 시작하기
Wijmo 레퍼런싱
5.20222.877
5.20222.877

Wijmo API 레퍼런싱

응용 프로그램에서 Wijmo 5를 사용하려면 HTML 페이지에 몇 가지 참조를 추가하여 주십시오.

먼저, GrapeCity 홈페이지에서 Wijmo를 다운로드합니다. ㅌip 파일에는 샘플, 참조 애플리케이션 등이 포함되어 있으므로 npm과 함께 zip 파일을 다운로드하는 것을 권장드립니다.

Wijmo 애플리케이션에 필요한 최소한의 파일 세트는 다음과 같습니다:

이 외에도 사용하시고 하는 기능에 따라 하나 이상의 추가 JS파일을 포함하십시오:

  • wijmo.grid.js: FlexGrid 컨트롤이 들어 있습니다.
  • wijmo.chart.js: FlexChart 및 FlexPie 컨트롤이 들어 있습니다.
  • wijmo.input.js: ComboBox, AutoComplete, InputDate, InputTime, InputNumber, InputMask, ListBox, Menu, 및 Calendar 컨트롤을 비롯한 여러 입력 컨트롤이 들어 있습니다.
  • wijmo.gauge.js: LinearGauge, RadialGauge, 및 BulletGraph를 비롯한 여러 게이지 컨트롤이 있습니다.
  • wijmo.nav.js: TabPanel, 및 TreeView가 포함된 네비게이션 컨트롤이 있습니다.
  • wijmo.culture.[CultureName].js: 미국 영어 이외의 언어로 응용 프로그램을 개발하는 데 사용되는 문화 별 파일이 들어 있습니다.
  • wijmo.theme.[ThemeName].css: Wijmo 5 컨트롤의 모양을 사용자 지정하는 데 사용되는 CSS 규칙이 들어 있습니다. wijmo.css 대신 원하시는 테마를 사용하면 됩니다.

Wijmo에는 가장 널리 사용되는 JavaScript 프레임워크의 기본 컴포넌트로 컨트롤을 사용할 수있는 interop 모듈이 포함되어 있습니다:

  • wijmo.angular.js: AngularJS 애플리케이션에서 Wijmo 컨트롤을 캡슐화하는 지시문을 포함합니다.
  • wijmo.angular2.js: Angular 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
  • wijmo.react.js: React 애플리케이션에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
  • wijmo.vue.js: Vue 1.x 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
  • wijmo.vue2.js: Vue 2.x 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.
  • wijmo.knockout.js: Knockout 응용 프로그램에서 Wijmo 컨트롤을 캡슐화하는 컴포넌트가 포함되어 있습니다.

파일의 참조하는 방법은 두 가지 옵션이 있습니다. Wijmo를 다운로드하고 필요한 파일을 응용 프로그램의 해당 폴더에 복사하거나 또는 콘텐츠 전송 네트워크(CDN)에서 클라우드에 호스팅 된 Wijmo 파일을 참조 할 수 있습니다. 아래 섹션은 이에 대한 예제를 보여줍니다.

로컬에 다운로드 하여 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>

CDN에서 Wijmo 배포

이 경우 다운로드 할 내용이 없습니다. 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