APIの説明・サンプル（グリッド）

Caede2.1.0にてグリッド用の関連APIが提供されました。

対応API

+ テーブル本体
  SimpleDataTable

+テーブルに登録する行のオブジェクト
  SingleSimpleDataRow
　CompoundSimpleDataRow
　※CompoundSimpleDataRowは複数行にまたがるセル(rowspan)を設定するに使用

+行オブジェクトに登録するセルのオブジェクト
  SimpleDataTableContent
　※ボタン、チェックボタン、画像を指定する際に使用

+テーブルに登録する列のオブジェクト
  SimpleDataColumn
　※列単位で背景色やボーダを指定する際に使用します。

+ テーブル本体がフィールドとして持つ、行と列のコレクション
  SimpleDataColumnCollection
  SimpleDataRowCollection

　※SimpleDataTableの行列を管理するコレクションのフィールド名
　　header-rows、footer-rows、rows、columns

+イベント
  SimpleDataCellTap
  SimpleDataRowTap
  SimpleDataRowTapHold

+RecordSetとの結合
  SimpleDataConnecter

 

実行イメージ

caede21-grid1.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ソースコード（SimpleDataTableの定義）

グリッドはSimpleDataTableクラスを用いて実装します。

通常、レイアウト部分のクラスは Graphicクラスに定義しますが、SimpleDataTableでは、Screenクラスにて定義します。

SimpleDataTableにイベントも定義可能です。

||
|| レイアウト部分
|| Graphicクラス（GridGraphic）
||
{define-class public GridGraphic {inherits Frame}
  {constructor public {default}
    {construct-super
        {VBox
            halign = “center”,
            width = {make-elastic preferred-size = 1m},
            || Header
            {HBox
                valign = “center”,
                width = {make-elastic},
                height = 70px,
                margin = 5px,
                background = “#232323”,
                {TextFlowBox
                    name = “tflb-001”,
                    color = “red”,
                    “伝票番号”
                },
                {Fill width = 30px},
                {TextField
                    name = “kensakukey01”
                },
                {Fill width = 15px},
                {CommandButton
                    name = “cb1”,
                    height = 70px,
                    width = 200px,
                    label = “検索（SingleSimpleDataRow）”
                },
                {CommandButton
                    name = “cb2”,
                    height = 70px,
                    width = 200px,
                    label = “検索（CompoundSimpleDataRow）”
                },
                {Fill}
            },
            || Body（グリッドを格納する部分）
            {VBox
                halign = “center”,
                background = “#f3f3f3”,
               
                {VBox
                    name = “vb-result-list”
                }
            }
        }
    }
  }
}

