例） || Register {self.register-bt.add-event-handler     {on Action do         {register-update-module-directory             {url "http://www.xxxxx.com/Update/Caede/AppDemo"}         }     } } 

Android/assets/android-native-web

iOS/assets/ios-native-web

android-native-web.zip) http://www.xxxxx.com/Update/Caede/AppDemo/android-native-web.zip  ios-native-web.zip) http://www.xxxxx.com/Update/Caede/AppDemo/ios-native-web.zip 

< ?xml version="1.0" encoding="utf-8"? >   <caedeUpdate>   <rev>1</rev> </caedeUpdate> 

let sid:TransitionDialog =                     {TransitionDialog                         geometry =                             {DialogGeometrySpec                                 ||このダイアログをどこに表示するか指定します                                 ||以下の場合、左から表示されます                                 align-left? = true,                                 align-right? = false,                                 align-top? = false,                                 align-bottom? = false                             },                         ||表示時のアニメーションを指定します                         show-transition =                             {StandardTransitionAnimationSpec                                 ||アニメーションの表示時間                                 transition-duration = 0.5s,                                 ||回転させながら表示させます                                 rotation = 0deg                             },                         ||ダイアログの透明度                         opacity = 100%,                         ||ダイアログが表示されているときの背景の透明度                         cover-opacity = 0%,                         ||ダイアログが表示されているときの背景色                         cover-color = "black",                         ||ダイアログを表示する親オブジェクト                         ||このオブジェクト上に表示されます                         parent-object = ui-holder                     } 

② COM.CURL.CAEDE.FRAMEWORKをデリゲートします。

③ manifest.mcurlを編集します。

④ start.curlを編集します。

⑤ 画面クラス、画面コントロールクラスを作成します。

⑥ Curlソースコードをデプロイします。（Caedeアプリケーションに変換）

⑦ 各ターゲットプラットフォームで実行するためのパッケージング化を行います。

{curl 8.0 package}
{package MYPACKAGE,
{compiler-directives careful? = true}
}
{import * from COM.CURL.CAEDE.FRAMEWORK.STANDARD}
{import * from COM.CURL.CAEDE.GUI}
{import * from CURL.GUI.BASE}

||　画面A
{include “Ag.scurl”} ||　画面クラス
{include “As.scurl”} ||　画面コントロールクラス

||　画面B
{include “Bg.scurl”} ||　画面クラス
{include “Bs.scurl”} ||　画面コントロールクラス

{client
||　画面A
{screen-graphic-reference “gamena”, GamenAGraphic},
||　画面B
{screen-graphic-reference “gamenb”, GamenBGraphic}
}

|| Graphicクラス
{define-class public GamenAGraphic
{inherits Frame}

{constructor public {default}
{construct-super
{VBox
width = 200px, 
halign = “center” ,
{RadioFrame
name = “rf1”,
value = “Lizard”,
{VBox
width = 300px,
{RadioButton name = “rb1”, radio-value = “Antelope”},
{RadioButton name = “rb2”, radio-value = “Lizard”},
{RadioButton name = “rb3”, radio-value = “Vulture”}
}
},
{Fill height = 10px},
{CheckButton
name = “cb1”, 
label = “CheckButton1”, 
width = 300px
},
{Fill height = 10px},
||　遷移先へ渡すパラメータの値
{TextField 
name = “atf1” ,
width = 100px,
value = “この値を渡す”
},
{Fill height = 10px},
||　遷移先画面Bに遷移する
{CommandButton
name = “anextscreen”,
width = 300pt,
label = “次の画面に遷移”
},
{Fill}
}
}
}
}

|| Screenクラス
{define-class public GamenAScreen
{inherits {Screen-of GamenAGraphic}}

field atf1:TextField
field anextscreen:CommandButton

{constructor public {default}
set self.atf1 = {self.find-graphic-by-name “atf1”} asa TextField
set self.anextscreen = {self.find-graphic-by-name “anextscreen”} asa CommandButton
{self.anextscreen.add-event-handler
{on Action do
|| 遷移先画面Bに遷移し、その際に値を渡す。
{self.change-page GamenBScreen, data = self.atf1.value}
}
}
}
}

