2016년 Wijmo의 세 번째 주요 릴리스를 발표합니다.


Interop의 향상된 기능

Wijmo에서 Interop을 계속 확장하여 이제 Angular 2, ReactJS 및 VueJS가 포함됩니다.


모듈 지원

Wijmo는 원래 단일 모듈로 디자인되었습니다. 모든 항목은 wijmo 네임스페이스에 저장되었습니다. Wijmo는 이제 여러 가지 다른 모듈 특성을 포함하므로 다양한 모듈 로더에 쉽게 사용할 수 있습니다. Wijmo를 다운로드하면 Wijmo 스크립트를 AMD 모듈, CommonJS 모듈 및 SystemJS 모듈로 가져올 수 있습니다. 이러한 모듈을 통해 WebPack, AngularCLI 등에서 간편하게 wijmo를 사용할 수 있습니다.

Wijmo는 또한 이러한 각 모듈 형식의 NPM 이미지도 포함하고 있습니다. 따라서 디스크의 로컬 NPM 이미지에서 "npm install"을 실행할 수 있습니다. 언젠가는 공개 NPM 레지스트리도 지원하기를 기대합니다.

자세히 알아보기: Wijmo 컨트롤을 모듈 로더 및 번들러와 통합


Angular 2 지원

Wijmo는 Angular 2를 지원할 뿐 아니라, 다양한 JavaScript 프레임워크를 위한 Interop 라이브러리도 갖추고 있습니다. Angular 2 지원 또는 Angular 2를 위한 최상의 데이터 그리드인 FlexGrid에 대해 자세히 알아보십시오.


ReactJS 지원

Wijmo는 모든 프레임워크에서 Interop 전용으로 사용됩니다. 이 릴리스에서는 ReactJS가 공식 지원되며, 모든 ReactJS 응용 프로그램에서 Wijmo 컨트롤을 React 컴포넌트로 사용할 수 있습니다.

ReactJS Interop 샘플 | React 앱에서 Wijmo를 사용하는 방법 블로그 | ReactJS DyanmicDashboard 샘플 | ReactJS에서 동적 대시보드 만들기 블로그


VueJS 지원

VueJS는 주목을 받고 있는 또 다른 프레임워크입니다. 많은 고객이 Wijmo에서의 VueJS 지원을 요구했습니다. 이 릴리스에서는 VueJS 1.x 및 2.x를 공식 지원합니다. 모든 VueJS 응용 프로그램에서 Wijmo 컨트롤을 Vue 컴포넌트로 사용할 수 있습니다.

VueJS Interop 샘플 | Wijmo 컨트롤을 사용하여 훌륭한 VueJS 응용 프로그램을 만드는 방법 블로그


ReportViewer

이 릴리스에는 Wijmo Enterprise에 포함되어 있는 새로운 wijmo.viewer 모듈에 ReportViewer 컨트롤이 포함되어 있습니다. ReportViewer는 FlexReport 서버의 리포트를 표시하는 데 사용됩니다. FlexReport는 SSRS 리포트를 렌더링할 수 있을 뿐 아니라 Crystal Reports 및 C1Reports를 마이그레이션할 수 있는 .NET 리포팅 솔루션입니다. ReportViewer는 문서를 렌더링하고 HTML5/JavaScript 응용 프로그램에 표시하기 위한 특정 형식으로 문서를 다시 전송하는 웹 API를 호출합니다.

Wijmo ReportViewer에는 섬네일 표시, 스크롤링 또는 페이징 리포트, 확대/축소, 인쇄, 내보내기 등 다양한 기능이 있습니다. 무엇보다 ReportViewer는 모바일 장치에 리포트를 렌더링할 수 있습니다.

ReportViewer를 사용하려면 GrapeCity의 Ultimate 제품군 에 포함되어 있는 FlexReport가 필요합니다. Ultimate를 구입하면 모든 Wijmo 컨트롤은 물론 FlexReport 등 다양한 기능에 액세스할 수 있습니다.

wijmo_01_reportviewer

ReportViewerIntro 샘플 | ReportViewer 자습서


PDFViewer(베타)

새로운 ReportViewer 컨트롤과 마찬가지로 새로운 PdfViewer 컨트롤이 베타 버전으로 제공됩니다. 이 컨트롤은 Wijmo Enterprise에 포함되어 있는 wijmo.viewer 모듈에도 들어 있습니다. PdfViewer 컨트롤은 C1 Web API PDF Services(.NET)를 사용하여 서버에 렌더링되는 PDF 파일을 표시합니다.

PdfViewer를 사용하려면 GrapeCity의 Ultimate 제품군에 포함되어 있는 C1 Web API PDF Services가 필요합니다. Ultimate를 구입하면 모든 Wijmo 컨트롤은 물론 PDF Services 등 다양한 기능에 액세스할 수 있습니다.

 

wijmo_02_pdfviewer

PdfViewerIntro 샘플(베타)


FlexGrid 유효성 검사

FlexGrid를 포함하여 데이터 컬렉션을 지원하는 모든 Wijmo 컨트롤에 사용할 수 있는 데이터 유효성 검사 기능이 CollectionView클래스에 추가되었습니다.