||
|| ロジック部分
|| Screenクラス（GridScreen）
||
{define-class public GridScreen {inherits {Screen-of GridGraphic}}
 
  {constructor public {default}
   
    def cb1 = {self.find-graphic-by-name “cb1”} asa CommandButton
    def cb2 = {self.find-graphic-by-name “cb2”} asa CommandButton
    def vb-result-list = {self.find-graphic-by-name “vb-result-list”} asa VBox

    || SimpleDataTable
    def simple-data-table = {SimpleDataTable
                                name = “sdt1”,
                                width =
                                    {make-elastic
                                        minimum-size = 10cm,
                                        preferred-size = 1m
                                    },
                                height =
                                    {make-elastic
                                        minimum-size = 10cm,
                                        preferred-size = 1m
                                    }
                                ,{on e:SimpleDataCellTap do
                                     {dump                                      
                                         “SimpleDataCellTap”,
                                         e, ” “, e.row, ” “, e.internal-row-index,
                                         ” “, {simple-data-table.rows.find e.row}}
                                    
                                     {show-toast “SimpleDataCellTap”}
                                     {popup-message “SimpleDataCellTap”}
                                    
                                 },
                                {on e:SimpleDataRowTap do
                                    {dump
                                        “SimpleDataRowTap”,
                                        e, ” “, e.row, ” “, e.internal-row-index,
                                        ” “, {simple-data-table.rows.find e.row}}
                                   
                                    {show-toast “SimpleDataRowTap”}
                                    {popup-message “SimpleDataRowTap”}
                                   
                                },
                                {on e:SimpleDataRowTapHold do
                                    {dump
                                        “SimpleDataRowTapHold”,
                                        e, ” “, e.row, ” “, e.internal-row-index,
                                        ” “, {simple-data-table.rows.find e.row}
                                    }
                                    {show-toast “SimpleDataRowTapHold”}
                                    {popup-message “SimpleDataRowTapHold”}
                                }
                            }

            {self.create-colums simple-data-table}
            {self.create-header-row simple-data-table}

  {method private {create-header-row simple-data-table:SimpleDataTable}:void
    || Header
    def header-row = {SingleSimpleDataRow
                         height = {any-to-Distance 50px},
                         border-width = 1px,
                         background = “#68665c”
                     }
   
    {header-row.set-cell
        1,
        border-width = 1px,
        {String “コード”}
    }
    {header-row.set-cell
        2,
        border-width = 1px,
        {String “商品名”}
    }
    {header-row.set-cell
        3,
        border-width = 1px,
        {String “画像”}
    }
    {header-row.set-cell
        4,
        border-width = 1px,
        {String “詳細”}
    }
    {simple-data-table.header-rows.append header-row}
   
  }
 

||
|| 行の定義
|| SimpleDataColumn
||
  {method private {create-colums simple-data-table:SimpleDataTable}:void
    {simple-data-table.columns.append
        {SimpleDataColumn
            width = 40px,
            border-color = “#cccccc”,
            border-width = 1px
        }
    }
    {simple-data-table.columns.append
        {SimpleDataColumn
            width = 300px,
            border-color = “#cccccc”,
            border-width = 1px
        }
    }
    {simple-data-table.columns.append
        {SimpleDataColumn
            width = 300px,
            border-color = “#cccccc”,
            border-width = 1px
        }
    }
    {simple-data-table.columns.append
        {SimpleDataColumn
            width = 20px,
            border-color = “#cccccc”,
            border-width = 1px
        }
    }
  }
   
}

 

 ソースコード（データ表示ロジック）　単一行オブジェクト

以下のコードのように、SimpleDataTableContentクラスを用いるこでセルのコンテンツを定義可能です。

また、SimpleDataTableContent.check-buttonなど、一部のコンテンツでは、セルのコンテンツ定義時にイベント（プロシージャ）を定義可能です。

    ||
    ||SingleSimpleDataRow
    ||
    {cb1.add-event-handler
        {on Action do
            {for i = 0 below 30 do

                ||単一行オブジェクト
                def test-row-0 = {SingleSimpleDataRow}

                ||セルコンテンツ（チェックボタン）
                {test-row-0.set-cell
                    0,
                    border-width = 1px,
                    halign = “center”,
                    {SimpleDataTableContent.check-button
                        “”,
                        {proc {b:bool}:void
                            {popup-message “チェックボタンが押下されました。：” & {String b}}
                        }
                    }
                }

                ||セルコンテンツ（文字列）
                {test-row-0.set-cell
                    1,
                    border-width = 1px,
                    {String “ISU-XXXX” & i}
                }
                {test-row-0.set-cell
                    2,
                    border-width = 1px,
                    {String “木材の椅子 “}
                }

                ||セルコンテンツ（画像）
                {test-row-0.set-cell
                    3,
                    {SimpleDataTableContent.image
                        {{manifest-url “directory”, “image”}.concat
                            “isu.png”}
                    }
                }

                ||セルコンテンツ（ボタン）
                {test-row-0.set-cell
                    4,
                    border-width = 1px,
                    {SimpleDataTableContent.button
                        “詳細”,
                        {proc {}:void
                            {popup-message “ボタンが押下されました。”}
                        }
                    }
                }
                {simple-data-table.rows.append test-row-0}
            }
        }
    } 
    
  
  

 

 

   ソースコード（データ表示ロジック）　複数行オブジェクト

 複数行オブジェクトも実装可能です。

実行イメージ

  caede21-grid-span.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

　

　ソースコード

　CompoundSimpleDataRow クラスを用いることにより複数行に結合セルを定義することが可能です。 

    ||
    ||CompoundSimpleDataRow
    ||
    {cb2.add-event-handler
        {on Action do
           
            def data-cols = 4
            def internal-row-num = 3
           
            {for i = 0 below 10 do

                ||複数行オブジェクト
                def test-row-0 = {CompoundSimpleDataRow internal-row-num}
               
                set test-row-0.height = 0.5in
                set test-row-0.border-color = “gray”
                set test-row-0.border-style = “flat”
                set test-row-0.border-width = {OffsetSpec 1px, 0px, 1px, 0px}
               
                ||
                ||rowspanを使った設定
                ||
                {test-row-0.set-cell
                    0,
                    0,
                    rowspan = internal-row-num,
                    {String “[” & i & “,0,0,rspan=3]”},
                    background = “red”,
                    font-weight = “bold”,
                    font-size = 18pt,
                    halign = “center”
                }
               
                {test-row-0.set-cell
                    0,
                    1,
                    rowspan = 2,
                    {String “[” & i & “,0,1,rspan=2]”},
                    background = “blue”,
                    font-weight = “bold”,
                    font-size = 18pt,
                    halign = “center”
                }
               
                {test-row-0.set-cell
                    1,
                    2,
                    rowspan = 2,
                    {String “[” & i & “,1,2,rspan=2]”},
                    background = “yellow”,
                    font-weight = “bold”,
                    font-size = 18pt,
                    halign = “center”
                }
               
                ||
                ||内部の行毎の処理
                ||
                {for j = 0 below internal-row-num do
                    def fixed-j = j
                    {test-row-0.set-cell
                        j,
                        3,
                        {String “[” & i & “,” & j &”,i-rnum=3]”},
                        background = “green”,
                        halign = “center”
                    }
                    {test-row-0.set-cell
                        j,
                        4,
                        {SimpleDataTableContent.check-button
                            “”,
                            {proc {b:bool}:void
    
                            }
                        },
                        halign = “center”
                    }
                   
                    ||
                    ||内部の行毎、列毎の処理
                    ||
                    {for c = 5 to (data-cols + 2) do
                        {test-row-0.set-cell
                            j,
                            c,
                            {String “[” & i & “,” & j &”,i-rnum=” & c &”]”},
                            font-style = “italic”,
                            color = “blue”,
                            halign = “center”
                        }
                    }
                   
                    ||
                    ||colpanを使った設定
                    ||
                    {if j == 0 then
                        {test-row-0.set-cell
                            j,
                            data-cols + 3,
                            {String “[” & i & “,” & j & “,” & data-cols + 3 &”]”},
                            font-style = “italic”,
                            background = “red”,
                            halign = “center”
                        }
                        {test-row-0.set-cell
                            j,
                            data-cols + 3 + 1,
                            {String “[” & i & “,” & j & “,” & data-cols + 3 + 1 &”]”},
                            font-style = “italic”,
                            background = “red”,
                            halign = “center”
                        }
                        {test-row-0.set-cell
                            j,
                            data-cols + 3 + 2,
                            {String “[” & i & “,” & j & “,” & data-cols + 3 + 2 &”]”},
                            font-style = “italic”,
                            background = “red”,
                            halign = “center”
                        }
                     elseif j == 1 then
                        {test-row-0.set-cell
                            j,
                            data-cols + 3,
                            {String “[” & i & “,” & j & “,” & data-cols + 3 &”]”},
                            font-style = “italic”,
                            background = “red”,
                            halign = “center”
                        }
                        {test-row-0.set-cell
                            j,
                            data-cols + 3 + 1,
                            colspan = 2,
                            {String “[” & i & “,” & j &”,cspan=” & 2 &”]”},
                            font-style = “italic”,
                            background = “pink”,
                            halign = “center”
                        }
                     else
                        {test-row-0.set-cell
                            j,
                            data-cols + 3,
                            colspan = 3,
                            {String “[” & i & “,” & j &”,cspan=” & 3 &”]”},
                            font-style = “italic”,
                            background = “green”,
                            halign = “center”
                        }
                    }
                   
                  
                }
                {simple-data-table.rows.append test-row-0}
            }
        }
    }
   
    {vb-result-list.add
        simple-data-table
    }
   
  }
  

 

  

 

SimpleDataConnectorを使ったRecordSetとの結合

Curlと同様にRecordSetを使うことも可能です。

ソースコード

||
|| RecordSetを使ったサンプル
||
    {cb1.add-event-handler
        {on Action do
            def record-set =
                {RecordSet
                    {RecordFields
                        {RecordField
                            “First”, caption = “First Name”, domain = String
                        },
                        {RecordField
                            “Last”, caption = “Last Name”, domain = String
                        },
                        {RecordField
                            “Age”, domain = int
                        }
                    },
                    {RecordData First = “John”, Last = “Smith”, Age = 25},
                    {RecordData First = “Jane”, Last = “Smith”, Age = 29},
                    {RecordData First = “Jane”, Last = “Jones”, Age = 28}
                }
           
            def connector = {SimpleDataConnector record-set, simple-data-table}
        }
       
    }
   
    {vb-result-list.add
        simple-data-table
    }

 

 

 

 

ja 日本語
ar العربيةzh-CN 简体中文nl Nederlandsen Englishfr Françaisde Deutschit Italianoja 日本語pt Portuguêsru Русскийes Español