|| ListViewerクラス (フレームワークのGraphicクラスに定義)

{ListViewer
  width = {make-elastic preferred-size = 100cm},
  height = {make-elastic preferred-size = 100cm},
  name = “sample-list-viewer”
}

|| 以下はScreenクラスに記述します

def list-viewer = {self.find-graphic-by-name “sample-list-viewer”} asa ListViewer

|| list-item-creation-proc オプションを定義します。
|| list-item-creation-proc オプションは{proc {val:any}:ListItem}型で、
|| val変数に渡されてくる各行のデータを
|| どのようにレイアウトするかを定義します。
|| ListViewItemDataのlabelアクセサに
|| {HBox}などのコンテナクラスを使用して自由に定義できます。

set list-viewer.list-item-creation-proc = 
  {proc {val:any}:ListItem
    def label = {HBox val & ” 番目のデータ”, valign = “center”}
    {return 
      {ListViewItemData 
        width = 1m, 
        label = label,
        {on Action do
          {popup-message val & ” 番目のデータ”}
        }
      }
    }
  }

|| data-modelオプションを定義します。
|| data-modelオプションはListModelView型で、
|| 表示されるデータを管理しています。
|| データはListModelViewのdata-sourceアクセサに
|| ConnectedListModel型のオブジェクトで持ち、
|| データの追加はこのオブジェクトに対して行います。
|| ListModelViewSetCountRequestイベントハンドラでは、
|| ListViewer下部で上向きにフリックしたときの
|| 動作について定義ができます。
|| ここでは項目を10件追加しています。

def connected-list-model = {ConnectedListModel}
set list-viewer.data-model =
  {DefaultListModelView
    page-size = 10,
    max-source-index = 9,
    connected-list-model,
    {on e:ListModelViewSetCountRequest do
      def read-from = connected-list-model.size
      {for i:int = read-from below read-from + 10 do
        {connected-list-model.append-quietly i}
      }
    }
  }
set list-viewer.pull-up-handle.ready-message = “続きを読む”
{for i:int = 0 below 10 do
  {connected-list-model.append-quietly i}
}
{list-viewer.data-model.set-item-count 10}

|| 使用するデータとして以下のRecordSetを用意します。
|| North、East、South、West各地域の1月から4月までのデータ列です。

def record-set:RecordSet = 
  {RecordSet 
    {RecordFields 
      {RecordField “Region”, domain = String},
      {RecordField “M1”, caption = “1月”, domain = int},
      {RecordField “M2”, caption = “2月”, domain = int},
      {RecordField “M3”, caption = “3月”, domain = int},
      {RecordField “M4”, caption = “4月”, domain = int}
    },
    {RecordData Region = “North”, M1 = 100, M2 = 140, M3 = 130, M4 = 90},
    {RecordData Region = “East”, M1 = 110, M2 = 140, M3 = 170, M4 = 150},
    {RecordData Region = “South”, M1 = 140, M2 = 100, M3 = 130, M4 = 190},
    {RecordData Region = “West”, M1 = 160, M2 = 190, M3 = 140, M4 = 160}
  }

|| BarLayerを使用して棒グラフを表示します。
|| LineLayerを使用すれば折れ線グラフで表示できます。
|| legend-location = “bottom”として、凡例を下部に表示しています。

let chart-box:ChartBox =
  {ChartBox
    {LayeredChart
      legend-location = “bottom”,
      width = 4.5cm,
      height = 7.5cm,
      {BarLayer
        record-set,
        “M1”,
        “M2”,
        “M3”,
        “M4”,
        x-axis-data = {ChartDataSeries record-set, “Region”}
      }
    }
  }