유효성 검사 지원을 CollectionView에 추가하려면, 데이터 항목 및 속성 이름을 매개 변수로 취하고 오류 설명과 함께 문자열을 반환(또는 오류가 없는 경우에는 null)하는 콜백 함수로 새로운 getError 속성을 설정하십시오.

wijmo_03_olapshowas

유효성 검사 샘플 | FlexGrid의 데이터 유효성 검사 블로그


OLAP ShowAs

GrapeCity는 고객의 요청에 따라 OLAP PivotPanel의 showAs 필드 설정에 더 많은 옵션을 추가했습니다.

wijmo.olap.PivotField.ShowAs 열거에 5개의 새로운 설정, 즉, PctGrand, PctCol, PctRow, RunTot 및 RunTotPct가 추가되었습니다. 이러한 새로운 설정은 Excel에서 사용 가능한 유사한 설정과 호환됩니다. OlapShowAs 샘플에서 새로운 기능을 살펴보십시오.

wijmo_03_olapshowas


FlexGrid 바닥글

FlexGrid에 열 바닥글에 대한 지원이 추가되었습니다. FlexGrid에서 새로운 columnFooter를 사용하여 열에 쉽게 사용자 지정 바닥글을 추가할 수 있습니다.FlexGrid 사용자 지정 바닥글 샘플에서 이 새로운 기능을 살펴보십시오.
wijmo_04_flexgridfooters


새로운 차트 유형

상자 수염 차트를 만들 수 있는 상자 그림 차트 유형이 새롭게 추가되었습니다. 이는 wijmo.analytics 모듈에 포함되어 계열로 구현되었습니다. FlexChartAnalytics 샘플에서 새로운 상자 그림 차트 유형을 살펴보십시오.

wijmo_05_flexchartanalytics

이 릴리스에는 방사형 유형 차트를 만드는 데 사용할 수 있는 새로운 FlexRadar 차트 컨트롤이 포함되어 있습니다. 새로운 FlexRadar 소개 샘플을 살펴보십시오.

FlexChart에는 깔때기형 차트 유형도 추가되었습니다. FlexChart 소개 샘플에서 새로운 깔때기형 차트 유형을 살펴보십시오.

wijmo_07_funnel


새로운 도움말 시스템

마지막으로 온라인 문서가 완전히 다시 작성되고 디자인되었습니다. 새로운 디자인에는 향상된 콘텐츠, 레이아웃, 탐색, 검색 등 다양한 기능이 포함되었습니다.
새로운 온라인 문서를 살펴보십시오.

wijmo_08_help


새로운 샘플

SampleExplorer를 사용하여 샘플을 위한 소스 코드를 검색하고 프레임워크별로 필터링하고 찾아볼 수 있습니다.


혁신적인 변경 사항

  • cellEditEnding 이벤트의 인수가 CellRangeEventArgs에서 CellEditEndingEventArgs로 변경되어 CellRangeEventArgs가 ‘stayInEditMode’ 멤버로 확장되었습니다. onCellEditEnding 이벤트 발동기를 호출하는 모든 코드는 다음과 같이 업데이트해야 합니다.
// raise grid's cellEditEnding event
//var e = new wijmo.grid.CellRangeEventArgs(grid.cells, this._rng);
var e = new wijmo.grid.CellEditEndingEventArgs(grid.cells, this._rng);
grid.onCellEditEnding(e);
  • FlexSheet: .wj-header-row 글꼴 및 배경색이 변경되었습니다. 이전 스타일을 가져오려면 값을 background-color로 재설정하십시오. #4800ff !important; color: #ff6a00 !important;

변경 로그

"dependencies": {
"wijmo": "http://prerelease.componentone.com/wijmo5/npm-images/C1Wijmo-Enterprise-Eval-AMD-5.20162.222.tgz",
... another libraries
}

이와 같은 변화로 인해 package.json의 올바른 Wijmo 참조 없이도 Wijmo Enterprise Evaluation 빌드의 샘플을 새로운 위치로 자유롭게 이동할 수 있습니다.

  • Wijmo 핵심 모듈의 외부 모듈 버전이 추가되었습니다. Wijmo 다운로드 zip에는 이제 wijmo-amd, wijmo-commonjs 및 wijmo-system 하위 폴더에 AMD, CommonJS 및 System 형식의 Wijmo 모듈이 각각 포함되어 있는 NpmImages 폴더가 들어 있습니다. 이러한 각 폴더는 사실상 npm install [폴더 경로] 명령을 사용하여 설치할 수 있는 NPM 이미지입니다. 또는 해당 레코드를 응용 프로그램의 package.json 파일에 추가할 수 있습니다. 그러면 응용 프로그램의 루트 폴더에서 "npm install" 명령을 실행할 경우 로컬 폴더에서 응용 프로그램의 node_modules/wijmo 폴더로 Wijmo가 설치되게 됩니다. 예를 들어 다음과 같이 할 수 있습니다.
"dependencies": {
"wijmo": "../../../../../NpmImages/wijmo-amd",
... other libraries
}