|| 画面クラス（遷移先）
{define-class public GamenBGraphic
{inherits Frame}

{constructor public {default}
{construct-super
{VBox
width = 600px,
height = 500px,
{TextDisplay 
name = “td1” ,
width = 100px,
value = “遷移しました”
},
{Fill height = 10px},
{HBox
{TextDisplay
name = “td2” ,
width = 200px,
value = “遷移元の値：”
},
{Fill},
{TextDisplay
name = “td3” ,
width = 200px,
value = “this “
}
},
{Fill}
}
}
}
}

|| 画面コントロールクラス（遷移先）
{define-class public GamenBScreen
{inherits {Screen-of GamenBGraphic}}

field td1:TextDisplay
field td2:TextDisplay
field td3:TextDisplay

{constructor public {default}
set self.td1 = {self.find-graphic-by-name “td1”} asa TextDisplay
set self.td2 = {self.find-graphic-by-name “td2”} asa TextDisplay
set self.td3 = {self.find-graphic-by-name “td3”} asa TextDisplay
}

{method public {on-page-changed data:any}:void
|| 遷移元画面Aより渡されたパラメータを設定する。
set self.td3.value = data asa String
}
}

① 新しいプロジェクトを作成します。（Caede）

② start.curlを編集します。

③ 画面クラス、画面コントロールクラスを作成します。

④ Curlソースコードをデプロイします。（Caedeアプリケーションに変換）

⑤各ターゲットプラットフォームで実行するためのパッケージング化を行います。

let conn:StorageConnection = {StorageConnection.open
                                                        “testdb”, || 任意の名前
                                                        type = StorageType.kvs
                                                    }
def s = conn.storage asa KvsStorage

|| set (値のセット)
set s[“key1”] = “val1” || or {s.set “key1”, “val1”}
set s[“key2”] = “val2” || or {s.set “key2”, “val2”}

|| get (値の取得)
{output s[“key2”]} || or {s.get “key2”}

|| find (部分一致検索)
{for v key k in {s.find “key”} do
　　{output k, v} || 2件がヒットする
}

def con = {StorageConnection.open “testRDBdb”} ||任意の名前
def storage = con.storage asa RdbStorage

||（ＳＱＬによる） テーブル作成、初期データ作成
{storage.execute-update “DROP TABLE IF EXISTS TEST”}
{storage.execute-update “CREATE TABLE TEST (COL1 integer, COL2 text)”}
{con.begin}
{for i = 0 below 5 do
    {storage.execute-update “INSERT INTO TEST values(?, ?)”, i, “DATA” & i}
}
{con.commit} || commit

||（ＳＱＬによる）データ取得
def rows = {storage.execute-query “SELECT * FROM TEST”}
{for r in rows do
    {output 
        {format
            “RDB test col1=%s col2=%s”, 
            {r.get-int “COL1”}, 
            {r.get-String “COL2”}
        }
    }
}
{storage.execute-update “DROP TABLE IF EXISTS TEST”}
{popup-message “Please see the console log.”}

def c-list = {find-contact-list “AB”} || 前方一致する連絡帳データ取得。
|| あるいは{get-contact-list}で連絡帳データ全件取得
{for c in c-list do
    {output {format “%s %s”, c.id, c.name}} || c.phones, c.emailsプロパティもある。
}

{call-phone “03123456789”}

{send-email {StringArray abc@curl.com}, “Test!”, “This is a test.”}

||manifestファイルに指定します
{component file logo1,
  location = “curl/images/logo1.png”
}

|| simple-imageプロシージャ
{simple-image
  name = “new_image_g”,
  {manifest-url “file”, “logo1”}
}

|| SimpleImageGraphicクラス
set self.image-g = {self.find-graphic-by-name “new_image_g”} asa SimpleImageGraphic

|| ボタン押下時に画像を入れ替える
{self.logo12btn.add-event-handler
  {on Action do
    set self.image-g.source = {manifest-url “file”, “logo2”}
  }
}

|| デスクトップ版で御馴染みのpopup-message

def pm = {self.find-graphic-by-name “popup-message”} asa CommandButton
{pm.add-event-handler
  {on Action do
    {popup-message “Hello!”　}
  }
}

|| show-toastプロシージャ

def toast = {self.find-graphic-by-name “toast”} asa CommandButton
{toast.add-event-handler
  {on Action do
    {show-toast “This is message.”}
  }
}

