Wijmo 시작하기

Contents

Wijmo 컨트롤을 빠르게 여러분의 어플리케이션에 가져오는 방법을 지금 확인해보세요.
코드 몇 줄 만으로 전세계 개발자가 사랑하는 Wijmo의 고성능 데이터 시각화/UI 컨트롤을 바로 적용할 수 있습니다.

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

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

  • wijmo.css: 모든 Wijmo 컨트롤의 스타일을 지정하는 데 사용되는 CSS 규칙이 들어 있습니다.
  • wijmo.js: 세계화/지역화, 이벤트, 컨트롤, 및 CollectionView 클래스를 포함한 Wijmo 5 인프라가 들어 있습니다.

이 외에도 사용하시고 하는 기능에 따라 하나 이상의 추가 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 Local JS 라이브러리 레퍼런싱

Wijmo 파일을 다운로드하여 응용 프로그램 내의 폴더에 복사하십시오. Wijmo 스크립트 파일을 "scripts / vendors"라는 폴더에두고 "styles"라는 폴더의 CSS 파일을 HTML 페이지에 추가 할 수 있습니다:

[Header]

<!-- 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>


Wijmo CDN JS 라이브러리 레퍼런싱

로컬에서 다운 받지 않고 빠르게 최신 버전의 위즈모를 사용해보고 싶으실 경우, CDN을 사용할 수 있습니다.
이 경우 별도로 다운로드 할 내용이 없습니다. HTML 페이지에 다음 행을 추가하기만 하면 됩니다:

[Header]

<!-- 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/5.latest/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.ja.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/5.latest/interop/angular/wijmo.angular.min.js"></script>


<!-- Wijmo 배포라이선스키 적용 (배포 시 필요) -->
<script>
  wijmo.setLicenseKey(**'your license key goes here...'**);
</script>


애플리케이션에 Wijmo 추가


사용하시고자 하는 컨트롤의 레퍼런싱이 완료되면, 이제 아래 코드와 같이 HTML BODY 섹션에 호스트 요소를 추가하고 ID를 제공하십시오.
이는 Wijmo 컨트롤로 변환 될 HTML 요소입니다.

[Body]

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

[JavaScript ]

onload = function() {


  // 랜덤 데이터 생성
  // 실제 개발에서는 원하시는 데이터를 불러오시면 됩니다.
  var countries = 'US,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
    });
  }
  
  // hostElement에 Wijmo의 FlexGird 생성
  // itemsSource: data - CollectionView로 데이터를 그리드에 바인딩
  // autoGenerateColumns: false >> 컬럼 사용자 정의 
  var theGrid = new wijmo.grid.FlexGrid('#hostElement', {
    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
  });


}

주의사항: CDN형태로 참조를 하시면 체험판이기 때문에 화면 오른쪽 하단에 Wijmo 워터 마크가 보이게 됩니다. 워터 마크를 표시하지 않으려면 정품을 구매하고 위에서 설명한대로 Wijmo를 로컬로 다운로드하여 배포해야합니다. 더 상세한 내용은 Wijmo 어플리케이션 라이선싱 섹션을 참고해주세요.

Next
배포 라이선싱