Wijmo의 2017년 첫 번째 주요 릴리스가 출시되었습니다. 이 릴리스에서는 새로운 JavaScript TreeView 컨트롤, 놀랍도록 우수한 새로운 다중 자동 완성 기능, 모바일 JavaScript 리포트 뷰어, OLAP 서버 지원 등 완전히 새로운 컨트롤과 개발을 지원합니다.


TreeView 컨트롤

확인란, 아이콘, 끌어서 놓기, 지연 로드, 노드 편집 등을 포함하는 새로운 Wijmo TreeView에 계층 구조 목록을 표시합니다. TreeView는 새 wijmo.nav 모듈의 일부입니다.


새로운 TreeView 컨트롤

TreeView 소개 샘플


MultiAutoComplete 컨트롤

이름에서 알 수 있듯이 MultiAutoComplete는 다양한 선택 옵션을 자동 완성 기능과 결합해주는 고유한 컨트롤입니다. 이 유형의 컨트롤은 블로그의 "태그" 등과 같은 집계 목록에서 주로 사용됩니다. MultiAutoComplete를 입력 모듈에 추가했습니다.


새로운 Multi-AutoComplete 컨트롤

입력 소개 샘플 | MultiAutoComplete 샘플


서버 측 OLAP

Wijmo의 피벗 컨트롤은 클라이언트에서 데이터 집합을 분석하기 위해 작성되었습니다. 클라이언트 측 OLAP 엔진에서는 상대적으로 많은 양의 데이터(수십만 개 레코드를 순서대로)를 처리할 수 있지만, 원시 데이터를 클라이언트에 다운로드해야 하므로 매우 큰 데이터 집합(수백만 개 레코드)은 분석할 수 없습니다.

이 릴리스에서는 OLAP 컨트롤에 대한 서버 측 지원을 추가했습니다. 이제 클라이언트에서 배열을 분석하는 대신 서버에서 웹 API를 쿼리하도록 OLAP 컨트롤에 지시하는 URL을 itemSource 속성에서 사용할 수 있습니다. 서버 측 엔진ASP.NET MVC 제품 라인의 일부이며 별도로 설치하고 라이선스를 받아야 합니다. OLAP 컨트롤에 대한 서버 측 구성 요소와 클라이언트 측 구성 요소를 모두 사용할 수 있는 Ultimate를 구매하는 것이 좋습니다.

OLAP 서버 소개 샘플


FlexChart의 그라데이션 지원

이제 FlexChart에서 그림 요소에 그라데이션 색 적용을 지원합니다. 그라데이션은 방사형 또는 선형이며 다양한 색과 불투명도를 지원합니다. 새로운 그라데이션 지원을 사용하여 차트에 몇 가지 스타일을 추가해 보십시오.


그라데이션을 지원하는 Wijmo FlexChart

FlexChart 소개 샘플


ReportViewer에 대한 모바일 지원

ReportViewer에 대한 모바일 지원을 출시했습니다. 이제 ReportViewer 컨트롤이 응답형 디자인을 지원하여 모바일 장치의 화면 크기에 맞게 조정됩니다.


모바일 JavaScript 리포트 뷰어

ReportViewerIntro 샘플 | ReportViewer 자습서


Angular 2의 구성 요소 상속 개선

Angular Ahead-of-Time 컴파일러 지원을 추가하고 @WjComponent 데코레이터(decorator)를 제거한 후 Wijmo 구성 요소에서 상속하여 사용자 지정 구성 요소를 만드는 것이 어려워졌습니다. 이번 릴리스에서는 파생된 Wijmo 구성 요소 만들기 및 유지 관리를 간소화하는 다음의 두 가지 방법을 추가하여 이 문제를 해결했습니다.

  • Wijmo @Component 메타데이터를 저장하는 특수 변수.
  • 모든 Wijmo 구성 요소의 생성자에서 호출되며 구성 요소 생성자를 선언하고 매개 변수 목록을 관리할 필요 없이 재정의를 통해 구성 요소의 기본값을 정의하거나 다시 정의할 수 있는 특수 ‘created’ 메서드.

모든 Wijmo 구성 요소/지시문은 이제 구성 요소의 모듈에서 @Component/@Directive 데코레이터(decorator) 속성을 나타내는 해당 변수를 내보냅니다. 변수의 이름은

