Rich UI Grid と GridTooltip

Rich UI grid ウィジェットで、値の配列を表形式で定義します。新規開発の場合は、Rich UI dataGrid ウィジェットを使用します。これは、パフォーマンスと機能にすぐれており、『Rich UI の DataGrid および DataGridTooltip』で説明されています。

このグリッド・ウィジェットでは、次の詳細情報を設定できます。
  • レコードの配列。レコードのフィールド値は、レコードにつき 1 行で、対応するグリッド列に表示されます。
  • 動作。それぞれ関数参照の配列を受け入れるフィールドです。ユーザーがセルをクリックすると、参照される関数が配列エレメント順に実行されます。各関数は、セル特性を更新できます。 この結果、スタイル特性と、列でソートしたりツールチップを表示したりするアクションを指定できるようになります。(ツールチップは、吹き出しヘルプです。 吹き出しヘルプとは、ユーザーがマウスを止めたときに、カーソルがグリッドの特定の領域にある場合に表示されるボックスです。)

    CellBehavior という名前の Delegate パーツは、グリッド・ウィジェットの behaviors フィールドおよび headerBehaviors フィールドで参照されている各関数の特性を記述します。

    Delegate 
       CellBehavior(grid Grid in, cell TD in, row any in, 
                    rowNumber int in, column GridColumn in)
    end
    grid
    関数に渡されるグリッド。
    cell
    グリッド・セルを表す内部ウィジェット。このウィジェットは、HTML TD (テーブル・データ) タグに基づきます。
    row
    行データを表すレコード。(後述するように、グリッドの data プロパティーを設定することによって値を割り当てます。このプロパティーは、指定したタイプのレコードの配列を使用します。指定されたグリッド行の値は、その配列のエレメントから取得されます。)
    rowNumber
    行番号。この範囲は 1 から、グリッドの行数を含む totalRows プロパティーの値までです。
    column
    列の記述を表すレコード。(後述するように、グリッドの columns プロパティーに GridColumn タイプのレコードの配列を設定することによって列を記述します。指定された列の説明は、その配列のエレメントから取得されます。)
Rich UI には、動作フィールドで参照できる多数の関数が用意されています。詳細については、com.ibm.egl.rui プロジェクトの EGLSource フォルダーの com.ibm.egl.rui.widgets パッケージにある以下のファイルを参照してください。
  • GridBehaviors.egl
  • GridSelector.egl
  • GridSorter.egl
  • GridToolTip.egl (再度、このトピックで後述します)

『Rich UI メモリー管理』に記載されている問題に注意してください。

サポートされるプロパティーおよび関数

グリッド・ウィジェットでは、以下のプロパティーをサポートします。
  • data。ANY 型であり、開発者によって定義された レコードの配列を保持します。指定されたレコード・フィールドのデータは、フィールドの名前が、columns プロパティーに指定されたグリッド列の名前と一致する場合にのみ、グリッドに表示されます。グリッド宣言では、data プロパティーを他のプロパティーの後にリストします。
    以下に例を示します。
    stocks Stock[] = [
    		 new Stock{Symbol = "Company1", Quote = 100, NumShares = 40, SelectQuote = false}, 
    		 new Stock{Symbol = "Company2", Quote = 200, NumShares = 10, SelectQuote = false}, 
    	]; 
    
    Grid myGrid {..., data = stocks as any[]};
  • columns。以下のタイプのレコードの配列を保持します。
    Record GridColumn
       displayName String;
       name String;
       width int;
    end
    displayName
    列タイトル。このフィールドが指定されていない場合、列タイトルは name フィールドの値です。
    name
    デフォルトの列タイトル。また列の値を提供する データ・レコード・フィールドの名前でもあります。
    width
    列のピクセル数。
  • totalRows。グリッドの行数を含む読み取り専用プロパティー。
  • behaviorsCellBehavior 型の委譲の配列です。ヘッダー行以外の行をユーザーがクリックするたびに起動される関数の配列を指定します。関数は、配列に指定された順に起動されます。
  • headerBehaviorsCellBehavior 型の委譲の配列です。ヘッダー行をユーザーがクリックするたびに起動される関数の配列を指定します。関数は、配列に指定された順に起動されます。
以下の規則が適用されます。
  • children プロパティーまたは initialUI プロパティーで参照されるウィジェットを除き、Rich UI では、値の参照に先立ってその値を宣言する必要があります。 grid プロパティーでグリッド宣言の外部にある配列を参照する場合は (例えば、先述の dataプロパティー)、その配列をグリッド宣言より前に指定する必要があります。
  • グリッドを宣言するときには、data プロパティーの前に behaviorsheaderBehaviors、および column プロパティーを確実にリストします。
  • 関数にステートメントを記述するときに、behaviors または headerBehaviors プロパティーの値を変更する場合は、グリッド固有の関数 layouts() を起動してウィジェットをリセットしてください。

Grid (ただし GridTooltip は除く) との関連で、サポートされる他のプロパティーおよび関数は、『ウィジェットのプロパティーと関数』で説明されています。

このウィジェットを使用するには、以下のステートメントの一部またはすべてが必要です。
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridSorter;
import com.ibm.egl.rui.widgets.GridToolTip;

グリッド・ツールチップ