|| インジケータ
def indicator = {self.find-graphic-by-name “indicator”} asa CommandButton
{indicator.add-event-handler
  {on Action do
    {with-busy-indicator
      message = “WAIT…..”
    do
      {for i = 0 below 10000 do
        def i = 1000 * 0.2 * 20
      }
    }
  }
} 

|| 画面クラス
{define-class public MySampleGraphic{inherits Frame}
  {constructor public {default}
    {construct-super
        {ScalableScrollBox
            name = “scalable-scroll-box”,
            scalable? = true,
            scale = 1.0,
            min-scale = 0.25,
            max-scale = 8.0,
            {simple-image
                {{manifest-url “directory”, “images”}.concat “map.jpg”},
                width = 8.46cm, height = 4.68cm
            }
        }
    }
  }
}

|| ロジッククラス
{define-class public MySampleScreen {inherits {Screen-of MySampleGraphic}}
  {constructor public {default}}
}

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

　　【ブロック（グラフィック）部分】
　　【ブロック（ロジック）部分】

 ２．タブレット用／スマートフォン用のGraphicクラスを定義する

　タブレット用／スマートフォン用のGraphicクラスを定義し、１で作成したブロッククラス（グラフィック）と紐付ける。

　　【スマートフォン用Graphicクラスのソースコード】
　　【タブレット用Graphicクラスのソースコード】

３．タブレット用／スマートフォン用のScreencクラスを定義する（ブロッククラスとの紐付け）

　タブレット用／スマートフォン用のScreenクラスを定義し、１で作成したブロッククラス（ロジック）と紐付ける。

　　【タブレット用Screenクラスのソースコード】
　　【スマートフォン用Screenクラスのソースコード】

４．起動時の実装（startup）

　起動時用のスクリーンクラスを定義し、タブレット用／ スマートフォン用の画面サイズとサイズ設定の名称を定義する。

 ||メニューブロック
{define-class public MenuBlock {inherits Frame}
  {constructor public {default …}
    {construct-super
        name = “menublock”,
        {VBox
            width = {make-elastic},           
            margin = 20px,
            halign = “center”,
            height = {make-elastic},
            background = “darkblue”,
            color = “white”,
            border-width = 5px,
            border-color = “red”,
            spacing = 15px,
           
            {CommandButton
                name = “menu-bt1”,
                label = “メニュー1”,
                height = 40px,
                width = {make-elastic}
            },
            {CommandButton
                name = “menu-bt2”,
                label = “メニュー2”,
                height = 40px,
                width = {make-elastic}
            },
            {CommandButton
                name = “menu-bt3”,
                label = “メニュー3”,
                height = 40px,
                width = {make-elastic}
            }
        },
        {splice …}
    }
    set self.margin = 10px
  }
 
}

||検索ブロック
{define-class public SearchBlock {inherits Frame}

～省略～

}

||結果ブロック
{define-class public ResultBlock {inherits Frame}  

～省略～

}

||メニューブロック用　スクリーンクラス
{define-class public MenuBlockScreen {inherits {BlockScreen-of MenuBlock}}
 
  {constructor public {default graphic:#Graphic = null}
    {construct-super graphic = graphic}
   
    {dump “MenuBlockScreeeen constructor”}
   
    def menu-bt1 = {self.find-graphic-by-name “menu-bt1”} asa CommandButton
    {menu-bt1.add-event-handler
        {on Action do

            || 
            ||親のスクリーンを取得する
            ||
            {dump self.parent-screen}           
            {if self.parent-screen isa SmartphoneMenuScreen then

                || スマートフォンの場合
                ||画面遷移します
                ||
                {self.change-page
                    SmartphoneSearchScreen,
                    data = “menu1”
                }
             else
                || スマートフォン以外の場合
                ||画面遷移はしないが、BlockScreen間でon-page-changedメソッドを呼び出すことが可能
                ||※画面遷移を伴わないon-page-changed。
                {self.activate-block
                    SearchBlockScreen,
                    data = “menu1”
                }
            }
        }
    }
  }
 
  {method public {on-page-changed data:any}:void
    {dump ” MenuBlockScreeeen.on-page-chaged”}
  }
 
}

||検索ブロック
{define-class public SearchBlockScreen {inherits {BlockScreen-of SearchBlock}}

～省略～ 

}

||結果ブロック
{define-class public ResultBlockScreen {inherits {BlockScreen-of ResultBlock}} 
  
～省略～

}

||
||タブレット用Graphicクラス
||
{define-class public TabletGraphic {inherits Frame} 
  {constructor public {default …}
    {construct-super
        {VBox
            width = {make-elastic preferred-size = 1024px},
            height = {make-elastic preferred-size = 1024px},
            {HeaderBlock},
            {HBox
         　　       {MenuBlock},
                {VBox
                    {SearchBlock},
                    {ResultBlock}
                }
            }
        }
    }
  }
}
}

