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

 ２．タブレット用／スマートフォン用の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

            }
        }
}