Matrix Grid コントロールを使用する方法

1 時間/日あたりの歯科医の患者を一覧表示したり、テレビの番組表を表示したりするなど、2 次元の情報を 1 つの画面に表示したい場合があります。このような平行/垂直スクロール付きのインターフェースの作成は非常に複雑なため、実装するのに一連の手順を実行する必要があります。この問題は、2 次元のグリッドにデータを表示する Matrix Grid コントロールを使用することで解決できます。

使用方法

Matrix Grid コントロールは、グリッドコントロールの一種です。使用するには、画面にグリッドを挿入し、[ Control Type ] プロパティの値を Matrix Grid に設定する必要があります。
Matrix Grid コントロールは、表示するデータを決定し、外観を制御するために、一連のカスタムプロパティを定義します。次の 3 つの項目を設定する必要があります: X 軸、Y 軸、およびそのデータ (各データは X および Y の位置に表示)。
また、グリッドであるため、Grid コントロールから次のような動作を継承します:

Matrix Grid のデータ項目は、GeneXus のレイアウトエディターでグリッドに定義された項目レイアウトを考慮して描画されます。
グリッドの既定のアクションも利用でき、想定どおりに動作します。つまり、Matrix Grid 内の項目をタップすると、その項目の既定のアクションが実行されます。

コンポーネント

このタイプのグリッドは、次の 3 つの要素から構成されます:

X 軸
Y 軸
データ (各データ要素は X および Y の位置を示す)

それぞれに対して、次の 3 つの項目を指定する必要があります:

サイズ
縦横
データ

次のプロパティを使用して指定する必要があります。

全般的なプロパティ

このプロパティのセットは、各データのグリッドのセルのサイズを指定します。

プロパティ	説明
Selection Type
Data Cell Height	データセルの高さを指定します。
Selected Row Height	「選択済み」ラベルが付いた行の高さを指定します。
Data Cell Width	データセルの幅を指定します。

セレクション軸のプロパティ

X 軸 — 横軸の値を参照します。

プロパティ	説明
X-Axis Width	X 軸の行の幅を指定します。
X-Axis SDT	X 軸の値を含む SDT を指定します。
X-Axis Value Field Specifier	識別子として使用する値を含む SDT のアイテムを指定します。
X-Axis Title Field Specifier	タイトルに使用する SDT のアイテムを指定します。
X-Axis Description Field Specifier	説明に使用する SDT のアイテムを指定します。

例

X 軸を 30 分単位 (1 日の時間) でロードします。これが SDT &TimeAxis のロードです。&TimeAxis は [ X-Axis SDT ] プロパティに割り当てられています。

//時間軸をロードする
&TimeAxis = new()
&vTime = YMDHMStoT(&DayReference.Year(),&DayReference.Month(),&DayReference.Day(),0,0,0)
for &i=1 to 60 * 24  step 30 //24 時間を分に変換
  &TimeAxisItem = new ()
  &TimeAxisItem.Id = &vTime.Hour() * 60 + &vTime.Minute()
  //24 時間から 12 時間に変換
  &ampm = iif(&vTime.Hour() >= 12, "pm", "am")
  &vTimeHour = iif(&vTime.Hour() >= 12, &vTime.Hour() - 12 , &vTime.Hour())
  &vTimeHour = iif(&vTimeHour = 0, 12, &vTimeHour)
 
  &TimeAxisItem.Description = format("%1:%2 %3", &vTimeHour, trim(iif(&vTime.Minute()=0,"00",&vTime.Minute().ToString())), &ampm)
 
  &TimeAxis.Add(&TimeAxisItem)
  &vTime = &vTime.AddMinutes(30)
endfor

データプロバイダーを使用した場合:

TimeAxis
{
   &vTime = YMDHMStoT(&DayReference.Year(),&DayReference.Month(),&DayReference.Day(),0,0,0)
   TimeAxisItem input &i = 1 to 60 * 24  step 30 //24 時間を分に変換
   {
      Id = &vTime.Hour() * 60 + &vTime.Minute()
      //24 時間を 12 時間に変換
      &ampm      = iif(&vTime.Hour() >= 12, "pm", "am")
      &vTimeHour = iif(&vTime.Hour() >= 12, &vTime.Hour() - 12 , &vTime.Hour())
      &vTimeHour = iif(&vTimeHour = 0, 12, &vTimeHour)
 
      Description = format("%1:%2 %3", &vTimeHour, trim(iif(&vTime.Minute()=0,"00",&vTime.Minute().ToString())), &ampm)
   }
   &vTime = &vTime.AddMinutes(30)
}

Y 軸 — 縦軸の値を参照します。

プロパティ	説明
Y-Axis Height	Y 軸の列の高さを指定します。
Y-Axis SDT	Y 軸の値を含む SDT を指定します。
Y-Axis Value Field Specifier	識別子として使用する値を含む SDT のアイテムを指定します。
Y-Axis Title Field Specifier	タイトルに使用する SDT のアイテムを指定します。
Y-Axis Description Field Specifier	説明に使用する SDT のアイテムを指定します。
Y-Axis Selection Flag Field Specifier	行が選択されているかどうかを示す SDT のアイテムを指定します。

