2012年9月18日火曜日

ログイン画面を作ってみました。

とりあえず、Caede化する前に、いったんCurlで画面を作ってみようと思います。

そこで、簡単ですが、ログインの画面を作ることにしました。

それっぽいパッケージ構成も同時に作成していこうと考えております。

まずは、パッケージとして、project.cprjファイルと同じ階層に、
screensフォルダを作成して、SCREENSというパッケージを作成しました。




上記の画像の赤枠部分ですね。

さらに、こちらのパッケージ内に

login-graphic.scurl
login-screen.scurl

の2ファイルを作成してあります。Caedeで画面を作る際には、graphicクラスと、screenクラスを作る必要がありそうです。

***-graphic.scurl は、画面のレイアウトを作成するクラス。
***-screen.scurl は、画面のロジックを作成するクラス。

という感じですね。

※Curlだとファイル名は「-」でつないで名前を付けることが多いと思います。

それぞれのクラスには前回作ったプログラムを張り付けてみました。

============================== login-graphic.scurl ==============================

{curl-file-attributes character-encoding = "utf8"}

|| ログイン用 グラフィッククラス
{define-class public LoginGraphic {inherits Frame}

  || コンストラクタ
  {constructor public {default}

    || レイアウトを作成して格納
    {construct-super
        {self.create-graphic}
    }

  }

  || レイアウト作成用メソッド
  {method private {create-graphic}:VBox

    def vbox =
        {VBox
            name = "vbox",
            width = 300px,
            height = 500px,
            background = "#FF0000",
            {CommandButton
                name = "cb",
                label = "ボタンです。"
            }
        }

    {return vbox}

  }

}

============================== login-graphic.scurl ==============================

============================== login-screen.scurl ==============================

{curl-file-attributes character-encoding = "utf8"}

|| ログイン用 ロジッククラス
{define-class public LoginScreen {inherits {Screen-of LoginGraphic}}

  || コンストラクタ
  {constructor public {default}

    def vbox = {self.find-graphic-by-name "vbox"} asa VBox
    def cb = {self.find-graphic-by-name "cb"} asa CommandButton
    {cb.add-event-handler
        {on Action do
            {popup-message "ボタンを押下しました。"}
            {show-toast "ボタンを押下しました。"}
        }
    }
  }
}
============================== login-screen.scurl ==============================

という感じですね。

とりあえず、分解してみたので勢い勇んで実行(start.curlを実行)したところ、

という形で表示されたため、とりあえずの移動は成功したようです。

ただ、そのままCaede化したら、

という形のエラー画面が表示されてしまいました。

うーん、なんでしょう。ちょっとわからないので調べて次回までに何とかしたいと思います。

ではでは。

0 件のコメント:

コメントを投稿