このマスターシリーズでは、Flex 4.5 SDKの新機能の中から「Spark DataGrid」「Spark Form」「Spark Formatter」について解説します。

Flex 4.5 SDKから新たにいくつかのSparkコンポーネントが追加されました。本記事では、その中からDataGridコンポーネントを取り上げ、その基礎について解説します。

Spark DataGridコンポーネント

Flex 4.5 SDKでは、データグリッド系コンポーネントとして新たにSpark DataGridコンポーネントが追加されました。データグリッドは、特に業務アプリケーションにおいて非常に重要なコンポーネントの1つです。これまでMX DataGridコンポーネントがありましたが、よりよいデータグリッド系コンポーネントはFlex 4の頃からずっと待望されていたコンポーネントと言えるでしょう。

Spark DataGridの注目すべき点は何といってもパフォーマンス面における大きな向上です。これまでMX DataGridを利用する際に問題となっていた動作の”重さ”が大幅に軽減され、非常に利用しやすくなりました。特に列が多数ある場合の水平スクロールなどでは顕著なパフォーマンスの違いを感じることができます。サンプルSparkDataGridExampleは、この両者を比較できるようにしたものです。

サンプルを見る:SparkDataGridExample.html

記述の仕方はMX DataGridとほぼ同じです。ただし、Spark DataGridではcolumnsの中をIListとしなければならず、以下のようにArrayListを挟む必要があります。

<s:DataGrid id=”dg” width="500" height="250"> <s:columns> <s:ArrayList> <s:GridColumn headerText="氏名" dataField="name" /> <s:GridColumn headerText="ふりがな" dataField="ruby" /> <s:GridColumn headerText="メールアドレス" dataField="mail" /> <s:GridColumn headerText="性別" dataField="sex" minWidth="40" /> <s:GridColumn headerText="年齢" dataField="age" minWidth="40" /> <s:GridColumn headerText="血液型" dataField="bloodtype" minWidth="50" /> <s:GridColumn headerText="住所" dataField="prefecture" /> <s:GridColumn headerText="電話番号" dataField="phone" /> </s:ArrayList> </s:columns> </s:DataGrid>

Spark DataGridとMX DataGridとの違い

Spark DataGridとMX DataGridとの間には多くの違いがあります。その中から、Spark DataGridの特徴を理解するためにも、実装する際にポイントとなる違いについて解説します(イベントについては後述します)。

selectionModeプロパティとallowMultipleSelectionプロパティ

MX DataGridには選択方法の設定を行うプロパティとしてallowMultipleSelectionがありますが、単一行選択か複数行選択しか設定できません。Spark DataGridでは同様のプロパティとしてselectionModeがあり、行・カラム・セルの選択方法を設定することができます(MX AdvancedDataGridとほぼ同様の仕様となりました)。

selectionModeプロパティで設定できる選択モード

モード 説明
singleRow 単一行のみ選択可能。
singleCell 単一セルのみ選択可能。
multipleRows 複数行を選択可能。
multipleCells 複数セルを選択可能。
none 選択不可。

サンプルを見る:SelectionModeExample.html

このような選択方法の追加に伴い、選択されているデータを取得する方法も追加されました。現在のselectionModeのモードによって、利用できるプロパティが変わってきます。注意してほしいのは、selectedCellsやselectedIndices、selectedItemsではVector型で返ってくることです。

selectionModeのモードごとに利用できるプロパティ

selectionModeのモード プロパティ 説明
GridSelectionMode.SINGLE_ROW selectedIndex 最初に選択された行のrowIndexが返されます。
selectedIndices 選択された行のインデックスのVectorが返されます。
selectedItem 現在選択されているdataProviderアイテムが返されるか、行が選択されていない場合はundefinedが返されます。
selectedItems 現在選択されているdataProviderアイテムのVectorが返されます。
selectionLength (読み取り専用) 選択された行の数が返されます。
GridSelectionMode.SINGLE_CELL selectedCell 最初に選択されたセルが返されます。
selectedCells グリッドで選択されたセルの位置を表すCellPositionオブジェクトのVectorが返されます。
selectionLength (読み取り専用) 選択されたセルの数が返されます。
GridSelectionMode.MULTIPLE_ROWS selectedIndex 最初に選択された行のrowIndexが返されます。
selectedIndices 選択された行のインデックスのVectorが返されます。
selectedItem 現在選択されているdataProviderアイテムが返されるか、行が選択されていない場合はundefinedが返されます。
selectedItems 現在選択されているdataProviderアイテムのVectorが返されます。
selectionLength (読み取り専用) 選択された行の数が返されます。
GridSelectionMode.MULTIPLE_CELLS selectedCell 最初に選択されたセルが返されます。
selectedCells グリッドで選択されたセルの位置を表すCellPositionオブジェクトのVectorが返されます。
selectionLength (読み取り専用) 選択されたセルの数が返されます。

ソートするにはdataProviderの値をコレクションにする

Spark DataGridでもこれまで通り、カラムヘッダーをクリックすることでソートすることが可能です。ただし、dataProviderの値がコレクションでないとソートされません。例えば、ArrayListをdataProviderに代入している場合、ヘッダーをクリックしてもソートされません。

行/列単位のスクロールからスムーススクロールへ

MX DataGridでは行/列単位のスクロールでしたが、Spark DataGridではスムーススクロールになりました(Spark Listと同様です)。また、水平スクロールと垂直スクロールともにパフォーマンスが向上しており、特にMX DataGridでは非常にパフォーマンスが悪かった水平スクロールが大きく改善されています。

柔軟なカスタマイズが可能なスキン