현재는 이러한 폴더에서 Wijmo 핵심 및 Angular 2 interop 모듈만 외부 모듈로 표시되며, 나머지 interop은 기존의 글로벌 모듈로 제공됩니다. 컬처 파일(wijmo.culture.[culture_code])도 글로벌 모듈이므로, 글로벌 모듈에 사용되는 것과 동일한 방식으로 Wijmo 외부 모듈과 함께 사용되어야 합니다. 이를 위해 해당 파일을 <script> 태그를 사용하여 HTML 페이지에 추가하거나, 동적 시나리오에서는 XMLHttpRequest를 사용하여 로드합니다.

Angular 2 interop 모듈과 관련된 한 가지 중요한 사항: 이 모듈은 처음부터 외부 모듈로 제공되며 글로벌 ‘wijmo’ 변수(예: wijmo.grid.FlexGrid)를 통해 Wijmo 핵심 모듈을 참조했습니다. NpmImages 폴더 아래의 Angular 2 interop 모듈은 다릅니다. 이 모듈은 TypeScript "import" 문(현재 모듈 형식에 따라 적절한 JavaScript 코드로 트랜스파일됨)을 사용하여 Wijmo 핵심 외부 모듈을 참조합니다. 예를 들어 다음과 같이 할 수 있습니다.

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

모듈 이름은 Angular 2 interop 모듈과 동일한 규칙을 따릅니다. 즉, ‘wijmo/’ 접두사와 모듈 이름이 차례로 옵니다(예: ‘wijmo/wijmo’, ‘wijmo/wijmo.input’, ‘wijmo/wijmo.grid’). Wijmo Angular 2 샘플은 Wijmo 핵심 모듈의 외부 버전을 사용하도록 수정되었습니다. 해당 package.json 파일에는 NpmImages/wijmo-amd 폴더에 대한 참조(위의 예에 표시됨)가 포함되어 있습니다. 이러한 참조는 "npm install" 명령 실행 시 모든 필요한 Wijmo 코드가 node_modules/wijmo 폴더에 자동 설치되도록 합니다.

이 정의는 Wijmo zip 이미지의 원래 위치에서 사용할 경우에만 적용됩니다. 샘플을 새로운 위치로 이동하면 샘플의 package.json에서 이 위치를 수정해야 합니다. 나머지 샘플에서는 계속 기존 글로벌 모듈을 사용합니다. Wijmo 컨트롤을 모듈 로더 및 번들러와 통합

  • 다음 두 컨트롤을 포함하는 새로운 wijmo.viewer 모듈이 추가되었습니다.
    • ReportViewer: 서버 측에서 생성한 FlexReport 및 SSRS 리포트를 표시합니다.
    • PdfViewer: 서버 측 서비스를 사용하여 PDF 파일을 표시합니다.
  • 값이 중복으로 표시되는 필터링된 DataMaps에 대한 지원이 향상되었습니다.
  • FlexGrid.columnFooters 패널을 PDF로 내보내는 기능이 추가되었습니다(TFS 208282).
  • FlexSheet에 대한 ‘showFilterIcons’ 속성이 추가되었습니다. 사용자는 FlexSheet의 열 머리글에서 이 속성을 사용하여 필터 아이콘을 표시하거나 숨길 수 있습니다. (TFS 214354)
  • Excel로 내보내는 중에 FlexGrid의 열을 건너뛰는 기능이 추가되었습니다. (TFS 195426)
  • xlsx 파일을 저장/로드하기 위한 줄 바꿈 지원이 추가되었습니다. (TFS 205565)
  • 새로운 글리프("pencil" 및 "asterisk")이 FlexGrid 행에서 편집 모드/새로운 템플릿을 나타내기 위해 문자 기반 연필 및 별 모양 아이콘으로 교체되었습니다. 이를 통해 CSS를 사용하여 아이콘을 숨기거나 사용자 지정할 수 있습니다.
  • 이미 사용할 수 있는 rowEditEnding/Ended 이벤트를 보완하는 FlexGrid.rowEditStartingStarted 이벤트가 추가되었습니다. 또한 편집을 취소할 경우 rowEditEnding/Ended 이벤트를 발생시킬 수 있게 되었습니다. 이러한 변경으로 인해 편집 모드 표시기 및 심층 바인딩 편집 실행 취소 등 사용자 지정 동작을 보다 쉽게 구현할 수 있습니다.
  • 그리드가 편집 모드로 전환되게 하는 이벤트로 “data” 이벤트 매개 변수를 설정하도록 FlexGrid.beginningEdit 이벤트 매개 변수가 향상되었습니다(키보드나 마우스 이벤트의 경우 또는 startEditing 이벤트 호출에 의해 편집이 시작된 경우에는 null).
  • null 값을 포함하는 필드를 처리하는 FlexGrid 열 자동 생성이 향상되었습니다
  • Vue2 interop가 추가되었습니다(wijmo.vue2.js). https://vuejs.org/2016/04/27/announcing-2.0/
  • wijmo.olap 컨트롤에 대한 지원이 Vue/React interop에 추가되었습니다.
  • OlapIntro 샘플의 Vue/React 버전이 추가되었습니다.