グリッドのツールチップを組み込む場合は、次の 2 つの主要な選択肢があります。
  • カーソルがグリッド上に移動されたときに必ずツールチップを表示し、しかもセル、行、または列によって表示を変更しない場合は、グリッド全体を 1 つのツールチップに割り当てます。詳細については、『Rich UI Tooltip』を参照してください。ツールチップをグローバル・ウィジェットと宣言し、一部の関数 (例えば、on-construction 関数、あるいは behaviors または headerBehaviors プロパティーで識別される関数) でそれを使用可能にする (アクティブにする) こともできます。
  • ヘッダー外の指定されたセル、行、または列で異なるツールチップ情報をツールチップで指定する場合は、グリッド・ツールチップを指定できます。グリッド・ツールチップはツールチップに類似していますが、グリッド・ツールチップ・プロバイダー関数を常に指定する必要があります。この関数は、ユーザーに表示する内容を提供するボックスを戻します。

    グリッド・ツールチップは、グリッドにつき 1 つのみ指定できます。

以下に、グリッド・ツールチップを作成するプロセスを説明します。
  • 次の例のように、グリッド・ツールチップ・ハンドラーをグローバルに宣言します。 このグリッド・ツールチップでは、グリッド・ツールチップ・プロバイダー (呼び出す関数) と遅延 (移動の開始とプロバイダーの呼び出しの間のミリ秒数) を参照しています。
    gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };
    この宣言には、次の import ステートメントを組み込む必要があります。
    import egl.rui.widgets.GridToolTip;
  • behaviors プロパティー用の配列を割り当てる場合は、グリッド・ツールチップ・ハンドラー内の関数を参照してください。この例では、関数は gridToolTip.setToolTips です。
  • GridToolTip プロバイダー・プロパティーに指定された名前でグリッド・ツールチップ・プロバイダー関数を作成します (この例では、この関数は tooltipText)。グリッド・ツールチップ・プロバイダー関数には、パラメーターおよび戻り値特性があります。次の Delegate パーツで概説します。
    Delegate GridTooltipTextProvider(row any in, fieldName String in, td TD 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 (row.Quote as int == 200)
       // place content in a tooltip and return the tooltip
    end
    fieldName
    関数に提供される列の名前。
    td
    グリッド・セルを表す内部ウィジェット。このウィジェットは、HTML TD (テーブル・データ) タグに基づきます。
  • グリッド・ツールチップを使用可能にする必要はありません。宣言すると、ただちに使用可能になります。

次は、ヘッダー行用のツールチップと、その他場所のグリッド・ツールチップが含まれている例で、ご使用のワークスペースで試すことができます。

import com.ibm.egl.rui.widgets.Box;
import com.ibm.egl.rui.widgets.Grid;
import com.ibm.egl.rui.widgets.GridBehaviors;
import com.ibm.egl.rui.widgets.GridColumn;
import com.ibm.egl.rui.widgets.GridSelector;
import com.ibm.egl.rui.widgets.GridTooltip;
import com.ibm.egl.rui.widgets.TextArea;
import com.ibm.egl.rui.widgets.Tooltip;
import egl.ui.rui.Widget;


Record Filler
	 F1 String;
	 F2 String;
	 F3 String;
end

handler myGrid1 type RUIhandler {initialUI = [ myBox ]}
	
	 gridSelector GridSelector { color = "lightgreen" };		
	 filler Filler[] = [
	    new Filler{F1 = "R3, C1", F2 = "R3, C2", F3 = "R3C3"}, 
		  new Filler{F1 = "R4, C1", F2 = "R4, C2", F3 = "R4C3"} 
	 ];
	
	 myFirstGrid Grid{
      behaviors 		= [
 			   GridBehaviors.whiteCells,
 			   GridBehaviors.alternatingColor,
 			   GridBehaviors.tightCells,
 			   gridSelector.enableSelection,
			   gridTooltip.setTooltips
      ],
      headerBehaviors = [
         GridBehaviors.grayCells,
         headerTooltips
      ],
		  columns = [
			   new GridColumn{name = "F1", displayName = "Column 1 Header", width=120},
         new GridColumn{name = "F2", displayName = "Column 2 Header", width=120},
			   new GridColumn{name = "F3", width=50}
		  ],
		  data = [
			   new Dictionary { F1 = "Row 1, Column 1", F2 = "Row 1, Column 2", F3 ="me"},
			   new Dictionary { F1 = "Row 2, Column 1", F2 = "Row 2, Column 2", F3 = "you"},
			   filler[1], filler[2]
		  ]
		
   };
	
   myBox Box{ backgroundcolor = "peachpuff", padding=8, 
              children=[myFirstGrid], marginbottom=15};
	
   HtooltipText String = "This is a Header tooltip";	
	 headerTooltip Tooltip { text = HtooltipText, delay=1000 };
	
   function headerTooltips(grid Grid in, td Widget in, row any in, 
                           ignoreRowNumber int in, column GridColumn in) 
      headerTooltip.enable(td);
   end
	
   gridTooltip GridTooltip { provider = tooltipText, tooltip.delay = 1000 };
   tooltipArea TextArea { width=450, height=100, paddingLeft=7, marginLeft=7 };

   function tooltipText(row any in, fieldName String in, td Widget in) returns(Box)
	    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   row[fieldName] is also '"+row[fieldName] + "'."; 
          return (tooltipBox);
   end
	
   tooltipBox Box {columns=1, width=475, children = [ tooltipArea ]};
end