Rich UI DataGrid および DataGridTooltip

Rich UI dataGrid ウィジェットで、行値の配列を表で定義します。このトピックでは、ウィジェットに関する一般情報情報を説明し、参照用詳細を記載しています。

概要

データ・グリッドを理解するためには、以下の問題に精通している必要があります。
  • 列見出しおよびデータ行を定義する方法。
  • 関数の配列をとるプロパティーである振る舞いを定義する方法。特定の振る舞いの関数は、グリッドがレンダリングされるときに配列エレメント順に実行されます。
  • リスナーを定義する方法。これも関数の配列をとるプロパティーです。特定のリスナーの関数は、クリックなどのユーザー・アクションに応答して、または場合により、行の選択や選択解除を行ったりチェック・ボックスを更新する関数呼び出しに応答して、配列エレメント順に実行されます。
  • グリッドを列でソートするメカニズムのカスタマイズ方法。
振る舞いとリスナーは、スタイル特性に影響する場合や、さまざまな種類のロジックを起動する場合があります。例えば、列によるソートの発生、サービスへのアクセス、値の計算とグリッド列への配置、ウィジェットの構成とグリッド列への配置、などです。さまざまな方法で、これらの知識に基づいて処理できます。例えば、以下のようにすることができます。
  1. データ・グリッドの行からユーザー ID にアクセスします。
  2. コールバック関数に写真を戻す REST サービス呼び出しでその ID を使用します。
  3. ハンドラーでグローバルに定義されているイメージ・ウィジェットにその写真を埋め込みます。
  4. そのユーザー ID と同じ行にあるデータ・グリッド列にそのウィジェットを配置します。
次の例を使用すると、簡単に開始できます。
  1. レコードの配列の基礎となるレコード・パーツを定義します。各レコードは、データ・グリッドの単一行に表示する値のセットを保持します。

    レコード・パーツの例を以下に示します。

    Record Stock type BasicRecord
       Symbol STRING;
       NumShares INT;
       Quote  DECIMAL(5,2);
       SelectQuote Boolean;
    end

    フィールド名は、後でグリッド列の宣言で参照されるため重要です。

  2. データ・レコードの配列を宣言します。次に例を示します。
    stockList Stock[] = [
       new Stock{SelectQuote = false, Symbol = "Company1", Quote = 100.00, NumShares = 40 },
       new Stock{SelectQuote = false, Symbol = "Company2", Quote = 200.00, NumShares = 10 } ]; 

    特定のデータ・レコードのフィールドの順序には意味がありません。ただし、デフォルトでは、配列内のデータ・レコードの順序は、データ・グリッド内の行の順序になります。

  3. 前のレコード宣言に続く位置でデータ・グリッドを宣言します。 データ・グリッドの例を以下に示します。
    myGrid DataGrid{...};
    宣言には、通常、columns プロパティーと data プロパティーが含まれます。
    • columns プロパティーの場合、DataGridColumn 型のレコードの配列を割り当てます。
      現在の例の設定を以下に示します。
      columns = [
         new DataGridColumn { name = "Symbol", displayName = "Company Symbol"},
         new DataGridColumn { name = "Quote", displayName = "Price Per Share" },
         new DataGridColumn { name = "NumShares", displayName = "Number of Shares" },
         new DataGridColumn { name = "Total", 
                              displayName = "Value of Shares",
                              formatters = [totalFormatter] }
      ]

      最初の 3 つの DataGridColumn 型の宣言は、それぞれ Stock レコードの配列内のレコード・フィールドを参照しています。 4 番目の宣言は、対応するレコード・フィールドがない列である算出列を示します。この場合、Total という名前のレコード・フィールドはありません。

      DataGridColumn 要素の順序が、列の表示順序を決定します。

    • data プロパティーの場合、Stock 型のレコードの配列を割り当てます。以下に設定例を示します。
      data = stockList as any[]

      配列内の各要素は、データ・グリッド内の行に必要なデータのサブセットを提供します。

    たいていの場合、Rich UI では、参照する前に変数を宣言することが必要です。 この例では、stockList をデータ・グリッドの前に宣言する必要があります。

振る舞いとリスナーは、プロパティーに値を割り当てることにより設定します。これらの各プロパティーは、そのプロパティーに割り当てられた関数に必要なパラメーター・リストと戻り値を識別する Delegate 型に関連しています。この例では、DataGridColumn formatters プロパティーが 4 番目の列に設定され、3 つのパラメーターをとり戻り値を持たない関数の呼び出しになります。以下に、関数を示します。
function totalFormatter(class String inout, value String inout, rowData any in)

   // display the total value of the shares after calculating the value 
   //    from the content of two other columns in the same row
   value = rowData.NumShares as INT * rowData.Quote as DECIMAL(5,2);
