Wijmo 2018 v1

새로운 라이선싱 메커니즘

서버 배포 시의 Wijmo 라이선싱 메커니즘을 새롭게 구현했습니다. 이제 Wijmo를 사용하는 응용 프로그램에 배포 키를 생성해야 합니다. 배포 키를 통해 응용 프로그램에서 Wijmo를 사용할 수 있는 권한을 부여합니다.

당사에 요청(1670-0583 또는 sales-kor@grapecity.com) 하여 배포 키를 발급받으실 수 있습니다. 배포 키는 사용할 도메인을 알려주시면 키를 생성해드리고, 이 키를 응용 프로그램에 적용해야 합니다.

localhost에서는 Wijmo 라이선싱에 배포 키가 필요하지 않으므로 개발 프로세스가 중단되지 않습니다. 응용 프로그램을 서버에 배포할 때만 배포 키를 생성하여 적용하면 됩니다.

배포 키 없이 Wijmo 응용 프로그램을 배포하는 경우, 다음과 같은 팝업이 표시됩니다.

Licensing popup
라이선싱 팝업


프로덕션 중인 Wijmo를 사용하려면 다음과 같은 간단한 절차를 따르면 됩니다.

  • Wijmo를 구매한 후 당사에 배포 키 발급요청을 합니다.
  • 다음과 같이 Wijmo의 setlicenseKey 메서드를 사용하여 응용 프로그램에 배포 키를 적용합니다.

    예:

    wijmo.setlicenseKey(key);

참고: 당사는 Wijmo를 체험판용 버전 및 프로덕션용 버전 두 가지로 출시해왔습니다. 이제는 두 가지 모드(체험판 또는 프로덕션)에서 실행되는 단일 버전 만 보유함으로써 프로덕션 단계로 이동할 때 Wijmo 파일을 교체할 필요가 없어졌습니다.


NPM에 게시

새로운 라이선싱 메커니즘을 추가함으로써 얻는 가장 큰 이익은 이제 단일 배포를 보유하게 되어 NPM에 게시할 수 있게 되었다는 것입니다. 당사는 이날이 오기만을 오랫동안 기다려왔고, 마침내 NPM에 Wijmo를 게시하게 되어 기쁩니다.

NPM logo

당사는 수년 동안 자체 NpmImages를 게시해왔습니다. 모든 Angular v5 샘플에서는 이를 사용해 Wijmo를 당사 자체 서버에서 모듈로 설치했고, 로컬 파일 시스템에서 Wijmo를 설치하도록 안내하는 문서도 있었습니다. 좋은 소식은 둘 중 한 패턴을 복사하면 NPM으로 쉽게 이동할 수 있다는 것입니다.

변경해야 할 것은 딱 한 가지인데, 다음과 같이 당사 서버를 가리키는 package.json의 사용자 정의 URL을 삭제하고 사용하고자 하는 Wijmo의 버전을 추가하는 것입니다.

변경 전(호스팅 대상):

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-CommonJs-5.20173.409.tgz",
    "zone.js": "^0.8.18"
  },

변경 전(로컬):

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": " ../wijmo_download/NpmImages/wijmo-commonjs-min",
    "zone.js": "^0.8.18"
  },

변경 후:

  "dependencies": {
    "@angular/common": "^5.0.0",
    ...
    "wijmo": "5.20181.450",
    "zone.js": "^0.8.18"
  }, 

NPM 설치 명령은 다음과 같이 동일합니다.

npm install Wijmo 

@import 문 역시 다음과 같이 동일합니다.

import * as wjcGrid from 'wijmo/wijmo.grid';

이게 전부입니다. 최신 웹 개발을 위해 대폭 향상된 Wijmo의 사용 편의성을 한껏 누리시기 바랍니다. 당사는 NPM에 게시되어 무척 기쁩니다.


새로운 TabPanel 컨트롤

또 하나의 주요 요청은 탭 컨트롤을 추가해 달라는 것이었습니다. 언제나 그래왔듯이 당사는 다수의 요청에 귀를 기울여 이를 당사 로드맵에 추가하였고, 이제 군더더기 없는 깔끔한 TabPanel 컨트롤을 제공하게 되었습니다.

