APIの説明・サンプル(ListViewer、Chart、Shape)

Caede2.0.0で追加されたリストビューア、チャート、シェイプのサンプルをご紹介します。

リストビューア

Caede2.0.0ではリストビューア(ListViewer)が実装されました。
これをもちましてリストビュー(ListView)は非推奨となり、Caede2.1.0にて廃止されました。

|| 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}

以上のコーディングで以下のような動作が実現できます。

起動時。10件が読み込まれています。

末尾で上に向けてフリックすると、

追加で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”}
      }
    }
  }

以上のコーディングでこのような棒グラフが表示できます。

chart1.png

BarLayerの代わりにLineLiyerとすると、同じデータから折れ線グラフが表示できます。

chart2.png

シェイプ

Curlと同様にShapeが使用できます。

def canvas = {Canvas background = “aqua”}
{canvas.add
  {ShapeGroup
    || 四角形
    {RectangleShape
      {GRect 0in, 1in, 0in, 0.6in},
      color = “pink”
      border-color = “brown”
      border-width = 3px
    },
    || 四角形(境界が点線)
    {RectangleShape
      {GRect 0.5in, 0.6in, 0in, .2in},
      translation = {Distance2d 0.6in, 0.3in},
      color = “transparent
      border-color = “brown”,
      border-width = 1px
      border-line-style = “dot”
    },
    || 文字
    {TextShape
      “RectangleShape”,
      translation = {Distance2d 0.6in, 0.3in},
      color = “brown”,
      valign = “top”
      halign = “center
    },
    translation = {Distance2d 0.3in, 1.4in}
  }
}
{canvas.add
  {ShapeGroup
    || 円
    {EllipseShape
      {GRect .5in, .5in, .5in, .5in},
      border-width = 2px, 
      border-color = “brown”,
      color = “skyblue”,
      translation = {Distance2d .6in, .6in}
    },
    || 扇形
    {EllipseShape
      {GRect .5in, .5in, .5in, .5in},
      border-width = 2px,
      border-color = “brown”,
      color = “orange”,
      start-angle = 45deg,
      stop-angle = 120deg,
      wedge? = false,
      translation = {Distance2d .6in, .6in}
    },
    || 文字(60度傾斜)
    {TextShape
      “EllipseShape”,
      translation = {Distance2d .5in, .5in},
      color = “brown”,
      rotation = -60deg,
      valign = “top”
      halign = “center”
    }
  }
}

上記のコードで以下のような画面を表示できます

shapes.png