Shoeisha Technology Media

CodeZine(コードジン)

記事種別から探す

最新フレームワーク「Angular 2」と組み合わせて「Wijmo(ウィジモ) 5」を使おう

ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用 第10回

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

さまざまなWijmoコンポーネントをAngular 2で活用

 以下では、Wijmoの特徴的なコンポーネントをAngular 2で活用するサンプルを紹介します。

グリッド表示を行うFlexGridコントロール

 FlexGridは、.NETなどさまざまな環境で提供されているグリッド部品のWijmoバージョンです。表形式のデータを表示/操作するグリッドをWebページに表示できます。

図5 FlexGridをWebページに表示(wijmo-002-flexgrid)
図5 FlexGridをWebページに表示(wijmo-002-flexgrid)

 FlexGridを利用するには、まず、FlexGridを含むモジュールWjGridModuleをインポートします(リスト7)。

リスト7 WjGridModuleをインポート(wijmo-002-flexgrid/app/app.module.ts)
import { WjGridModule } from "wijmo/wijmo.angular2.grid";
(中略)
@NgModule({
  // インポート
  imports: [
    BrowserModule,
    WjGridModule
  ],
(中略)
})

 FlexGridのコンポーネント名はWjFlexGridなので、対応するタグ名は<wj-flex-grid>となります。リスト8のように記述していきます。

リスト8 FlexGridの記述(wijmo-002-flexgrid/app/app.component.ts)
<wj-flex-grid [itemsSource]="gridData" style="width:500px">
  <wj-flex-grid-column [header]="'製品名'" [binding]="'name' "[width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'会社'" [binding]="'vendor' "[width]="'*'">
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'発売'" [binding]="'delivery'" [width]="'*'">
  </wj-flex-grid-column>
</wj-flex-grid>

 <wj-flex-grid>がグリッド全体を表し、itemsSource属性に設定された変数gridDataのデータが表示されます。gridDataの内容はダウンロードできるサンプルコードを参照してください。<wj-flex-grid-column>がグリッドの1列で、header属性はヘッダー行に表示される文言、binding属性は対応するデータ項目名です。widthは列幅の指定で、「*」を指定すると、可能な限り列を左右に広げて表示します。

 ここで、[]で囲まれているプロパティに文字列の値を設定する場合は、「"'name'"」のように、ダブルクォーテーションとシングルクォーテーションを重ねて記述することに注意してください。

さまざまなグラフを表示するFlexChartコントロール

 FlexChartは、棒グラフや折れ線グラフなどを表示できるチャートコンポーネントです。

図6 FlexChartでグラフを描画(wijmo-003-flexchart)
図6 FlexChartでグラフを描画(wijmo-003-flexchart)

 リスト7と同様の記述でFlexChartを含むモジュール(WjChartModule)をインポート後、リスト9のように、FlexChartのコンポーネント(WjFlexChart)に対応する<wj-flex-chart>タグを記述します。

リスト9 FlexChartの記述(wijmo-003-flexchart/app/app.component.ts)
<wj-flex-chart [itemsSource]="chartData" [bindingX]="'ym'"
  style="width:480px;height:320px;">
  <wj-flex-chart-series [name]="'稼働時間'" [binding]="'time'">
  </wj-flex-chart-series>
  <wj-flex-chart-series [name]="'生産数'" [binding]="'count'"
    [chartType]="'LineSymbols'">
  </wj-flex-chart-series>
  <wj-flex-chart-legend [position]="'Bottom'">
  </wj-flex-chart-legend>
</wj-flex-chart>

 <wj-flex-chart>がチャート全体を表し、itemsSource属性に設定された変数chartDataのデータが表示されます。bindingX属性は、X軸に表示するデータ項目名です。<wj-flex-chart-series>がチャートの1系列を表し、name属性で名前、binding属性で対応するデータ名を指定します。<wj-flex-chart-legend>はグラフの凡例に対応し、ここでは凡例をグラフ下に描画するよう指定しています。

 FlexGridやFlexChartを含めて、Angular 2と組み合わせたときのWijmo 5コンポーネント記述は、プロパティの指定方法以外はAngularJS 1の場合とほぼ同じです。詳細は過去の解説記事も参考にしてください。

まとめ

 本記事では、グレープシティのJavaScriptライブラリWijmo 5を、JavaScriptフレームワークAngular 2と組み合わせて利用する方法を説明しました。適切に環境設定を行うことで、Wijmo 5のUI部品をAngular 2のWebサイト上で利用できます。Angular 2と同じ流儀でWijmo 5の実装を記述できるため、あたかもWijmo 5がAngular 2の一部であるように、シームレスに活用できます。

参考資料



  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2017年5月時点での登録メンバは52名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂き...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

バックナンバー

連載:ECMAScript 5に準拠した高速・軽量なJavaScript UIライブラリ「Wijmo 5」の活用

もっと読む

All contents copyright © 2005-2017 Shoeisha Co., Ltd. All rights reserved. ver.1.5