画面を作ってみよう(2回目)

さて、前回は、VLEで画面レイアウトを作成して、変換をかけてみるとどうなるのかという検証を行ってみました。

現状はまだVLEで作成したレイアウトを変換することは出来ないようでしたので、

前回上げた、１．の手順で画面を作っていって変換してみたいと思います。

１．HTMLと同様に経験とひらめきと感覚で画面レイアウトを作成する方法。

まずは、Curlの簡単なレイアウトの作り方を記述したいと思います。

Curlには、いくつかのレイアウト用のコンテナがあります。

1. Frameクラス
2. Canvasクラス
3. HBox/VBoxクラス

上記のクラスの違いを簡単に説明させていただくと、

Frameクラスは、内部に1つだけグラフィックを格納できます。

Canvasクラスは、(x, y)座標で指定した箇所にグラフィックを設定できます。

HBox/VBoxクラスは、それぞれ、グラフィックを横に並べる(HBox)、グラフィックを縦に並べる(VBox)事ができます。

(※詳細については、CurlIDEのヘルプを参照してください。)

普段レイアウトを作る際には、HBox/VBoxクラスを使用して作成しております。

前回触れました、VLEを使う際には、Canvasクラスを使用して作成すると便利に感じることがありますが、

画面サイズに合わせて伸縮することができないことが多いため、HBox/VBoxで作成するほうが汎用性が高いかと思われます。

Frameクラスについては、項目ごとのピンポイントで使用することが多いかと思います。(コントロールを上下左右の中央に寄せる場合等)

さて、今回は、VBoxを使用して前回と同様のレイアウトを作成して、

Caede変換をかけてみたいと思います。

前回同様に、load.scurlに記述をして試してみたいと思います。

<load.scurlの記述(追加分)>

{define-class public ColorSampleGraphic {inherits Frame}

  {constructor public {default}

    {construct-super

        {VBox

            name = "vbox",

            width = 300px,

            height = 500px,

            background = "#FF0000",

            {CommandButton

                label = "ボタンです。"

            }

        }

    }

  }

}

|| ロジッククラス

{define-class public ColorSampleScreen

  {inherits {Screen-of ColorSampleGraphic}}

  {constructor public {default}}

}

{client {screen-graphic-reference "colorsample", ColorSampleGraphic}}

今回は、start.curlにも記述を追加します。

<start.curlの記述(追加分)>

{startup ColorSampleScreen}

上記2点の追加をして、「caedeアプリケーション変換」を実施したところ、

といった形の画面を出力することができました。

ちなみに、こちらのロジックをそのままCurlプログラムとして実行するとどうなるかといいますと、

といった感じの見た目になります。ボタンの形が若干違うようですが、ほぼ同じ形に変換されています。

変換されるとはわかっていても実際に見るとすごいなぁと思いますね。

なんせ、Android上に載せるために追記の必要がないというのがすごいと思います。

今回は、レイアウトが出たということで、次回はイベントを付与して動作を見てみたいと思います。

ではでは。