「プレイWijmo」でWijmoを見て触って学ぼう

軽量/高速に動作するJavaScriptコントロール「Wijmo(ウィジモ)」のサンプルコードを見て触れて学習できる、「プレイWijmo」を公開しました。

demo.grapecity.com

「プレイWijmo」では、Wijmoコントロールの主な機能をや基本的な使用方法を、次のような方法で学習することができます。

  • 解説文を見て学習する
  • 実装コードを見て学習する
  • 自分でコードを記述して学習する

ここでは一例として、データグリッドコントロール「FlexGrid」を使い始めるまでに、どのように学習したら良いかを具体的な例を交えて紹介します。

Wijmoのアーキテクチャを理解する

まず、Wijmoのアーキテクチャを理解することが重要です。そのためには、「概要」セクションを一通り確認しましょう。その中でも特に重要なトピックをリストアップします。

  • Wijmoの参照
    WebアプリケーションでWijmoを使用するためには、HTMLページにWijmoのJavaScriptファイルとCSSファイルへの参照を追加する必要があります。
  • コントロールの作成
    Wijmoコントロールを作成するには、HTMLページにdiv要素を追加してから、JavaScriptコードでコントロールインスタンスを生成します。WijmoはTypeScriptで開発されているため、「var grid = new wijmo.grid.FlexGrid(...)」のように、名前空間やクラスを用いてコントロールを作成できます。
  • プロパティと列挙型
    Wijmoコントロールでは(jQueryのように関数を使用するのではなく)プロパティを取得および設定することができます。また、「theChart.chartType = wijmo.chart.ChartType.Line;」のように、列挙型の値を使用することもできます。
  • Wijmoイベント
    Wijmoでは独自のイベント機能を提供します。標準のaddEventListenerでHTML要素にイベントを追加するのと同様の方法で、Wijmoコントロールのイベントをハンドリングすることができます。
  • グローバリゼーション
    Wijmoでは、カルチャーファイルを参照することで、そのカルチャーを使用してデータの書式設定および解析を行います。また、グリッドのフィルタリング画面などのコントロールUIが、そのカルチャーの言語で表示されます。
  • CollectionView
    CollectionViewはWijmoのコアデータプロバイダです。データ管理アプリでは特に重要なデータ変更追跡機能や、データのソート、フィルタフィング、ページングなどの機能を提供します。

コントロールアーキテクチャを理解する

続いて、コントロールアーキテクチャを理解することもまた重要です。「コンセプト」の下のトピックを一通り確認しましょう。その中でも特に重要なトピックは次の通りです。

  • アーキテクチャ
    FlexGridアーキテクチャの概要です。
  • 行と列
    FlexGridの行と列には、ヘッダー、フッター、スクロール可能な領域などがあります。
  • サイズとスクロール
    FlexGridではCSSを使用してサイズを設定します。また、サイズを設定すると自動的にスクロールバーが表示されてスクロールすることができます。
  • データ連結
    データを連結すると、FlexGridの列が自動的に生成されます。手動で列を生成することも可能です。

コントロールの機能を実装コードを見て触って学習する

個別の具体的な機能を学習するには、実装コードを確認したり、さらには自分でコードを記述して実行することもできます。開発環境やエディタを用意する必要はなく、Webブラウザだけでコードを記述および実行することが可能です。

例として、列のプロパティトピックを表示します。初期状態では、解説文とサンプルの実行結果の画面が表示されています。

f:id:ComponentOne_JP:20170517174501p:plain

ページ上部の「HTML」、「JavaScript」、「CSS」をクリックすると、それぞれのコードを確認することができます。

f:id:ComponentOne_JP:20170517174553p:plain

このサンプルのJavaScriptコードでは、データを生成した後で、列のプロパティを指定してFlexGridコントロールを生成しています。試しに、列の設定を変更してみましょう。

コードを変更または記述するには、ページ右上の「Edit In JSFiddle」をクリックします。

JavaScriptコードで、「Expenses」列の設定を次のように変更してみましょう。

  • ヘッダ文字列を「利益」に設定します。
  • 書式を「n0」(通貨でなく通常の数値)に設定します。
  • 列幅を80pxに設定します。
 :
var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
allowResizing: 'None',
autoGenerateColumns: false,
columns: [
{ binding: 'country', header: 'Country', width: '2*', align: 'center', isReadOnly: true },
{ binding: 'sales', header: 'Sales', format: 'c0', width: '*' },
// Expenses列の設定を変更
{ binding: 'expenses', header: '利益', format: 'n0', width: 80  },
],
itemsSource: data
});

f:id:ComponentOne_JP:20170517175639p:plain

コードを変更した後でページ上部の「Run」をクリックすると、右下の実行結果の画面が更新され、期待通り動作していることが確認できます。

f:id:ComponentOne_JP:20170517175651p:plain

以上のように、「プレイWijmo」を使用すると、ドキュメントを読むだけでなく、コードを見て触りながら効率的にWijmoを学習することができます。「プレイWijmo」では、今後もトピックを随時追加していく予定ですので、お楽しみにしてください。

\  この記事をシェアする  /