Rich UI Grid と GridTooltip

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

このグリッド・ウィジェットでは、次の詳細情報を設定できます。
Rich UI には、動作フィールドで参照できる多数の関数が用意されています。詳細については、com.ibm.egl.rui プロジェクトの EGLSource フォルダーの com.ibm.egl.rui.widgets パッケージにある以下のファイルを参照してください。

『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

フィードバック