New TabPanel Control
새로운 TabPanel 컨트롤


TabPanel의 한 가지 장점은 스마트하다는 것, 즉 탭이 표시되면 Wijmo 컨트롤을 새로고침한다는 것입니다. 치수 계산 등을 위해 컨트롤이 활성화될 때 화면에 표시되어야 하므로 다른 탭 컨트롤에서는 사용자가 수동으로 컨트롤을 새로고침해야 합니다. 따라서 이 기능은 Wijmo 컨트롤(예: FlexGrid)이 포함된 당사 TabPanel을 사용하는 고객에게 유용합니다.

당사 자체 탭 컨트롤의 또 다른 장점은 모든 샘플에서 부트스트랩 탭을 제거하였고, 따라서 모든 샘플에서 jQuery도 완전히 제거되었다는 것입니다.

TabPanel 소개 샘플 | TabPanel 문서


OLAP의 Microsoft SSAS Cube 지원

Wijmo OLAP은 이제 Microsoft SSAS Cubes에 직접 연결할 수 있게 되어 훨씬 더 강력해졌습니다. 이전에는 Wijmo OLAP에서 클라이언트 측 집계 작업을 처리할 수 있었기 때문에 서버가 필요 없었습니다. 서버 측에서 집계하는 옵션이 있기는 했지만, 그러려면 사용자 정의 DataEngine을 설치해야 했습니다.

Wijmo OLAP connections
Wijmo OLAP 연결


이제 Wijmo OLAP에서 SSAS 큐브와 직접 통신할 수 있게 되었습니다. 이 기능은 기존 SSAS 큐브가 있고 이 큐브에 직접 바인딩된 PivotGrid(및 PivotChart)를 생성하고자 하는 사용자에게 크게 유용합니다.

이 기능을 사용하려면 SSAS 큐브에서 몇 가지를 구성하여 AJAX 요청을 통해 액세스할 수 있게 해야 합니다. Wijmo OLAP 및 SSAS 큐브 설정 방법에 관해서는 당사 블로그를 참조하십시오.

OLAP 서버 샘플 | OLAP PivotEngine 문서


ReportViewer의 ActiveReports 지원

Wijmo에는 이제 ActiveReports를 지원하는 최신 클라이언트 측 ReportViewer 컨트롤이 있습니다. Wijmo ReportViewer는 TypeScript에 컨트롤로 작성되어 있고 Angular, React, Vue 등에 대한 기본 지원이 함께 제공됩니다. 또한 모듈 로더와 함께 사용할 수 있도록 여러 가지 모듈 형식으로 제공됩니다. 이 첨단 ReportViewer는 첨단 보고서 엔진을 보완합니다.

ActiveReports support in ReportViewer
ReportViewer의 ActiveReports 지원

ReportViewer 샘플 | ActiveReports 소개


FlexSheet 표

당사는 고객사 중 한 곳과 긴밀히 협력하여 FlexSheet에 표 지원 기능을 추가하였습니다. FlexSheet에서 표는 Excel과 비슷한 역할을 합니다. 즉 다음과 같이 시트에서 셀 범위를 선택하고 이를 형식이 지정된 표로 변환할 수 있습니다.

FlexSheet tables
FlexSheet 표

FlexChart 소개 샘플


React 자식 컴포넌트 지원

당사는 복잡한 속성을 지닌 컨트롤에 자식 컴포넌트 지원을 추가하였습니다(예: FlexGrid 열 객체에 FlexGridColumn, 차트 계열 객체에 FlexChartSeries 추가). 이렇게 하면 컨트롤 선언 및 마크업 내 바인딩이 훨씬 더 강력해집니다.

다음은 마크업에 선언된 열이 있는 FlexGrid의 예시입니다.

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>

HTTPS CDN

향후 Wijmo의 모든 새 버전은 HTTPS를 지원하는 새로운 CDN에 게시됩니다. HTTPS는 거의 모든 웹 콘텐츠의 호스팅과 관련해 표준으로 자리를 잡아가고 있으므로 당사는 귀하께서 HTTPS에서 응용 프로그램을 호스팅하고 계속해서 Wijmo를 사용하실 수 있는지 확인하고자 하는 취지로 설명해 드렸습니다. 아울러 jsfiddle, codepen, jsbin 등의 사이트에서는 Wijmo 사용이 더 간편해집니다.