end

formatters プロパティーで参照される関数の呼び出しは、グリッドがレンダリングされる前に、行ごとに 1 回発生します。行全体の内容を 3 番目のパラメーターで使用でき、CSS クラスを制御する最初のパラメーターか値を制御する 2 番目のパラメーターのいずれかを設定することにより列固有のセルを更新できます。

注意:
behavior 関数を作成する場合は、ウィジェット固有のレンダリング関数を呼び出すか、またはデータ・グリッドあるいはデータ列プロパティーを設定することで、グリッドが再レンダリングされないようにします。 再レンダリングは、長時間の遅延が発生したり、多くの場合にランタイム終了となったりする原因となります。

グリッドの再レンダリングは、リスナーの、またはボタン・クリックに応答して実行されるような他のイベント・ハンドラーの、on-construction 関数でのみ実行してください。

属性が none である非表示の親において、データ・グリッドの初期化はサポートされていません。none の属性を持つ非表示の親でデータ・グリッドを初期化する場合は、ウィジェットの render 関数を呼び出して、非表示の親からデータ・グリッドを表示するまで再レンダリングします。

DataGrid ウィジェットは、行に関心があることを示す 2 つの方法を提供します。
  • 最初は、行の選択、行の選択解除、および現在の選択の確認のためのメカニズムです。
  • 2 番目は、自動的に提供されるチェック・ボックスの集合にチェック・マークを付け、それらをクリアし、それらのチェック・ボックスの状況を確認するためのメカニズムです。
これらの 2 つのメカニズムは相互に独立しています。最初に、選択を考えてください。
  • 以下の 4 つの関数が使用されます。setSelectionselectAlldeSelectAll、および getSelection
  • DataGrid selectionMode プロパティーの値は行選択が有効であるかどうかを指定し、そうである場合、選択可能な行数を指定します。そのプロパティーは、ユーザーまたはコードによる行選択に影響します。
  • 行選択が有効である場合、ユーザーによる行のクリック、または以下の関数 (setSelectionselectAll、または deSelectAll) のいずれかの呼び出しに応答して、リスナー関数が実行されます。
  • リスナー関数は、DataGrid selectionListeners プロパティーから参照されます。
2 番目に、チェック・ボックスを考えてください。
  • 提供されたチェック・ボックスに関連して、setCheckedcheckAllunCheckAll、および getChecked の、4 つの関数が使用されています。
  • コードでは、チェック・ボックスが可視であるかどうかには関係なく、チェック・ボックスをチェック、クリア、および処理できます。それらのチェック・ボックスの可視性は、DataGrid showCheckBoxes プロパティーに値を割り当てることにより変更します。
  • ユーザーによるチェック・ボックスの選択またはクリア、または以下の関数 (setCheckedcheckAll、または unCheckAll) のいずれかの呼び出しに応答して、リスナー関数が実行されます。
  • リスナー関数は、DataGrid checkBoxListeners プロパティーから参照されます。

前述したように、データ・グリッドは列ソートをサポートします。ソートはユーザーが列見出しをクリックすることにより発生しますが、DataGridColumn enableSorting プロパティーの値が true である場合のみです。デフォルトでは、enableSorting プロパティーは true であり、ソートではセルの ASCII ストリング値に従って列の内容の順序が決まります。DataGridColumn ignoreCase プロパティーの値はデフォルト・ソートにも影響します。DataGridColumn comparatorFunction プロパティーを設定し、そのプロパティーが参照する関数を作成することにより、ソート動作をカスタマイズできます。

ソートが有効である場合は、グリッドの配列データの参照は、data プロパティーを参照することによってのみ行います。この理由は、ユーザーがソートを行っても data プロパティーが参照する配列は変更されないということです。この例では、ユーザーのソートは stockList 配列には影響せず、次の式は常に myGrid データ・グリッドの 3 番目の行を参照します。
myGrid.data[3];

列のソートに加えて、ユーザーは列をドラッグして別の位置にドロップできます。この機能は常に使用可能です。

同時に表示する行数よりも多くの行がある場合は、以下のいずれかの DataGrid プロパティーを true に設定します。
  • showButtonBar。この場合、ユーザーはボタンが水平方向に表示されたボタン・バーにアクセスできます。
  • showScrollBar。この場合、ユーザーはスクロール・バーにアクセスできます。
