PureJS에서 Wijmo 시작하기

빠른 시작 가이드는 애플리케이션에 Wijmo 컨트롤을 추가하는 단계별 방법을 다룹니다.

1. Wijmo 참조하기

2. 호스트 요소 추가하기

3. Wijmo 패키지 추가하기

4. Wijmo CSS 추가하기

5. Wijmo 그리드에 데이터 채우기

이번 섹션에서는 PureJS 애플리케이션(타입스크립트 ES2015 + ESM 기반)을 예로 들어, FlexGrid 컨트롤을 추가하는 방법에 대해 설명하도록 하겠습니다.

Wijmo 참조하기

애플리케이션에 Wijmo를 참조해줍니다. 코드에서 npm을 사용해 FlexGrid용 패키지를 추가하며 해당 단계에서 애플리케이션에 필요한 의존성도 함께 설치됩니다. Wijmo는 CDN을 통해서나 로컬로 배포하는 것도 가능하며 자세한 내용은 "Wijmo 레퍼런싱" 항목을 참조하세요.

npm install @mescius/wijmo.grid

호스트 요소 추가하기

애플리케이션에 호스트 요소를 추가하고 ID를 지정합니다. 해당 HTML 요소가 Wijmo 컨트롤로 변환됩니다.

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

예제에서는 index.html 파일에 FlexGrid용 호스트 요소를 추가합니다.

<div id="theGrid"></div>

Wijmo 패키지 추가하기

애플리케이션에 Wijmo 모듈을 추가합니다. 이 예제에서는 app.js 파일에서 ES2015의 import 문을 사용하여 모듈을 가져옵니다.

import * as wjGrid from '@mescius/wijmo.grid'; 
var theGrid = new wjGrid.FlexGrid('#theGrid');

위의 코드를 통해 "wijmo.grid" 모듈을 가져오고 FlexGrid 컨트롤 인스턴스를 생성합니다.

Wijmo 패키지 추가에 대한 자세한 내용은 "Wijmo 레퍼런싱" 항목을 참조하시기 바랍니다.

Wijmo CSS 추가하기

애플리케이션에 wijmo.css 스타일 파일을 로드합니다. 여기서는 ESM import 문을 사용하여 app.js 파일 상단에 스타일을 추가합니다.

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

Wijmo 컨트롤에 스타일을 추가하는 방법에 대한 자세한 내용은 "컨트롤의 크기조절 및 스타일" 항목을 참조하시기 바랍니다.

Wijmo 그리드에 데이터 채우기

그리드에 데이터를 바인딩하고 채우기 위해 itemsSource 속성을 사용해 데이터 소스를 바인딩 할 수 있습니다.

코드에서는 "Country(국가)", "Sales(매출)", "Expenses(비용)" 열을 그리드에 추가합니다.

/create some random data 
   var countries = 'Germany,UK,Japan,Italy,Greece'.split(','); 
   var data = []; 
   for (var i = 0; i < countries.length; i++) 
    { 
       data.push({          
           id: i, 
           country: countries[i], 
           sales: Math.random() * 10000, 
           expenses: Math.random() * 5000 
       }); 
   } 

    // bind a grid to the raw data 
       var theGrid = new FlexGrid('#theGrid', { 
       autoGenerateColumns: false, 
       columns: [ 
           { binding: 'country', header: 'Country', width: '2*' }, 
           { binding: 'sales', header: 'Sales', width: '*', format: 'n2' }, 
           { binding: 'expenses', header: 'Expenses', width: '*', format: 'n2' } 
       ], 
       itemsSource: data 
    }); 

이제 PureJS 애플리케이션에 FlexGrid 컨트롤을 성공적으로 추가하고 데이터를 할당했습니다. 비슷한 방식으로 다른 Wijmo 컨트롤들도 JavaScript 애플리케이션에 추가할 수 있습니다. 모든 컨트롤이 동작을 보고 싶다면 Wijmo 데모를 참조하시기를 바랍니다.

다른 프레임워크에서 Wijmo 컨트롤을 사용하는 방법은 프레임워크별 빠른 시작 가이드에서 확인할 수 있습니다.