Ignite UIをReactで使用

プロジェクトのセット アップ

こちらをクリックするとレッスンに必要なプロジェクトをダウンロードできます。(こちらからは完成版をダウンロードできます。)

このプロジェクトは、ReactJSと Ignite UIで動作するように既に構成されており、すべての参照がプロジェクトに追加されています。詳細については、Blog エントリ (英語) を参照してください。

このプロジェクトでは下記のファイルを確認できます。

1. index.html : アプリケーション マークアップと参照設定
2. index.js : Reactコード
3. data.js: Ignite UIグリッドで使用されるデータ

data.js には Ignite UIグリッドに表示されるデータが含まれています。index.jsには アプリケーション コンポーネントが含まれています。index.jsでは下記のようにコンポーネント クラスが生成されている箇所を確認できます。

var App = React.createClass(
{
  getInitialState: function()
  {
    return{
    }
  },
  render: function()
  {
    return(
     <h2>Ignite UI Grid will be rendered here</h2>
    )
  }
});
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

このコンポーネント クラスは2つの関数を含んでいます。

1. getInitialState() 関数: 初期状態のオブジェクトを返す
2. render() 関数: レンダリング情報を返す。次の手順で実装

React.createClass API の詳細についてはこちらをご覧ください。

以下のリストに示すように、index.jsでは、babelスクリプトとして参照されていることがわかります。

<div id="app">
  <script type="text/babel" src="index.js">
  </script>
</div>

index.htmlでは、React、jQuery、Ignite UIへの参照設定を確認できます。

ダウンロードを終えた後、プロジェクトのフォルダーに移動し、下記のコマンドを実行します。

• npm install
• npm start

npm installコマンドを実行することで全ての依存する項目がインストールされます。npm startコマンドを実行することで Reactアプリケーションが実行されます。プロジェクトのセットアップが正しく行われている場合、下記のイメージのようなアプリケーションが実行されます。

手順 1: 初期状態に初期化

グリッドを初期化するには、データ ソース、幅、行スタイルなどのグリッドのさまざまなプロパティの値を設定する必要があります。これらのグリッドプロパティは、getInitialState()関数で設定できます。index.jsファイルを開き、以下のように getInitialState()関数を変更します。

getInitialState: function()
{
  return{
    data: stocks,
    gridWidth: "100%",
    alternateRowStyles: true
  }
},

グリッドの幅、行スタイル、およびデータソースを設定するためのプロパティを作成しています。さらに、アプリケーションに "stocks" という配列が既に存在することがわかります。

手順 2: グリッドをレンダリング

グリッドをレンダリングするには、コンポーネントクラスの render()関数からグリッドを返す必要があります。IgGridを返すには、index.jsを開き、次のようにレンダリング関数を変更します。

render: function()
{
  return(
    <div>
      <IgGrid id="grid1"
              autoGenerateColumns={true}
              dataSource={this.state.data}
              width={this.state.gridWidth}
              alternateRowStyles={this.state.alternateRowStyles} />
    </div>
  )
}

getInitialState()関数から返されるオブジェクトのプロパティを使用して、dataSource、width、およびalternateRowStylesプロパティを設定しています。

アプリケーションを実行すると、Ignite UIグリッドがRecatJSアプリケーションで実行されていることを確認できます。

手順 3: グリッドの列を定義

前の手順では、グリッドを作成するためにautoGenerateColumnsをtrueに設定しました。選択した列のみをデータ セットから表示するように構成することもできます。autoGenerateColumns  プロパティをfalseに設定し、グリッドにcolumnsプロパティを追加し、列を構成する必要があります。下記のように、render() 関数で IgGrid を変更します。

<igGrid id="grid1"
        autoGenerateColumns={false}
        dataSource={this.state.data}
        width={this.state.gridWidth}
        alternateRowStyles={this.state.alternateRowStyles}
        columns={[
          { headerText: "CLOSE", key: "Close", dataType: "number" },
          { headerText: "DATE", key: "Date", dataType: "date", format: "dateTime" },
          { headerText: "HIGH", key: "High", dataType: "number" },
          { headerText: "LOW", key: "Low", dataType: "number"},
          { headerText: "OPEN", key: "Open", dataType: "number"},
          { headerText: "VOLUME", key: "Volume", dataType: "number"},
        ]}
/>

アプリケーションを実行すると列を手動で定義したグリッドが表示されていることを確認できます。