<camel-case component class name> Meta 형식으로 구성됩니다. 예를 들어, wjInputNumberMeta 변수는 WjInputNumber 구성 요소의 메타데이터를 나타냅니다. 이러한 변수는 Wijmo 구성 요소에서 파생되는 사용자 지정 구성 요소를 만들 때 유용합니다. 이 경우 기본 클래스 @Component 데코레이터(decorator) 속성의 대부분을 복제해야 하는 @Component 데코레이터(decorator)를 제공해야 합니다.

또한 사용자 지정 구성 요소의 생성자를 선언하지 않는 옵션이 있습니다. 이 옵션은 기본 Wijmo 구성 요소의 생성자 매개 변수를 동기화하므로 매개 변수를 정의하여 유지 관리할 필요가 없습니다. 대신 “created” 메서드를 재정의하고 클래스 생성자에서 일반적으로 수행하는 필수 초기화를 여기서 수행할 수 있습니다.

다음은 WjFlexGrid 구성 요소에서 상속하고 ‘myProperty’ 속성과 해당 ‘myPropertyChange’ 이벤트를 추가하는 MyGrid 구성 요소의 예입니다.


import { WjFlexGrid, wjFlexGridMeta } from 'wijmo/wijmo.angular2.grid';
        @Component({
            selector: 'my-grid',
            template: wjFlexGridMeta.template,
            inputs: [...wjFlexGridMeta.inputs, 'myProperty'],
            outputs: [...wjFlexGridMeta.outputs, 'myPropertyChange'],
            providers: [
                { provide: 'WjComponent', useExisting: forwardRef(() => MyGrid) },
                ...wjFlexGridMeta.providers
            ]
        })
        export class MyGrid extends WjFlexGrid {
            private _myProperty: string;
            myPropertyChange = new EventEmitter(false);
            constructor( @Inject(ElementRef) elRef: ElementRef,
                @Inject(Injector) injector: Injector,
                @Inject('WjComponent') @SkipSelf() @Optional() parentCmp: any,
                @Inject(ChangeDetectorRef) cdRef: ChangeDetectorRef) {
                super(elRef, injector, parentCmp, cdRef);
            }
            get myProperty(): string {
                return this._myProperty;
            }
            set myProperty(value: string) {
                if (this._myProperty !== value) {
                    this._myProperty = value;
                    this.myPropertyChange.emit(value);
                }
            }
        }

FlexGrid FilterPanel

최근에 고객과 협력하여 필터를 쉽게 처리할 수 있는 이 새로운 기능을 만들었습니다.


필터링을 지원하는 Wijmo FlexGrid

FilterPanel 샘플


ServerCollectionView

ServerCollectionView는 고객 요청을 바탕으로 만든 또 다른 샘플입니다. 이전에 ODataCollectionView를 만들었지만, 임의 서버 측 API에 바인딩하는 방법을 문의하는 고객이 많습니다. ServerCollectionView에서는 해당 방법 외에도 원하는 대로 사용자 지정하는 방법을 보여 줍니다.


서버 컬렉션 뷰

ServerCollectionView 샘플


FlexGrid 재무 샘플

또한 FlexGrid에서 FTSE 100대 기업에 대해 시뮬레이션된 주식 호가 라이브 데이터 피드를 보여주는 새로운 재무 샘플을 추가했습니다. 이 샘플에서는 거래 배치를 지정된 간격으로 시뮬레이션하고 변경된 셀만 변경하여 그리드에서 정보를 업데이트합니다.


재무 샘플

FlexGrid 재무 샘플


주기율표 선버스트

주기율표 테이블을 선버스트 차트로 전환하는 재미있는 샘플입니다.

PeriodicSunburst 샘플 | Wijmo의 선버스트 블로그를 통해 주기율표 재고


새로운 샘플

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


