CodeZine(コードジン)

特集ページ一覧

モバイルアプリをCurlで作る!

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

目次

実装(第2画面)

 詳細画面のソースコードを紹介します。項目が多いためソースコードは長いですが、ロジックは単純です。

サンプルアプリ 第2画面
サンプルアプリ 第2画面

画面クラス

 では、画面クラスから確認してみましょう。

画面クラス(GamenBGraphic):Bg.scurl
{import * from COM.CURL.CAEDE.TRANSLATOR.HTML.CLIENT}

{define-class public GamenBGraphic
  {inherits Frame}
  {constructor public {default}
    {construct-super
        {VBox
            width = 480px,
            height = 800px,
            background = "#C6CDD5",
            {HBox
                width = 480px,
                height = 80px,
                background = "#798EA9",  
                valign = "center",
                {CommandButton
                    name = "bt-modoru",
                    label = {VBox
                                {Fill},
                                {HBox
                                    valign = "center",
                                    {caede-image {url "./image/btn_modoru.gif"},
                                        width = 32px, height = 32px},
                                    "戻る"
                                },
                                {Fill}
                            },
                    font-size = 24px,
                    font-size = 24px,
                    width = 100px,
                    height = 50px
                },
                {Fill width = 5px},
                {caede-image {url "./image/title.gif"}, width = 40px, height = 40px},
                {Fill width = 5px},
                {TextFlowBox color = "white", font-size = 24px, width = 300px,"Inventory control system for mobile" }
            },
            {HBox
                {Fill width = 20px},
                {VBox
                    {Fill height = 30px},
                    {HBox
                        {VBox
                            {HBox
                                valign = "center",
                                {caede-image {url "./image/i_info.gif"}, width = 40px, height = 40px},
                                {Fill width = 5px},
                                {TextFlowBox color = "white", font-size = 24px, "Information" }
                            },
                            {HBox
                                ||商品名称
                                {TextDisplay
                                    border-color= "#C6CDD5",
                                    border-style = "none"
                                    background = "#C6CDD5",
                                    name = "td-sname" ,
                                    font-size = 20px,
                                    width = 260px,
                                    height = 30px
                                }
                            }
                        },
                        {Fill},
                        {VBox
                            ||商品情報画面遷移ボタン
                            {CommandButton
                                name = "bt-shohin",
                                label = {VBox
                                            {Fill},
                                            {HBox
                                                valign = "center",
                                                {caede-image {url "./image/btn_shohin-004.gif"},
                                                    width = 32px, height = 32px
                                                },
                                                "商品情報"
                                            },
                                            {Fill}
                                        },
                                font-size = 24px,
                                width = 155px,
                                height = 80px
                            }
                        },
                        {Fill width = 20px}
                    },
                    {Fill height = 30px},
                    {HBox
                        width = 460px,
                        valign = "center",
                        {caede-image {url "./image/i_yuko.gif"}, width = 40px, height = 40px},
                        {Fill width = 5px},
                        {TextFlowBox color = "white", font-size = 24px, "有効在庫数" }
                    },
                    {HBox
                        width = 480px,
                        height = 50px,
                        ||有効在庫数
                        {VBox 
                            border-color= "gray",
                            border-style = "flat"
                            background = "#C6CDD5",
                            name = "td-yukosu" ,
                            halign = "right", 
                            width = 440px,
                            height = 40px,
                            {Fill},
                            {HBox
                                {TextFlowBox  font-size = 40px, height = 40px, "190" },
                                {Fill width = 20px}
                            },
                            {Fill}
                        },
                        {Fill width = 20px}            
                    },
                    {Fill height = 30px},
                    {HBox
                        width = 460px,
                        valign = "center",
                        {caede-image {url "./image/i_jitsu.gif"}, width = 40px, height = 40px},
                        {Fill width = 5px},
                        {TextFlowBox color = "white", font-size = 24px, "実在庫数" },
                        {Fill}
                    },
                    {HBox
                        width = 460px,
                        ||実在庫数
                        {TextField 
                            font-size = 20pt,
                            name = "tf-zaikosu" ,
                            width = 420px,
                            height = 40px
                        },
                        {Fill width = 20px}            
                    },
                    {Fill height = 60px},
                    {HBox
                        width = 480px,
                        valign = "center",
                        {caede-image {url "./image/i_ope.gif"}, width = 40px, height = 40px},
                        {Fill width = 5px},
                        {TextFlowBox color = "white", font-size = 24px, "Operation" }
                    },
                    {HBox
                        background = "#C6CDD5",
                        height = 120px,
                        ||発注依頼画面へ遷移するボタン
                        {CommandButton
                            name = "bt-hachu",
                            label = {VBox
                                        {Fill},
                                        {HBox
                                            valign = "center",
                                            {caede-image {url "./image/btn_hachu.gif"},
                                                width = 32px, height = 32px},
                                            "発注"
                                        },
                                        {Fill}
                                    },
                            font-size = 24px,
                            width = 210px,
                            height = 80px
                        },
                        {Fill},
                        ||確定ボタン                
                        {CommandButton
                            name = "bt-kakutei",
                            label = {VBox
                                        {Fill},
                                        {HBox
                                            valign = "center",
                                            {caede-image 
                                                {url "./image/btn_kakutei.gif"},
                                                width = 32px, height = 32px
                                            },
                                            "確定"
                                        },
                                        {Fill}
                                    },
                            font-size = 24px,
                            width = 210px,
                            height = 80px
                        },
                        {Fill width = 20px}            
                    }
                }
            }   
        }
    }
  }
}

 先ほど紹介していないオブジェクトとしては、次のようなものを使っています。

  • TextDisplay:単一行の編集不可能なテキストエントリボックス
  • CommandButton:基本的なプッシュボタンコントロール

 これらのオブジェクトでは、Curl言語では良く利用します。今回は、手書きでオブジェクトを並べてレイアウトを作成しましたが、CurlにはVLEと呼ばれるレイアウト作成エディタが存在しており、グラフィカルにレイアウトを作成できます(※現時点のCaedeでは、VLE機能は提供されていません)。

 また、このようにレイアウトを定義した場合でも、作成されるソースコードはテキストベースであることもCurlの特徴となります。レイアウトのちょっとした修正をしたい場合、わざわざレイアウト作成エディタを用いなくても、テキストエディタで修正することが可能です。