||
||スマートフォン用Graphicクラス（メニュー）
||
{define-class public SmartphoneMenuGraphic {inherits Frame}
 
  {constructor public {default …}
    {construct-super
        {VBox
            width = {make-elastic preferred-size = 767px},
            height = {make-elastic preferred-size = 1024px},
                {HeaderBlock},
                {MenuBlock }
        }
    }
  }
}

||
||スマートフォン用Graphicクラス（検索）
||
{define-class public SmartphoneSearchGraphic {inherits Frame}
 
～省略～
}

||
||スマートフォン用Graphicクラス（結果）
||
{define-class public SmartphoneResultGraphic {inherits Frame}
 
～省略～
}

||
||タブレット用Screenクラス
||
{define-class public TabletScreen {inherits {Screen-of TabletGraphic}}
 
  {constructor public {default}

    ||BlockScreenクラスと関連するグラフィックオブジェクト
    def header-block = {self.find-graphic-by-name “headerblock”} asa HeaderBlock
    def menu-block = {self.find-graphic-by-name “menublock”} asa MenuBlock
    def search-block = {self.find-graphic-by-name “searchblock”} asa SearchBlock
    def result-block = {self.find-graphic-by-name “resultblock”} asa ResultBlock
    
    ||当クラスの構成要素となる、ブロックのスクリーンクラスを登録する。
    {self.regist-block-screen HeaderBlockScreen, header-block}
    {self.regist-block-screen SearchBlockScreen, search-block}
    {self.regist-block-screen MenuBlockScreen, menu-block}
    {self.regist-block-screen ResultBlockScreen, result-block}   
  }
}

||
||スマートフォン用Screenクラス（メニュー）
||SmartphoneMenuGraphicの対となるクラス
||
{define-class public SmartphoneMenuScreen {inherits {Screen-of SmartphoneMenuGraphic}}
 
  {constructor public {default} 
    def header-block = {self.find-graphic-by-name “headerblock”} asa HeaderBlock
    def menu-block = {self.find-graphic-by-name “menublock”} asa MenuBlock
    
    ||当クラスの構成要素となる、ブロックのスクリーンクラスを登録する。
　　 {self.regist-block-screen HeaderBlockScreen, header-block}
　　 {self.regist-block-screen MenuBlockScreen, menu-block}
   
  }

  {method public {on-page-changed data:any}:void
    {dump “SPMenuScreen.on-page-chaged”}
  }
}

||
||スマートフォン用Screenクラス（検索）
||SmartphoneMenuGraphicの対となるクラス
||
{define-class public SmartphoneSearchScreen {inherits {Screen-of SmartphoneSearchGraphic}} 
 ～省略～
}

||
||スマートフォン用Screenクラス（結果）
||
{define-class public SmartphoneResultScreen {inherits {Screen-of SmartphoneResultGraphic}}  
   ～省略～
}

{startup
    SmartphoneMenuScreen,  ||①起動時のスクリーンクラス 
    block-layout-thresholds =
        {BlockLayoutThresholds

            ||②　画面サイズとサイズ設定の名前の定義
            “SMART_PHONE_size”, 0px,　   ||A
            “TABLET_size”, 768px,　　　　    ||B

            ||③　起動時のスクリーンクラス①に対する実際に動作するタブレット／スマートフォン用のスクリーンクラス
            “COM.CURL.CAEDE.RESPONSIVE-SAMPLE.SmartphoneMenuScreen”,  ||C
            {{HashTable-of String, String}
                “SMART_PHONE_size”, “COM.CURL.CAEDE.RESPONSIVE-SAMPLE.SmartphoneMenuScreen”, ||D
                “TABLET_size”,      “COM.CURL.CAEDE.RESPONSIVE-SAMPLE.TabletScreen”                       ||E

            }
        }
}

||
|| レイアウト部分
|| 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
        }
    }
  }
   
}

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

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

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