Spark DataGridでは、他のSparkコンポーネントと同様にSparkスキンによってビジュアルの柔軟なカスタマイズが可能です。スキンについての詳細は次回に解説します。

Spark DataGridで削除された機能

中には以下のように削除された機能もあります。これらは代替手段ができたために不要になったり、今後追加される予定の機能もあります。

  • ドラッグ&ドロップでのカラムの入れ替え機能。
  • 行または列の固定化(lockedRowCountプロパティとlockedColumnCountプロパティ 今後追加予定)。
  • showHeaderなどの見た目に関するプロパティ(スキンで制御できるようになったため不要に)。

また、MX AdvancedDataGridで利用できたヘッダーのグループ化機能も今後追加されることが予定されています。

Spark DataGridのイベント

Spark DataGridは、MXの時のようなListのサブクラスではなくなり、完全な別のクラスとして作成されているので、イベントもGridEvent/GridCaretEvent/GridSelectionEventといった独自のイベントクラスが用意されています。その中から、よく利用するイベントについて解説します。

GridEvent

データグリッド内のグリッドセル上でマウスイベントが発生した場合、GridEventとしてデータグリッド独自のイベントを発生させます。

GridEventの種類

イベント 説明
GRID_CLICK グリッドセル上がクリックされた時。
GRID_DOUBLE_CLICK グリッドセル上がダブルクリックされた時。
GRID_MOUSE_DOWN グリッドセル上でマウスボタンが押下された時。
GRID_MOUSE_UP グリッドセル上でマウスボタンが放された時。
GRID_MOUSE_DRAG グリッドセル上でマウスがドラッグされた時。
GRID_ROLL_OUT グリッドセル上からマウスが出た時。
GRID_ROLL_OVER グリッドセル上にマウスが入った時。

GridEventを利用することで、イベントの発生したセルの詳細な情報を簡単に取得することができます。下表はGridEventが発生した時にイベントハンドラで受け取ることができるプロパティです。対象となるセルの情報が取得できます。

GridEventで取得できるセルの情報

プロパティ 説明
column イベントが発生した列 GridColumn
columnIndex イベントが発生した列のインデックス
item イベントが発生した行のデータプロバイダーアイテム
itemRenderer イベントが発生したセルを表示するアイテムレンダラー
rowIndex イベントが発生した行のインデックス

サンプルを見る:GridEventExample.html

GridCaretEvent

GridCaretEventは、選択箇所ではなく、キャッレット位置の変動によって発生するイベントです。

GridCaretEventの種類

イベント 説明
CARET_CHANGE 現在のキャレット位置が変更された時。

Ctrl+矢印キー操作でキャレットのみ移動でき、その移動ごとにイベントが発生します。このイベントを利用することで、例えば特定のセルにキャレットが移動した時のみEditableにするといったことができます。下表はGridCaretEventが発生した時にイベントハンドラで受け取ることができるプロパティです。キャッレットの移動座標が分かります。

GridCaretEventで取得できるキャッレットの情報

プロパティ 説明
newColumnIndex キャレット位置の変更後(現在選択中)の列インデックス。
newRowIndex キャレット位置の変更後(現在選択中)の行インデックス。
oldColumnIndex キャレット位置の変更前の列インデックス。
oldRowIndex キャレット位置の変更前の行インデックス。

サンプルを見る:GridEventExample.html

GridSelectionEvent

GridSelectionEventは、選択範囲が変更された時に発生するイベントです。ListのIndexChangeEventに似ていますが、より詳細な状態を取得できるようになっています。選択範囲が変更された際、CHANGEイベントより先に必ずCHANGINGが走ります。

GridSelectionEventの種類

イベント 説明
SELECTION_CHANGE 現在の選択範囲が変更された時。
SELECTION_CHANGING 現在の選択範囲が変更されようとしている時。このイベント時にpreventDefault()を呼び出すことで選択項目が変更されないようにできます。

サンプルを見る:GridEventExample.html

GridSelectionEventで重要なのは、kindプロパティとselectionChangeプロパティです。Kindの内容を見ることで、選択時に何が行われたのかを詳細に知ることが可能になりました。

GridSelectionEventで利用できるプロパティ

プロパティ 説明
kind 発生したイベントの種類を示します。下記のGridSelectionEventKindのいずれか1つが入ってきます。
selectionChange kindの内容に従って選択・削除された範囲がCellRegionクラスとして取得できます。

GridSelectionEventKindの種類

プロパティ 説明
ADD_CELL 現在の選択範囲に新たにセルが追加される。
ADD_ROW 現在の選択範囲に新たに行が追加される。
CLEAR_SELECTION すべての選択がクリアされる。
REMOVE_CELL セルが現在の選択範囲から削除される。
REMOVE_ROW 行が現在の選択範囲から削除される。
SELECT_ALL グリッド全体が選択される。
SET_CELL 新たに単一セルを選択範囲とする。
SET_CELL_REGION 新たに単一セル領域を選択範囲とする。
SET_ROW 新たに行を選択範囲とする。
SET_ROWS 新たに複数行を選択範囲とする。

図8では複数セルが既に選択されている状態で新たにセルを追加選択しており、kindの内容がaddCellでその追加したセルの位置をCellRegionクラスから知ることができます。

おわりに

Spark DataGridコンポーネントの特徴とMX DataGridとの違いについて解説しました。新しく生まれ変わったDataGirdの機能とイベント周りの動きをサンプルコードで確認しつつしっかりと理解しアプリケーションに組み込んでいきましょう。

次回は、Spark DataGridコンポーネントのスキン変更やカスタムアイテムレンダラーなどの応用的な使い方についてサンプルを用いて解説します。

関連記事

Flex Sparkコンポーネント版 Form/Formatter/Imageの紹介