振る舞い、リスナー、およびソートで使用される関数の一部が提供されています。com.ibm.egl.rui プロジェクト、EGLSource フォルダー、com.ibm.egl.rui.widgets パッケージにある以下のファイルを確認してください。
  • DataGridBehaviors.egl
  • DataGridFormatters.egl
  • DataGridSelector.egl
  • DataGridSorter.egl
  • DataGridToolTip.egl
以下のファイルには、データ・グリッドの主な機能が含まれています。
  • DataGrid.egl
  • DataGridColumn.egl
  • DataGridLib.egl

DataGridColumn フィールド

データ・グリッドの columns プロパティーを設定するときに、タイプ DataGridColumn のレコードの配列を割り当てます。これらのレコードのそれぞれに、以下のフィールドが含まれています。
  • alignment: 表示される列の水平位置合わせに影響を与える整定数。
    DataGridLib.ALIGN_LEFT (デフォルト)
    列の内容は左寄せされます。
    DataGridLib.ALIGN_RIGHT
    列の内容は右寄せされます。
    DataGridLib.ALIGN_CENTER
    列の内容は中央に揃えられます。
  • columnComparator: 列ソート中にコンパレーター関数を参照します。コンパレーター関数は、セルの内容を順序付けるために繰り返し呼び出されます。
    以下に、カスタム関数が準拠する必要がある Delegate パーツを示します。
    Delegate ColumnComparator(data1 any in, data2 any in) returns (int) end
    data1
    比較対象の最初のセルの内容
    data2
    2 番目のセルの内容。
    この関数は次の整数値を戻します。
    • 最初のセルの内容が 2 番目の内容より小さい場合は -1。
    • その逆が真である場合は 1。
    • 2 つのセルの内容が等しい場合は 0。
    以下に、関数の例を示します。これは、会社名 Company3 から Company10 までを含むように前の例を拡張する場合に使用できます。
    Function CompareTwo(myFirst ANY in, mySecond ANY in) returns (int)
       if ( (myFirst as string )[8:8] == "6")
          return(-1);
       else
          return(1);  
       end
    end

    columnComparator プロパティーが CompareTo 関数を参照している場合、ユーザーのクリックにより Company6 は列の先頭または末尾に配置されます。

  • displayName: 列タイトルとして表示するストリング。displayName フィールドが指定されていない場合、列タイトルは name フィールドの値です。
  • enableSorting: ユーザーがクリックで列をソートできるかどうかを示すブール値。デフォルト値は true です。ソートは ignoreCase プロパティーの設定の影響を受けますが、それは columnComparator プロパティーを指定しない場合のみです。
  • formatters: グリッドがレンダリングされる前に配列エレメント順に実行される関数の配列。これらの関数は、列内のすべてのセルに対して 1 回実行されます。
    以下に、各関数が準拠する必要がある Delegate パーツを示します。
    Delegate CellFormatter(class String inout, value String inout, rowData any in) end
    class
    列内のセルの CSS クラス。
    value
    セルの内容。常に STRING 型です。内容がチェック・ボックスである場合、値は true または false です。
    rowData
    そのセルがある行のデータ。『概要』の例は、入力の処理方法を示しています。

    formatters フィールドの関数は、DataGrid columns プロパティーで定義されている DataGridColumn エントリーの順に呼び出されます。それらの関数は、以下の DataGrid プロパティー (ランタイム順にリスト) で指定された関数の前に実行されます。 headerBehaviorsbehaviors、および editingBehaviors

    formatters プロパティーとともに使用するために一組の関数が提供されています。 詳しくは、com.ibm.egl.rui プロジェクトの com.ibm.egl.rui.widgets パッケージにある次のファイルを参照してください。 DataGridFormatters.egl。

  • headerAlignment: 表示されるヘッダーの水平位置合わせに影響を与える整数値。値は以下のとおりです。
    DataGridLib.ALIGN_LEFT (デフォルト)
    列の内容は左寄せされます。
    DataGridLib.ALIGN_RIGHT
    列の内容は右寄せされます。
    DataGridLib.ALIGN_CENTER
    列の内容は中央に揃えられます。
    text-align 属性に leftcenter、または right を指定して、次のようなエントリーを CSS ファイルに含めることにより、すべての列見出しを設定できます。
    .EglRuiDataGridHeaderCell {
       text-align: center;
    }
  • ignoreCase: デフォルトのソート時に列の内容の大/小文字を無視するかどうかを示すブール値。デフォルトは false です。このプロパティー値は、columnComparator プロパティーを設定しない場合にのみ効果があります。
  • name: デフォルトの列タイトルと、列値を提供するレコード・フィールドの名前の両方であるストリング。
  • sortDirection: 以下の定数の 1 つ。ユーザーの次のソート要求で行う内容を示します。
    DataGridLib.SORT_UP (初期デフォルト)
    ユーザーがクリックすると、列が昇順にソートされます。
    DataGridLib.SORT_DOWN
    ユーザーがクリックすると、列が降順にソートされます。
    DataGridLib.SORT_NONE
    ユーザーがクリックしても、効果はありません。

    コンパレーター関数で sortDirection フィールドにアクセスできます。

  • width: 列の幅をピクセル単位で指定する整数。

