Wijmo FlexGridは、Angular 2アプリケーションで使用できるHTML5ベースのグリッドコントロールです。

このビデオ(英語)では、以下について説明します。

  1. Visual Studio 2015を構成する方法
  2. npmを使用してAngular 2と付属ライブラリを取得する方法
  3. 開発のためのプロジェクト構造を設定する方法
  4. Angular 2コンポーネントをビルドする方法
  5. サービスを使用して汎用データに連結されたWijmo FlexGridを表示する方法

Wijmoをまだダウンロードしていない場合は、トライアル版を入手してください。

コードスニペット

app.ts

///
import { Component, View, EventEmitter, provide, Input, Inject, enableProdMode } from ‘angular2/core’;
import { CORE_DIRECTIVES } from ‘angular2/common’;
import { bootstrap } from ‘angular2/platform/browser’;
import * as wjNg2FlexGrid from ‘wijmo/wijmo.angular2.grid’;
import { DataSvc } from ‘./DataSvc’;
@Component({
selector: ‘app-cmp’,
templateUrl: ‘src/app.html’,
directives: [CORE_DIRECTIVES, wjNg2FlexGrid.WjFlexGrid, wjNg2FlexGrid.WjFlexGridColumn]
})
export class AppCmp {
protected dataSvc: DataSvc;
data: wijmo.collections.CollectionView;
constructor( @Inject(DataSvc) dataSvc: DataSvc) {
this.dataSvc = dataSvc;
this.data = new wijmo.collections.CollectionView(this.dataSvc.getData(100));
}
}
bootstrap(AppCmp, [DataSvc]);

app.html


<h2>Wijmo FlexGrid Control</h2>
 

DataSvc.ts

’use strict’;
import { Injectable } from ‘angular2/core’;
// 共通データサービス
@Injectable()
export class DataSvc {
// ランダム項目の生成に使用するデータ
getData(count: number): wijmo.collections.ObservableArray {
var countries = ‘US,Germany,UK,Japan,Italy,Greece’.split(‘,’),
data = new wijmo.collections.ObservableArray();
for (var i = 0; i < count; i++) {
data.push({
id: i,
country: countries<em class="bbcode-em"></em>,
date: new Date(2014, i % 12, i % 28),
amount: Math.random() * 10000,
active: i % 4 == 0
});
}
return data;
}
}

default.html内のスクリプト参照

<script src=”https://code.jquery.com/jquery-2.0.0.min.js” type=”text/javascript”></script>
<script src=”https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js” type=”text/javascript”></script>
<!– シム、ポリフィル、Angular 2 –>
<!– IEには、正確にこの順序でポリフィルが必要でした –>
<script src=”node_modules/es6-shim/es6-shim.min.js”></script>
<script src=”node_modules/systemjs/dist/system-polyfills.js”></script>
<script src=”node_modules/angular2/es6/dev/src/testing/shims_for_IE.js”></script>
<script src=”node_modules/angular2/bundles/angular2-polyfills.js”></script>
<script src=”node_modules/systemjs/dist/system.src.js”></script>
<script src=”node_modules/rxjs/bundles/Rx.js”></script>
<script src=”node_modules/angular2/bundles/angular2.dev.js”></script>
<script>// <![CDATA[
        System.config({
            packages: {
                ‘src’: {
                    defaultExtension: ‘js’,
                },
            },
        });
    
// ]]></script>
<script>// <![CDATA[
        System.import(‘/src/app’);
    
// ]]></script>
<!– Wijmo –>
<script src=”scripts/vendor/wijmo.min.js” type=”text/javascript”></script>
<script src=”scripts/vendor/wijmo.grid.min.js” type=”text/javascript”></script>
<!– Wijmo Angular 2 –>
<script src=”scripts/vendor/wijmo.angular2.min.js” type=”text/javascript”></script>

ビデオの内容

Angular 2を使用したWijmo FlexGridの導入ガイドへようこそ。私は、グレープシティ開発部門のロス・デドラーです。今日は、新しいアプリケーションにWijmo FlexGridを追加する方法について説明します。このビデオでは、Visual Studio 2015でIntellisenseとTypeScriptを使用しますが、コマンドラインや他のエディタを使用することもできます。

最初に、Visual Studioの[TypeScriptを使用したHTMLアプリケーション]プロジェクトテンプレートを使用して新しいアプリケーションを作成します。アプリケーションの名前はGettingStartedFlexGridNg2にします。index.html、app.ts、app.cssの各ファイルを削除することをお勧めします。TypeScriptプロジェクト設定に移動し、プロジェクトモジュールシステムとしてCommonJSを指定します。次に、プロジェクトをアンロードし、試験的デコレータサポートを有効して、出力に警告が含まれないようにする必要があります。
Angular 2ライブラリを取得するには、アプリケーションのルートにpackage.jsonファイルを追加します。Angular 2クイックスタートマニュアルに記載されているファイルの内容をコピーします。このコードは、Visual Studioがライブラリを自動的に取得するように指示します。Visual Studioは、すべてのライブラリをnode_modulesに置きます。

次に、プロジェクト構造を構成します。フォルダを3つ追加します。Wijmoコントロールを置くscriptsフォルダ、stylesフォルダ、それにコンポーネントとサービスを入れるsrcフォルダです。
Windowsのファイルエクスプローラーで、Wijmoダウンロードパッケージの横にあるプロジェクトを開きます。スクリプトにフォルダを2つ追加し、一方はvendor、もう一方はdefinitionsと名前を付けます。definitionsは、Wijmoコントロールを含む内部モジュールのAPIを記述します。vendorには、コントロール自体のJavaScriptコードが含まれます。Wijmo.Angular2相互運用JSファイルをInterop Wijmoパッケージからベンダの場所にコピーします。node_modulesにWijmoという名前の新しいフォルダを作成し、interopからそのフォルダにd.ts(定義)ファイルをコピーします。最後に、基本スタイルをコピーします。

Visual Studioに戻り、stylesとscriptsのすべての内容をプロジェクトに追加します。node_modulesのWijmoフォルダは入れません。

default.htmlを構成します。初めに、タイトルを指定します。次に、オンラインマニュアルの説明に従ってAngular 2への参照を追加します。必要なWijmoコントロール参照も追加します。

SystemJS設定を行う必要があります。ご覧のように、コンポーネントをsrcフォルダに入れます。最後に、Wijmoの基本cssにリンクします。これで、appコンポーネントを作成できます。

新しいTypeScriptクラスと付随テンプレートを追加します。Visual Studioによってここに配置されるデフォルトのhtmlコードは削除してかまいません。

コンポーネントにいくつかのAngular 2モジュールをインポートします。データサービスがデータを取得できるように、新しいTSクラスを作成し、それをappコンポーネントにインポートします。これで、Wijmo FlexGridをインポートする準備ができました。まず、コンポーネントをマークアップ内のどこに置いても呼び出せるように、デコレータとメタデータを定義します。Wijmo FlexGridからコンポーネントにディレクティブを公開します。次に、クラスを作成し、データサービスを呼び出して、データをFlexGridにロードします。DataSvcには汎用データをコピーします。最後に、アプリケーションをブートストラップします。

AppCmpをアプリケーションルートコンポーネントとして定義します。DataSvcサービスをAppCmpに公開します。最後の手順として、ビューを構成します。FlexGridディレクティブをコピーし、itemsSourceをappコンポーネントからデータモデルに割り当てます。
default.htmlにコンポーネントのプレースホルダを追加し、コンポーネントにスタイル設定を追加します。

アプリケーションを実行します。