Wijmo & Web Components クイックスタート

1.参照設定とモードの有効化設定

はじめに、HTMLファイルを作成し、各種モジュール・CSSの参照設定とWijmoのWeb Componentsモード有効化設定を行います。

Polyfillの参照

Web Componentsの公式サイトで提供されている、以下2つのPolyfillを参照します。

<!-- Polyfillの参照 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/custom-elements-es5-adapter.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.0.2/webcomponents-bundle.js"></script>

Web Componentsモードの有効化

Wijmoの本体モジュールを参照する前に次のスクリプトを実行して、WijmoのWeb Componentsモードを有効にします。これはWijmoをWeb Componentsとして実行するための宣言です。

<!-- Wijmo web components mode の有効化 -->
<script>
    window['wj-control-is-element'] = true;
</script>

Wijmo 本体モジュール・CSS・相互運用モジュールの参照

最後にWijmoの本体モジュール、CSS、相互運用モジュールの参照を行います。

<!-- Wijmo 本体モジュール・CSS・相互運用モジュールの参照 -->
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css" />
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/webcomponents/wijmo.webcomponents.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/cultures/wijmo.culture.ja.min.js"></script>

これでWijmoをWeb Components形式で利用するための準備は完了です。

2.コンポーネントの作成

次に、HTMLのカスタム要素を使ってWijmoコンポーネントを作成します。

Web Components形式でWijmoを使用する場合、wjc-コンポーネント名という形でコントロールの指定が可能です。今回はFlexGridでデータ表示を行うので、wjc-flex-gridコンポーネントと、その列を表すwjc-flex-grid-column子コンポーネントを使用します。

以下の例は、wjc-flex-gridコンポーネントに対し「No」「商品名」「受注日」「金額」「値引」の5列（5つのwjc-flex-grid-column子コンポーネント）を設定する例です。

<wjc-flex-grid id="grid">
<wjc-flex-grid-column binding="No"></wjc-flex-grid-column>
<wjc-flex-grid-column binding="商品名"></wjc-flex-grid-column>
<wjc-flex-grid-column binding="受注日"></wjc-flex-grid-column>
<wjc-flex-grid-column binding="金額"></wjc-flex-grid-column>
<wjc-flex-grid-column binding="値引"></wjc-flex-grid-column>
</wjc-flex-grid>

加えてWijmoでは、これらの要素にカスタム属性を記述して、各コンポーネントのプロパティ設定を行うこともできます。以下は「商品名」列と「金額」列に対し、それぞれ幅と書式情報を設定する例です。

幅設定の例

<wjc-flex-grid-column binding="商品名" width="200"></wjc-flex-grid-column></wjc-flex-grid>

書式設定の例

<wjc-flex-grid-column binding="金額" format="c"></wjc-flex-grid-column>

これで、HTMLファイルの設定は完了です。

3.JavaScriptによる処理

次に、JavaScriptファイルを作成し、Wijmoコンポーネントに対するロジック処理を記述します。

wjc-flex-gridなどのコンポーネントはHTML要素（HTMLElement）を継承しているので、JavaScriptによる標準のHTML要素の操作と同じように処理を記述できます。例えば以下のように、document.getElementByIdメソッドを使ってHTML要素を取得することが可能です。

var grid = document.getElementById('grid');

さらに、取得した要素ではWijmo独自のプロパティを設定できます。今回はHTMLでFlexGridに設定した列にあわせて以下のようなデータを想定し、wjc-flex-gridのプロパティitemSourceにデータ設定してみたいと思います。

今回設定するデータ

var data = [
{No:0, 商品名:"うまい素", 受注日: "2016/12/28", 金額: 11040, 値引: true},
{No:1, 商品名:"チョコクリームアイス", 受注日: "2015/12/17", 金額: 15600, 値引: "false"},
{No:2, 商品名:"ピュアシュガー", 受注日: "2014/01/17", 金額: 2800, 値引: "false"},
{No:3, 商品名:"果汁100%レモン", 受注日: "2013/10/22", 金額: 12240, 値引: "true"},
{No:4, 商品名:"パルメザンチーズ", 受注日: "2014/08/22", 金額: 10500, 値引: "false"}
];

設定はとても簡単です。次のようにして取得したwjc-flex-grid要素のitemSourceプロパティに、上記のデータを設定します。

grid.itemsSource = data;

これで全ての設定が完了しました。以上のコードを実装したサンプルはこちらです。