혁신적인 변경 사항

  • [Angular1/Angular2] WjMultiSelect 지시문/구성 요소에 지정된 ngModel 지시문이 이제 ‘selectedValue’ 속성 대신 ‘checkedItems’ 속성에 매핑됩니다. ‘selectedValue’ 속성에 대해 이전에 사용된 매핑은 실질적인 의미가 없으므로 이렇게 변경해도 코드가 손상되지 않습니다.
  • Angular 2 WjFlexGrid 구성 요소 – 다음 생성자 매개 변수가 추가되었습니다. @Inject(ChangeDetectorRef) cdRef: ChangeDetectorRef 이 변경은 WjFlexGrid에서 파생된 사용자 지정 구성 요소를 사용할 경우 코드에 영향을 줄 수 있습니다. 이 경우 이러한 구성 요소에 이 마지막 생성자 매개 변수를 추가해야 합니다.

변경 로그

  • TreeView 컨트롤과 wijmo.nav 모듈을 추가했습니다. 자세한 내용은 TreeViewIntro 샘플을 참조하십시오. TreeView 소개
  • wijmo.input 모듈에 새 MultiAutoComplete 컨트롤을 추가했습니다. MultiAutoComplete 샘플
  • 차트 컨트롤에 그라데이션 색 지원을 추가했습니다. 자세한 내용은 FlexChartIntro 샘플을 참조하십시오. FlexChart 소개
  • wijmo.olap에 대한 서버 측 지원을 추가했습니다. 서버 측 데이터 공급자를 사용하려면 itemsSource 속성을 WebAPI 서비스를 가리키는 URL 문자열로 설정합니다.
  • reportviewer 컨트롤에 모바일 지원을 추가합니다. 모바일 또는 PC UI 템플릿을 전환하는 thresholdWidth 속성을 추가했습니다. 컨트롤의 너비가 thresholdWidth보다 작은 경우 모바일 UI가 적용됩니다. 컨트롤의 너비가 thresholdWidth보다 크거나 같은 경우 PC 템플릿이 적용됩니다. thresholdWidth를 0으로 설정한 경우 PC 템플릿만 적용되고, 9999 등과 같은 큰 숫자로 설정한 경우 모바일 템플릿만 적용됩니다.
  • [Angular2] Wijmo 구성 요소의 상속 환경을 개선했습니다. 모든 Wijmo 구성 요소/지시문은 이제 구성 요소의 모듈에서 @Component/@Directive 데코레이터(decorator) 속성을 나타내는 해당 변수를 내보냅니다.
  • [Angular2] CustomizedComponents 샘플을 복원했습니다.
  • [Angular2] IWjComponentMeta 및 IWjDirectiveMeta 인터페이스(각각 구성 요소 및 지시문용)를 사용하여 구성 요소 메타데이터 변수를 입력했습니다.
  • [Angular 2] 이제 모든 Wijmo 구성 요소 생성자는 특수 ‘created’ 메서드를 호출합니다. Wijmo 구성 요소에서 상속되는 사용자 지정 구성 요소를 만들고 생성자를 선언하는 대신 생성자에서 일부 초기화를 수행해야 하는 경우 ‘created’ 메서드만 재정의하여 초기화를 수행할 수 있습니다. 그러면 생성자 매개 변수를 유지 관리하고 기본 Wijmo 구성 요소의 매개 변수와 동기화할 필요가 없습니다. Angular에서 구성 요소 상속을 처리하는 방법에 대한 자세한 내용은 다음을 참조하십시오. https://github.com/angular/angular/commit/f5c8e09
  • [Angular 2] 샘플이 Angular 2.4로 이동되었습니다.
  • wijmo.format 메서드에 복수형 기능을 추가했습니다. 자세한 내용과 예제는 http://wijmo.com/5/docs/topic/wijmo.Module.html#formatThe를 참조하십시오.
  • 놓기 대상을 제어할 수 있도록(예: 사용자가 특정 열을 특정 위치로 이동하지 못하도록 함) FlexGrid draggingColumnOver 및 draggingRowOver 이벤트를 추가했습니다.
  • 긴 값 목록을 표시할 때 FlexGridFilter 성능이 향상되었습니다.
  • 더 이상 사용되지 않는 ‘disabled’ 및 ‘required’ 속성을 제거했습니다. 마크업에서 표준 HTML 특성과의 충돌을 방지하기 위해 빌드 5.20162.192에서 이러한 속성을 ‘isDisabled’ 및 ‘isRequired’로 대체했습니다.