Wijmo 2017 V1發布 - C1SupportTeam－IT工程師數位筆記本

文章出處

2017年Wijmo的第1個Release已經發布了！它充滿了令人興奮的新控件和新功能。一個新的TreeView控件；一個只有看到你才會相信的MultiAutoComplete控件；移動平臺報表查看器；以及支持服務端的OLAP。

TreeView控件

在Wijmo的新TreeView中顯示分層列表，其功能包括復選框，圖標，拖放，延遲加載，節點編輯等。TreeView是一個新的wijmo.nav模塊的一部分。

TreeView控件

TreeView示例

MultiAutoComplete控件

MultiAutoComplete是一個獨特的控件，它將多重選擇與自動完成混合在一起，從而命名。這種類型的控件通常用于例如博客中的“標簽”等聚合列表。我們在輸入模塊中添加了MultiAutoComplete。

MultiAutoComplete控件

MultiAutoComplete示例

服務端OLAP

使用Wijmo的Pivot控件，用于分析客戶端的數據集。我們的客戶端OLAP引擎可以處理相對大量的數據（大約數十萬條記錄），但是它需要將原始數據下載到客戶端，這使得分析真正的大型數據集（數百萬記錄）變得不切實際。

在此版本中，我們已向我們的OLAP控件添加了服務器端支持。現在，您可以使用itemSource屬性中的URL來指示OLAP控件在服務器上查詢Web API，而不是在客戶端進行分析的數組。服務器端引擎是我們的ASP.NET MVC產品系列的一部分，必須單獨安裝和授權。我們建議您購買Ultimate，以便為我們的OLAP控件提供服務器和客戶端組件。

服務端OLAP示例

FlexChart支持漸變色

FlexChart現在支持應用漸變顏色來繪制元素。漸變可以是徑向或線性，支持多種顏色以及不透明度。使用我們的新漸變支持，向您的圖表添加一些樣式。

有漸變色的Wijmo FlexChart

FlexChart示例

ReportViewer支持移動端

我們也很高興為ReportViewer發布移動支持。我們的ReportViewer控件現在具有響應式設計，并將自適應不同屏幕尺寸的移動設備。

移動端Report Viewer

ReportViewer示例 | ReportViewer教程

改善Angular2中組件的繼承

增加了對Angular的靜態提前編譯器（Ahead-of-Time compiler）的支持和刪除@WjComponent裝飾器的支持后，通過從Wijmo組件繼承自定義組件來創建自定義組件成為一個挑戰。我們通過添加兩個方法來簡化創建和維護派生自Wijmo的組件，從而解決了這個問題：

存儲Wijmo @Component元數據的特殊變量。
特殊的“created”方法，從每個Wijmo組件的構造函數調用，可以重寫以定義或重新定義組件的默認值，而不是聲明組件構造。

每個Wijmo組件/指令現在有一個相應的變量從組件的模塊導出，表示為@ Component / @Directive裝飾器屬性。變量的名稱被構造為<駝峰式的組件類名>Meta。例如，wjInputNumberMeta變量表示WjInputNumber組件的元數據。這樣的變量在創建從Wijmo組件派生的自定義組件時非常有用，您必須提供一個@Component裝飾器，其屬性應該復制基類@Component裝飾器的大部分屬性。

您還可以選擇不聲明自定義組件的構造函數，因此無需定義和維護其參數，而與基本Wijmo組件的構造函數參數同步。相反，您可以覆寫“created”方法，并在此處執行通常在類構造函數中執行的必要初始化。

下面是一個從WjFlexGrid組件繼承的MyGrid組件的示例，并添加了“myProperty”屬性和相應的“myPropertyChange”事件：

        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);
                }
            }
        }