DataGrid のプロパティー

DataGrid ウィジェットでは、以下のプロパティーをサポートします。
  • behaviors は、関数参照の配列です。 それらの関数は、データ・グリッドがレンダリングされるときに各グリッド・セルに対して順次呼び出されます。このプロパティーはヘッダー・セルには適用されません。
    以下に、各関数が準拠する必要がある Delegate パーツを示します。
    Delegate 
       DataCellBehavior(grid DataGrid in, cell Widget in, rowData ANY in, 
                    rowNumber INT in, column DataGridColumn in)
    end
    grid
    データ・グリッド。
    cell
    グリッド・セルを表すウィジェット。このウィジェットは、HTML DIV タグに基づきます。
    rowData
    行データを表すレコード。
    rowNumber
    行番号 (1 からグリッドの行数までの範囲)。
    column
    列の記述を表すレコード。

    DataGrid のプロパティーは、headerBehaviorsbehaviorseditingBehaviors の順序で処理されます。

  • cellBorder: セル境界線の幅をピクセル単位で指定する整数値。セル境界線は列の右側のみにあり、このプロパティーの値は各行の最後の列には影響しません。デフォルト値は 1 です。
  • cellPadding: セルの内容の上部とセルの内容の左側の 2 つの場所に追加される余白の幅をピクセル単位で指定する整数値。デフォルト値は 4 です。
  • checkBoxListeners は、関数参照の配列です。ユーザーによるチェック・ボックスの選択またはクリア、または以下の関数 (setCheckedcheckAll、または unCheckAll) のいずれかの呼び出しに応答して、リスナー関数が実行されます。
    以下に、各リスナー関数が準拠する必要がある Delegate パーツを示します。
    Delegate 
       CheckBoxListener(grid DataGrid in) end
    end
    dataGrid
    データ・グリッド。
    現在のトピックの最初の例に関連して、ユーザーの選択に応じて銘柄記号を表示する次のリスナーを考えてください。
    function myListener(grid DataGrid in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getChecked() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
           end
       end
    end

    コードからのチェック・ボックスの設定の詳細については、この後の DataGrid の checkAll 関数および setChecked 関数の説明を参照してください。

  • checkBoxWidth: システム提供のチェック・ボックスの幅をピクセル単位で指定する整数値。 デフォルト値は 20 です。
  • columns: タイプ DataGridColumn のレコードの配列。
  • data: レコードの配列。プロパティーのタイプは ANY[] です。
  • dataLoader: 関数参照。その関数自体は以後データ・ローダーと呼ばれ、グリッドに表示する値のサブセットを提供するために実行時に繰り返し呼び出されます。通常、各サブセットはデータのページであり、showButtonBar プロパティーを true に設定して、ユーザーがクリックにより 1 つのページから次のページに移動できるようにします。データ・ローダーを使用することによって、同時にすべてのデータにアクセスするのではなく、ユーザーの要求に応答してデータのサブセットにアクセスします。
    以下に、各関数が準拠する必要がある Delegate パーツを示します。
    Delegate DataLoader(startRow int in, endRow int in, sortFieldName string in, 
                        sortDirection int in) returns(boolean)
    end
    startRow
    データを要求する最初の行の番号。
    endRow
    データを要求する最後の行の番号。
    sortFieldName
    ユーザーが最後にソートした列の name フィールドの値。ユーザーが列をソートしなかった場合は、この値はグリッドの左端の列の名前になります。
    sortDirection
    以下の定数の 1 つ。ユーザーの次のソート要求で行う内容を示します。
    DataGridLib.SORT_UP (初期デフォルト)
    ユーザーがクリックすると、列が昇順にソートされます。
    DataGridLib.SORT_DOWN
    ユーザーがクリックすると、列が降順にソートされます。
    DataGridLib.SORT_NONE
    ユーザーがクリックしても、効果はありません。
    戻り値は、指定された行に対してデータが既にロードされているかどうかを示します。ロジックでデータ配列を更新することを示すには、この値を false に設定します。データ・ローダーが不必要に実行されないようにするには、この値を true に設定します。 例えば、コードは次のようになります。
    if (dataComplete) 
       return(true);
    else
       // do the processing needed to add data to the specified rows
    end  

    この例では、表示可能なデータすべてをサービスが提供すると、dataComplete という名前の変数を true に設定することを想定しています。if ステートメントの条件により、データ・ローダーがアプリケーションで後続の処理を行わなくなります。

    以下に、追加の詳細を示します。
    • dataLoader プロパティーが dataGrid 宣言内で設定されている場合、on-construction 関数の前にデータ・ローダーが呼び出されます。いずれの場合でも、データ・プロパティーに値が割り当てられると必ず、およびその他の割り当ての間に、データ・ローダーが呼び出されます。
      初期化前にデータ・ローダーが Rich UI ハンドラー・フィールドにアクセスしないようにするには、dataGrid 宣言から data プロパティーおよび dataLoader プロパティーを省略します。on-construction 関数の最後に以下の 2 つのようなステートメントを組み込みます。
      myGrid.dataLoader = myDataLoader;
      myGrid.data = myDataList as ANY[];
    • データのサブセットをロードするプロセスは、データ・ローダーの呼び出しで始まり、値をデータ配列に配置しつつ続行されます。そのプロセスは、グリッド固有の render 関数を呼び出すことにより終了します。例えば、サービスからデータを取得するためにセットアップするコールバック関数内などです。
    • データ・ローダーが特定の行の集合に対するデータを受け取ることができない場合は、グリッド固有の cancelDataLoader 関数を呼び出します。例えば、サービス障害に対応するためにユーザーがセットアップする例外ハンドラーなどです。
    • ボタン・バーの使用は、ユーザーがボタン・バーをクリックするにつれてその配列の内容が提供される場合でも、処理の早い段階で完全なデータ配列を提供すると最も良く機能します。エレメント数を事前設定できますが、次のような処理を実行できます。データ配列には単一のエレメントを組み込み、その後ステートフル・サービスの最初の呼び出し中に最終的なエレメント数を取得します。

    dataLoader プロパティーの使用例については、『UI プログラムおよびデータ・グリッドを使用したエンドツーエンド処理』を参照してください。

  • editorBehaviors は、関数参照の配列です。それらの関数は、データ・グリッドがレンダリングされるときに各セルに対して順次呼び出されます。目的は、各セルにウィジェットを配置することです。
    以下に、各関数が準拠する必要がある Delegate パーツを示します。
    Delegate 
       EditorBehavior(grid dataGrid in, cell Widget in, rowData any in, 
                      rowNumber INT in, column DataGridColumn in, value ANY in) 
                      returns (Widget)
    end
    grid
    データ・グリッド。
    cell
    グリッド・セルを表すウィジェット。このウィジェットは、HTML DIV タグに基づきます。その内容には、formatters プロパティー設定により引き起こされる効果 (ある場合) が含まれます。
    rowData
    行データを表すレコード。
    rowNumber
    行番号 (1 からグリッドの行数までの範囲)。
    column
    列の記述を表すレコード。
    value
    セルの内容。この内容には、DataGridColumn formatters プロパティー設定により引き起こされる効果 (ある場合) が含まれます。

    戻り値は、ウィジェットまたは NULL です。

    DataGrid のプロパティーは、headerBehaviorsbehaviorseditingBehaviors の順序で処理されます。

  • headerBehaviors は、関数参照の配列です。それらの関数は、データ・グリッドがレンダリングされるたびに各ヘッダー・セルに対して順次呼び出されます。各関数は、behaviors プロパティーのエントリーで記述される Delegate パーツに基づいています。
  • pageSize: 表示する行数を示す整数。デフォルト値は 10 です。詳しくは、showButtonBar プロパティーおよび showScrollBar プロパティーのエントリーを参照してください。
  • rowHeight: 行の最小の高さをピクセル単位で指定する整数値。コンテンツがそれ以上の垂直方向のスペースを必要とする場合、その行の高さにそのニーズが反映されます。
  • selectionListeners は、関数参照の配列です。行選択が有効である場合、ユーザーによる行のクリック、または以下のいずれかの関数の呼び出しに応じて、選択リスナーが実行されます。setSelectionselectAll、または deSelectAll
    以下に、各選択リスナーが準拠する必要がある Delegate パーツを示します。
    Delegate 
       SelectionListener(grid DataGrid in) end
    end
    dataGrid
    関数に渡されるデータ・グリッド。
    現在のトピックの最初の例に関連して、ユーザーの選択に応じて銘柄記号を表示する次のリスナーを考えてください。
    function myListener(grid DataGrid in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getSelection() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
           end
       end
    end

    コード内の行選択の詳細については、この後の DataGrid の selectAll 関数および setSelection 関数の説明を参照してください。

  • sortListeners は、関数参照の配列です。ユーザーが列をソートすると、関数は順次呼び出されます。関数は、ソートが発生した場合にのみ呼び出されます。これは、DataGrid enableSort プロパティーの値が true である場合にのみ可能です。
    以下に、各関数が準拠する必要がある Delegate パーツを示します。
    Delegate 
       SortListener(grid DataGrid in, sortColumn DataGridColumn in) end
    end
    grid
    ソートされたデータ・グリッド。
    sortColumn
    ソートされた列。

    以下に関数の例を示します。

    function mySortListener(grid DataGrid in, sortColumn DataGridColumn in)
       syslib.writeStdOut("You sorted the " + sortColumn.displayName + " column. ");
    end
  • startRow: ボタン・バーが存在するときに最初のページに表示する行を示す整数。 デフォルト値は 1 です。詳しくは、showButtonBar のエントリーを参照してください。
  • selectionMode: ユーザーまたはコードが複数の行を選択できるかどうかを示す定数。この定数は、関数 setSelection および selectAll が複数の行を選択できるかどうかも指定します。次の値のいずれか
    DataGridLib.MULTIPLE_SELECTION (デフォルト)
    ユーザーは、単一行を選択するか、または以下の 2 つの方法のいずれかで複数行を選択できます。
    • CTRL キーを押したまま、最初の行の後で各行をクリックする。
    • SHIFT キーを押したまま、連続する行のセットの最後の行をクリックする。

    選択された行は、複数のグリッド・ページにわたってもかまいません。

    DataGridLib.SINGLE_SELECTION
    ユーザーは単一行を選択できます。2 番目の行を選択すると、最初の行は選択解除されます。
    DataGridLib.DISABLE_SELECTION
    ユーザーはどの行も選択できません。
  • showButtonBar: ボタン・バーを含めるかどうかを指定するブール値。これは、ユーザーがクリックして別のページ (次のページ、前のページ、最初のページ、または最後のページ) に移動できるグリッド下部のナビゲーション・バーです。showButtonBar プロパティーの値が true である場合、以下のプロパティーも関連します。
    • pageSize は、同時に表示する行数を指定します。
    • startRow は、ユーザーに対して表示する必要がある行を示します。例えば、20 行あり、pageSize = 4、startRow = 6 である場合、2 番目のページが表示され、行 6 が 2 番目の位置にあります。
    showButtonBar プロパティーは、以下の場合にのみ効果があります。
    • pageSize プロパティーの値がグリッドで使用可能な行数より大きい。かつ
    • showScrollBar プロパティーの値が false である。

    表示されているより多くの行数が使用可能であるときに showButtonBar プロパティーを false に設定し、showScrollBar プロパティーを true に設定しない場合、ユーザーは表示されていない行にアクセスできません。

  • showCheckBoxes: システム提供のチェック・ボックスを可視にするかどうかを示すブール値。 デフォルトは false です。チェック・ボックスが可視である場合、各行の左側に表示されます。
    ユーザーのチェック・ボックス選択は、実行時に showCheckBoxes を false に設定した場合でも保持されます。また、チェック・ボックスが可視であるかどうかには関係なく、コードでは常に次のようにすることができます。
    • setChecked 関数または checkAll 関数を呼び出すことにより、非表示のチェック・ボックスの一部またはすべてにチェック・マークを付けます。
    • getChecked 関数を使用して、各行のチェック・ボックスの状況を確認します。
  • showHeader: グリッドのヘッダーを表示するかどうかを示すブール値。デフォルトは true です。
  • showScrollBar: スクロール・バーが付いた行を表示し、ユーザーがその他の行にナビゲートできるようにするかどうかを示すブール値。デフォルトは false です。このプロパティーの値が true である場合、pageSize プロパティーは同時に表示する行数を指定し、showButtonBar プロパティーは効果がありません。
  • manageEditorBehaviors: editorBehavior 委譲によって返されるエディター動作ウィジェットのライフサイクルを、グリッドが管理するかどうかを示すブール値。デフォルトは true です。
  • refreshBehaviors: 関数参照の配列。 それらの関数は、データ・グリッドがレンダリングされるたびに順次呼び出されます。

DataGrid の関数

DataGrid ウィジェットでは、以下の関数をサポートします。
  • cancelDataLoader: データ・ローダーが必要とするデータを使用できないことを示すために、主として例外ハンドラーで使用されます。cancelDataLoader 関数により後続のデータ・ローダーの呼び出しが停止することはありませんが、以下の 2 つの効果があります。データ・ローダーを待機している特性であるアニメーションが終了し、前回提供されたデータでグリッドが再レンダリングされます。
  • checkAll: システム提供チェック・ボックスすべてにチェック・マークを付けます。非表示である場合でも、チェック・ボックスにチェック・マークを付けることができます。
  • deSelectAll: 現在選択されている行をすべて選択解除します。この関数は、システム提供チェック・ボックスから独立した行選択メカニズムの一部です。
  • getChecked: システム提供チェック・ボックスが選択されている行のデータを取得します。以下に、関数シグニチャーを示します。
    function getChecked() returns (any[])
    現在のトピックの最初の例に関連して、銘柄記号を表示する次のイベント・ハンドラーを考えてください。
    function myResponse (e event in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getChecked() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is checked.");
          end
       end
    end

    getChecked 関数は、DataGrid data プロパティーで参照されるレコードを取得します。 ただし、データが戻される順序は、ユーザーのソートの影響を受ける現在の表示によって異なります。

  • getCurrentPageIndex: 現在のページ番号を取得します。以下に、関数シグニチャーを示します。
    function getCurrentPageIndex() returns (int)
  • getPageCount: 使用可能なページ数を取得します。以下に、関数シグニチャーを示します。
    function getPageCount() returns (int)
  • getSelection: 現在選択されている行のデータを取得します。以下に、関数シグニチャーを示します。
    function getSelection() returns (any[])
    現在のトピックの最初の例に関連して、ユーザーのボタン・クリックに応じて銘柄記号を表示する次のイベント・ハンドラーを考えてください。
    function myResponse (e event in)
       columnRetrieve Stock[];
       columnRetrieve = grid.getSelection() as Stock[];
       numberOfRows int = columnRetrieve.getSize();
    
       if (numberOfRows > 0)
          for (i int from 1 to numberOfRows)
             sysLib.writeStdOut(columnRetrieve[i].Symbol + " is selected.");
          end
          grid.deSelectAll();
       else
          sysLib.writeStdOut("Select one or more rows.");                    
       end 
    end

    getSelection 関数は、DataGrid data プロパティーで参照されるレコードを取得します。 ただし、データが戻される順序は、ユーザーのソートの影響を受ける現在の表示によって異なります。

  • goToPage: 指定されたページを表示します。 1 以下のページ番号を指定すると、最初のページが表示されます。最後のページの番号以上のページ番号を指定すると、最後のページが表示されます。
    以下に、関数シグニチャーを示します。
    function goToPage(pageNumber int in)
  • selectAll: データ・グリッド内のすべての行を選択します。
  • setChecked: システム提供チェック・ボックスを 1 つ以上選択します。非表示である場合でも、チェック・ボックスを選択できます。
    以下に、関数シグニチャーを示します。
    function setChecked(selection any[] in)
    setChecked 関数を呼び出すときに、データ配列の要素を指定します。例えば、以下に、2 つの方法で setChecked 関数を呼び出す on-construction 関数を示します。
    function start()
    
    	  grid.setChecked([grid.data[2], grid.data[3]]);
    
       // alternative coding
       myAny ANY[] = [grid.data[2], grid.data[3]];
       grid.setChecked(myAny);
    end
  • setSelection: データ・グリッドの 1 つ以上の行を選択します。ほとんどの場合、レンダリングの前にグリッドを事前設定することが目的です。以下に、関数シグニチャーを示します。
    function setSelection(selection any[] in)
    setSelection 関数を呼び出すときに、データ配列の要素を指定します。例えば、以下に、2 つの方法で setSelection 関数を呼び出す on-construction 関数を示します。
    function start()
    
    	  grid.setSelection([grid.data[3], grid.data[2]]);
    
       // alternative coding
       myAny ANY[] = [grid.data[3], grid.data[2]];
       grid.setSelection(myAny);
    end

    行を選択する機能は、DataGrid selectionMode プロパティーの設定によって異なります。 例えば、selectionMode プロパティーが 1 つのみを許可している場合にコードが 2 つの行を選択しようとすると、setSelection 関数に処理依頼された最初のエントリーのみが選択されます。

  • unCheckAll: システム提供チェック・ボックスをすべてクリアします。非表示である場合でも、チェック・ボックスをクリアできます。

DataGrid のツールチップ

データ・グリッドのツールチップを組み込む場合は、次の 2 つの主要な選択肢があります。
  • カーソルがデータ・グリッド上に移動されたときに必ずツールチップを表示し、しかもセル、行、または列によって表示を変更しない場合は、データ・グリッド全体を 1 つのツールチップに割り当てます。詳しくは、『Rich UI ツールチップ』を参照してください。ツールチップをグローバル・ウィジェットと宣言し、一部の関数 (例えば、on-construction 関数、あるいは behaviors または headerBehaviors プロパティーで識別される関数) でそれを使用可能にする (アクティブにする) こともできます。
  • ヘッダー外の指定されたセル、行、または列で異なるツールチップ情報をツールチップで指定する場合は、データ・グリッド・ツールチップを指定できます。データ・グリッド・ツールチップはツールチップに類似していますが、グリッド・ツールチップ・プロバイダー関数を常に指定する必要があります。この関数は、ユーザーに表示する内容を提供するボックスを戻します。ツールチップは、1 つのみ指定できます。
以下に、データ・グリッド・ツールチップを作成するプロセスを説明します。
  • 次の例のように、グリッド・ツールチップ・ハンドラーをグローバルに宣言します。 このグリッド・ツールチップでは、グリッド・ツールチップ・プロバイダー (呼び出す関数) と遅延 (移動の開始とプロバイダーの呼び出しの間のミリ秒数) を参照しています。
    gridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };
    この宣言には、次の import ステートメントを組み込む必要があります。
    import egl.rui.widgets.DataGridToolTip;
  • behaviors プロパティー用の配列を割り当てる場合は、グリッド・ツールチップ・ハンドラー内の関数を参照してください。この例では、関数は gridToolTip.setToolTips です。
  • DataGridToolTip プロバイダー・プロパティーに指定された名前でグリッド・ツールチップ・プロバイダー関数を作成します (この例では、この関数は tooltipText)。グリッド・ツールチップ・プロバイダー関数には、パラメーターおよび戻り値特性があります。次の Delegate パーツで概説します。
    Delegate DataGridTooltipTextProvider(rowData any in, fieldName String in, 
                                         td Widget in) returns(Box)
    end
    row
    関数に提供される行。この入力引数を使用して、 具体的な値にアクセスできます。例えば、データが以下の内容であるケースについて説明します。
    stocks Stock[] = [
    		 new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, 
    		 new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}
    	]; 
    プロバイダー関数内で、次のようなコードを記述することにより、どの行の上にカーソルがあるかを判別できます。
    if (rowData.Quote as int == 200)
       // place content in a box (the tooltip) and return the tooltip
    end
    fieldName
    関数に提供される列の名前。
    td
    グリッド・セルを表す内部ウィジェット。
  • データ・グリッド・ツールチップを使用可能にする必要はありません。宣言すると、ただちに使用可能になります。
  • 『Rich UI メモリー管理』に記載されている問題に注意してください。

次に、ご使用のワークスペースで試すことができる例を示します。

package client;

import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.DataGrid;
import com.ibm.egl.rui.widgets.DataGridColumn;
import com.ibm.egl.rui.widgets.DataGridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import egl.ui.rui.RUIHandler;

Record Stock 
   Symbol STRING;
   Quote  DECIMAL(5,2); 
   NumShares INT;
end

handler MyDataGrid1 type RUIhandler { initialUI = [ grid ], 
                                      onConstructionFunction = start }
   stockList Stock[] = [
      new Stock{Symbol = "Company1", Quote = 100.00, NumShares = 40 }, 
      new Stock{Symbol = "Company2", Quote = 200.00, NumShares = 10 },
      new Stock{Symbol = "Company3", Quote = 100.00, NumShares = 40 } ]; 

   grid DataGrid { 
      data = stockList as any[],
      behaviors = [myDataGridToolTip.setToolTips],
      pageSize = 15,
      columns = [
         new DataGridColumn { name = "Symbol", displayName = "Symbol Display"},    
         new DataGridColumn { name = "Quote", displayName = "Quote Display"},
         new DataGridColumn { name = "NumShares", displayName = "NumShares Display"  }]};

   myDataGridTooltip DataGridTooltip { provider = tooltipText, tooltip.delay = 1000 };

   tooltipBox Box{columns=1, width=475};

   function start()
   
   end
    
   function tooltipText (rowData any in, fieldName String in, td Widget in) returns (Box)
	
      tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };
      tooltipBox.children = [ tooltipArea ];	
      tooltipArea.text = 
      "In function tooltipText (a tooltip provider):" + 
      "¥n   fieldName is the column name ('"+fieldName+"')." +
      "¥nYou can access cell content:" +
      "¥n   td.innerText is '"+td.innerText+"'. ¥nThanks to EGL dynamic access" +
      "¥n   rowData[fieldName] is also '"+rowData[fieldName] + "'."; 
      return (tooltipBox); 
   end
end

フィードバック