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

使用方法

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

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

コンポーネント

このタイプのグリッドは、次の 3 つのエレメントから構成されます:

• X 軸
• Y 軸
• データ (各データエレメントは X および Y の位置を示す)

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

• サイズ
• 縦横
• データ

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

全般的なプロパティ

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


 

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

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

例

例 1 
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)
}

例 2
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", "")
   }
}

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

例 3
グリッドの 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

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

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 テーマクラス」を参照してください。