画面コントロールクラス

 続いて、詳細画面の画面コントロールクラスから確認してみましょう。

画面クラス(GamenBScreen):Bs.scurl
{define-class public GamenBScreen  {inherits {Screen-of GamenBGraphic}}
  
  field td-sname:TextDisplay
  field td-zaikosu:TextDisplay
  field tf-zaikosu:TextField
  field td-yuko:TextDisplay
  field td-yukosu:TextDisplay
  field bt-kakutei:CommandButton
  field bt-hachu:CommandButton
  field bt-modoru:CommandButton
  
  {constructor public {default}
    set self.td-sname = {self.find-graphic-by-name "td-sname"} asa TextDisplay
    set self.td-zaikosu = {self.find-graphic-by-name "td-zaikosu"} asa TextDisplay
    set self.tf-zaikosu = {self.find-graphic-by-name "tf-zaikosu"} asa TextField
    set self.td-yuko = {self.find-graphic-by-name "td-yuko"} asa TextDisplay
    set self.td-yukosu = {self.find-graphic-by-name "td-yukosu"} asa TextDisplay
    set self.bt-kakutei = {self.find-graphic-by-name "bt-kakutei"} asa CommandButton
    set self.bt-hachu = {self.find-graphic-by-name "bt-hachu"} asa CommandButton
    set self.bt-modoru = {self.find-graphic-by-name "bt-modoru"} asa CommandButton
    ||戻るボタン押下時の処理
    {self.bt-modoru.add-event-handler
        {on Action do
            {self.change-page GamenAScreen} ||明細画面へ遷移する
        }
    }   
    ||確定ボタン押下時の処理
    {self.bt-kakutei.add-event-handler
        {on Action do
            {if self.tf-zaikosu.value == "" then
                {popup-message "入力してください。"}
             else
                {popup-message "確定しました。"}
                {self.change-page GamenAScreen} ||明細画面へ遷移する
            }
        }
    }   
    ||発注依頼ボタン押下時の処理
    {self.bt-hachu.add-event-handler
        {on Action do
            {popup-message "発注を依頼しました。"}
            ||TODO:発注指示の処理・・・・
        }
    }
  }
  ||画面遷移時の処理
  {method public {on-page-changed
                     data:any
                 }:void
    ||明細画面より渡されたパラメータを設定する。
    set self.td-sname.value = data asa String
  }
}

 ボタン押下時の処理や、画面遷移時の処理を定義しています。簡易的なメッセージダイアログを出力するには、 {popup-message}プロシージャを用います。このプロシジャもCurlでは御馴染みのAPIです。画面遷移時の処理は、 on-page-changedメソッドをオーバライドして定義します。

||画面遷移時の処理
{method public {on-page-changed
                 data:any
             }:void
||明細画面より渡されたパラメータを設定する。
set self.td-sname.value = data asa String
}

 上記例では、遷移元画面で設定したパラメータを受け取り、td-snameオブジェクトに設定しています。

 今回の例では、発注ボタン押下時の処理や、商品情報ボタン押下時の処理を定義していませんが、通常はこのクラスにて業務ロジック(画面コントロールロジック)を定義することになります。


  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

バックナンバー

連載:CurlデベロッパーセンターPick Up

もっと読む

All contents copyright © 2005-2020 Shoeisha Co., Ltd. All rights reserved. ver.1.5