Wijmo CDN의 새 URL은 다음과 같습니다.

<!-- Wijmo 참조(필수) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.min.js"></script>
<link href="https://cdn.grapecity.com/wijmo/5.20181.450/styles/wijmo.min.css" rel="stylesheet"/>

<!-- Wijmo 컨트롤(선택 사항, 필요한 컨트롤을 포함하십시오.) -->
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.chart.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20181.450/controls/wijmo.gauge.min.js"></script>

또한 당사는 다음과 같이 공식 릴리스 때마다 업데이트되는 최신 버전을 호스팅합니다.

<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"/>

<!-- 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 참조 방법에 대해 자세히 알아보십시오.


접근성과 관련해 향상된 기능

당사는 접근성 개선에 전념하고 있으며, 이번 릴리스에서 이와 관련해 향상된 기능을 추가하였습니다. 당사가 접근성을 개선한 대상은 다음과 같습니다.

  • 계층 구조 FlexGrid(ARIA 트리 모눈 속성이 있음)
  • 자동 완성 및 ComboBox
  • FlexGridFilter 대화 상자

당사의 다음 번 목표는 FlexChart 접근성을 높이는 것입니다.


새로운 샘플


변경 로그

  • [라이선싱] npm을 비롯해 단일 빌드 배포를 가능케 하는 wijmo.setdistribution 키 메서드를 추가하였습니다. 배포 키가 설정되지 않으면 Wijmo는 체험판 모드로 실행됩니다(워터마크가 있음). 배포 키를 설정하면(당사 사이트에서 고객에게 키가 제공됨) Wijmo가 프로덕션 모드에서 실행됩니다(워터마크 없음).
  • [npm] Wijmo는 전역 npm 레지스트리에 ‘wijmo’ 패키지로 게시됩니다.
  • 릴리스 빌드 설치 방법
> npm install Wijmo             // 최신 버전
> npm install wijmo@5.20173.431 // 특정 버전
  • RC 빌드 설치 방법
> npm install wijmo@rc              // 최신 버전
> npm install wijmo@5.20181.432-rc  // 특정 버전

야간 빌드 설치 방법

> npm install wijmo@nightly                             // 최신 버전
> npm install wijmo@5.20173.431-nightly.d20180312.t0720 // 특정 버전(접미사는 빌드 날짜/시간을 나타냄)

  • 온라인 npm 패키지에서는 CommonJS 형식의 Wijmo 모듈을 제공합니다. 다른 모듈 형식은 전과 같이 Wijmo 다운로드 zip 파일의 NpmImages 폴더에 있습니다.
  • [npm] Wijmo npm 이미지에는 다음과 같이 css 스타일 및 문화 파일이 있습니다.
  • ‘스타일’ 하위 폴더의 wijmo.css입니다. 용례: import 'wijmo/style/wijmo.css';
  • ‘테마’ 하위 폴더의 테마 css입니다. 용례: import 'wijmo/themes/wijmo.theme.dark.css';
  • ‘문화’ 하위 폴더의 문화 js 파일입니다. 용례: import 'wijmo/cultures/wijmo.culture.ja';
  • [접근성] FlexGrid, FlexGridFilter 및 ComboBox 컴포넌트에 대한 ARIA 지원을 개선했습니다.
  • [Olap] PivotEngine 컴포넌트를 SSAS 큐브에 직접 바인딩하는 작업에 대한 지원을 추가하였습니다. 이전에는 SSAS 큐브에 바인딩하려면 서버를 설정해야 했고, 큐브를 노출한 ComponentOne 데이터 엔진 서비스가 필요했습니다. 이제는 PivotEngine을 SSAS 큐브에 직접 바인딩할 수 있습니다. OLAP SSAS 큐브 샘플

예:

var ng = new wijmo.olap.PivotEngine({
    itemsSource: {
        url: 'http://ssrs.componentone.com/OLAP/msmdpump.dll',
        cube: 'Adventure Works'
    }

  • [ReportViewer] GrapeCity ActiveReports 보고서 생성 프로그램에 대한 지원을 추가하였습니다. 새로운 기능을 구현하기 위해 PureJS ReportViewer 샘플을 업데이트하였습니다. ActiveReport ReportViewer 샘플
  • 탭 탐색 기능을 제공하는 wijmo.nav.TabPanel 컨트롤을 추가하였습니다. 이 새 컨트롤을 사용하여 부트스트랩 탭을 교체할 수 있습니다. 이때 bootstrap.js 및 jQuery가 필요합니다. TabPanelIntro 샘플
  • [React] 자식 구성 요소 지원을 추가하였습니다.
  • [React] 일부 컨트롤 속성을 위해 복잡한 객체를 대표하는 하위 컴포넌트에 대한 지원을 추가하였습니다(예: FlexGrid 열 객체에 FlexGridColumn, 차트 계열 객체에 FlexChartSeries 추가).
  • 따라서 이제부터 정적 열 정의는 다음과 같습니다.
<Wj.FlexGrid autoGenerateColumns={ false }
    columns={[
        { header 'Country' , binding 'country' , width '*' },
        { header 'Date' , binding 'date' },
        { header 'Revenue' , binding 'amount' , format 'n0' },
        { header 'Active' , binding 'active' }
    ]}
    itemsSource={ this.state.data } />

...다음과 같은 동적 정의를 사용할 수 있습니다.

<Wj.FlexGrid itemsSource={this.state.data}>
    <Wj.FlexGridColumn header={this.state.countryHeader} binding="country" width="*" />
    <Wj.FlexGridColumn header="Date" binding="date" />
    <Wj.FlexGridColumn header="Revenue" binding="amount" format="n0" />
<Wj.FlexGridColumn header="Active" binding="active" />
</Wj.FlexGrid>
  • 이러한 개선을 통해 배열 속성 항목을 동적으로 업데이트할 수 있습니다. 다음과 같이 ‘렌더링’ 코드가 있는 일련의 그리드 열을 예로 들 수 있습니다.
<Wj.FlexGrid itemsSource={this.state.data}>
    {this.state.columnsDefinitions.map((colDef) => {
        return <Wj.FlexGridColumn key={colDef.binding} binding={colDef.binding} />
    }
    )}
</Wj.FlexGrid>

  • [olap.PivotPanel] 큐브 데이터가 아닌 원본에서 계층적 필드 구조에 대한 지원을 추가하였습니다.
  • [Excel] FlexSheet 컨트롤 및 wijmo.xlsx 모듈에서 표에 대한 지원을 추가하였습니다. 새로운 기능을 구현하기 위해 ExcelBook/FlexSheetIntro/FlexSheetExplorer 샘플을 업데이트하였습니다.
  • [FlexSheet] _filter를 비공개가 아닌 공개로 표시
  • [FlexGrid] 셀에서 여러 줄 문자를 지원하는 Column.multiLine(및 Row.multiLine) 기능을 추가하였습니다. multiLine을 true로 설정하면 셀에서 셀 내용을 렌더링할 때, 포함된 선 전환 문자(\n)를 준수하게 됩니다. 사용자는 Excel에서처럼 alt+Enter를 눌러 선 전환 문자를 입력할 수 있습니다.
  • [FlexGrid] Column.textAlign = 'justify-all'에 대한 지원을 추가하였습니다. 이 새로운 설정에서는 CSS 속성인 textAlignLas와 textJustify를 명시적으로 설정합니다. 이는 중국어, 일본어와 같은 표의 기반 문자에 중요합니다.
  • [Globalize] 날짜 형식의 이스케이프 문자( 예:
    wijmo.Globalize.format(date, '\\h h \\m m'); // h 3 m 55
  • 기호화된 링크 모듈 설치를 지원하기 위해 모든 Angular 및 React npm 모듈 기반 샘플의 구성을 업데이트하였습니다.
  • 사용자가 컨트롤 가장자리에서 가까운 행 또는 열을 드래그할 때 그리드에서 그 내용을 자동으로 스크롤할지 여부를 결정할 수 있는 FlexGrid.autoScroll 속성을 추가하였습니다.