PureJS에서 Wijmo 사용

참고 npm에서 설치하는 것 외에도 Wijmo Dev Kit을 다운로드하는 것을 적극 권장합니다. 개발 키트에는 소스 코드, 참조 앱 등이 포함된 수백개의 샘플이 포함되어 있습니다.

설치

Wijmo는 npm에 각 모듈에 대한 패키지와 함께 표시됩니다. 모든 npm 패키지와 마찬가지로 이를 사용하려면 컴퓨터에 NodeJS가 설치되어 있어야합니다.

NodeJS 명령 프롬프트 에서 다음 명령을 실행하여 npm에서 최신 wijmo 릴리스 버전을 설치할 수 있습니다 .

npm install @grapecity/wijmo.purejs.all

이를 통해 Pure JavaScript 모듈이 모두 설치됩니다. 다른 프레임워크에 대한 지원을 설치하거나 특정 제어 모듈을 설치하려면 npm 참조를 참조 하십시오 .

애플리케이션에 Wijmo 추가

먼저 응용 프로그램에 호스트 요소를 추가하고 ID를 제공하십시오. 이는 Wijmo 컨트롤로 변환 될 HTML 요소입니다.

<div id="hostElement"></div>

Wijmo 패키지에는 CommonJS 형식의 JavaScript 모듈이 포함되어 있습니다. Webpack 번들러 또는 SystemJS 런타임 모듈 로더와 같은 모듈을 로드할 수 있는 도구와 함께 사용할 수 있습니다.

TypeScript 또는 Babel이 지원하는 Wijmo모듈을 애플리케이션으로 가져오려면 ES2015 import 문을 사용할 수 있습니다. import 문의 모든 모듈 이름은 "@grapecity/" 접두사로 시작하고 그 뒤에 모듈 이름이 옵니다. 예를 들어 다음 코드는 "wijmo.grid"모듈을 가져오고 FlexGrid 컨트롤의 인스턴스를 만듭니다.

import * as wjcGrid from "@grapecity/wijmo.grid";
let grid = new wjcGrid.FlexGrid("#hostElement");

ES5에서 코드를 작성하면 CommonJS require() 함수를 사용하여 모듈을 가져올 수 있습니다. 예를 들면 다음과 같습니다.

var wjcGrid = require("@grapecity/wijmo.grid");
var grid = new wjcGrid.FlexGrid("#hostElement");

Wijmo css 추가하기

Wijmo 컨트롤이 올바르게 보이고 작동하려면 Wijmo CSS 파일을 응용 프로그램에 로드해야 합니다. 스타일은 @grapecity/wijmo.styles npm 패키지로 제공됩니다.

이 import 문을 공통 CSS 파일의 맨 위에 추가하여 스타일 애플리케이션을 로드할 수 있습니다.

@import "@grapecity/wijmo.styles/wijmo.css";

인기 있는 프레임워크와 함게 Wijmo 사용하기

Using Wijmo with NPM 글을 보고 어떻게 Wijmo npm 모듈이 인기 있는 개발 툴인 Angular CLI, create-react-app, Vue-CLI 그리고 Ionic CLI과 함께 사용될 수 있는지 확인해 주시기 바랍니다.