例

Y 軸を 1 日単位で 2 週間分ロードします。
現在のデータに対応する行を選択済みとしてマークし、「Today」というサブタイトルを追加します。

//日付軸をロードする
&DayAxis = new()
&FirstDayOfWeek = today()
&varFirstDayOfWeek =ymdhmstot(&FirstDayOfWeek.Year(),&FirstDayOfWeek.Month(),&FirstDayOfWeek.Day(),0,0,0)
&varFirstDayOfWeekD =ymdtod(&FirstDayOfWeek.Year(),&FirstDayOfWeek.Month(),&FirstDayOfWeek.Day())
for &i = 0 to 13//参照日に基づく週の 7 日間
  &DayAxisItem = new()
  &DayAxisItem.Id = &FirstDayOfWeek.AddDays(&i)
  &DayAxisItem.Title = upper(&DayAxisItem.Id.DayOfWeekName())
  &DayAxisItem.Title += format("%1%2 DE %3", newline(), &DayAxisItem.Id.Day(), upper(&DayAxisItem.Id.MonthName()))
  &DayAxisItem.Selected = iif(&DayAxisItem.Id = Today(), TRUE, FALSE)
  if (&DayAxisItem.Selected)
   &DayAxisItem.Subtitle = "Today"
  endif
  &DayAxis.Add(&DayAxisItem)
endfor

データプロバイダーを使用した場合:

DayAxis
{
   &FirstDayOfWeek     = today()
   &varFirstDayOfWeek  = ymdhmstot(&FirstDayOfWeek.Year(),&FirstDayOfWeek.Month(),&FirstDayOfWeek.Day(),0,0,0)
   &varFirstDayOfWeekD = ymdtod(&FirstDayOfWeek.Year(),&FirstDayOfWeek.Month(),&FirstDayOfWeek.Day())
   DayAxisItem input &i = 0 to 13//参照日に基づく週の 7 日間
   {
      Id        = &FirstDayOfWeek.AddDays(&i)
      &Title    = upper(&DayAxisItem.Id.DayOfWeekName())
      &Title    = &Title + format("%1%2 DE %3", newline(), &DayAxisItem.Id.Day(), upper(&DayAxisItem.Id.MonthName()))
      Title     = &Title
      &Selected = iif(&DayAxisItem.Id = Today(), TRUE, FALSE)
      Selected  = &Selected
      Subtitle  = iif(&Selected, "Today", "")
   }
}

X-軸のデータ — 横軸のデータの位置を参照します。

プロパティ	説明
X-Data From Attribute	開始位置を示す項目属性または変数 ( [ X-Axis Value Field Specifier ] で指定されている識別子の値を持つ) を指定します。
X-Data From Field Specifier
X-Data To Attribute	終了位置を示す項目属性または変数 ( [ X-Axis Value Field Specifier ] で指定されている識別子の値を持つ) を指定します。
X-Data To Field Specifier

Y-軸のデータ — 縦軸のデータの位置を参照します。

プロパティ	説明
Y-Data From Attribute	開始位置を示す項目属性または変数 ( [ Y-Axis Value Field Specifier ] で指定されている識別子の値を持つ) を指定します。
Y-Data From Field Specifier
Y-Data To Attribute	終了位置を示す項目属性または変数 ( [ Y-Axis Value Field Specifier ] で指定されている識別子の値を持つ) を指定します。

例

Load イベントで、データを配置する X、Y を指定し、各セルに対して次の値をロードします:
値 X= &TimeFromNumeric (開始時間) および &TimeToNumeric (終了時間)
値 Y= CartaProgramacionFecha

Event Grid1.Load
  &timeFromNumeric = val(CartaProg_Hora_Inicio.Substring(1,2)) * 60 + val(CartaProg_Hora_Inicio.Substring(4,2))
  &timeToNumeric = val(CartaProg_Hora_Fin.Substring(1,2)) * 60 + val(CartaProg_Hora_Fin.Substring(4,2))
EndEvent

例

以下は、ベーステーブルなしの別のロード例です:

Event Grid1.Load
  &XAxisfrom = <XAxis position to start showing data>
  &XAxisto = <XAxis position where data finishes>
  &YAxisfrom = <YAxis position to start showing data>
  &YAxisto = <YAxis position where data finishes>
  &DataToShow = <Value showed in grid position (x,y)>
  load
  &XAxisfrom = <XAxis position to start showing data>
  &XAxis = <XAxis position where data finishes> 
  &YAxisfrom =<YAxis position to start showing data>
  &YAxis = <YAxis position where data finishes> 
  &DataToShow = <Value2 showed in grid position (x2,y2)>
  load
Endevent

これは 2 つの値をロードする例です。必要なだけ値をロードできます。

外観

詳細については、「スマートデバイスの Matrix テーマクラス」を参照してください。